HTML Basics 4-- form

Form of application scenarios

Forms works:

Form syntax:

<form>

Form elements (form elements include: text fields, radio buttons, check boxes, buttons, lists, etc.)

</form>

Note: The form itself is not visible, we can see that the specific form elements in a form

Add the following tags to achieve form element:

(1) <input> tag

Syntax: <input type = "type attribute" name = "name" ......> Note <input> tag is a single tag

<Input> tag and the attribute value type Description:

Simple form form:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单的表单案例</title>
    </head>
    <body>
        <form>
            姓名：<input type="text" name="username" />
            密码：<input type="password" name="pwd" />
            <input type="submit" value="提交"/>
        </form>
        
    </body>
</html>

The results show:

a: single text field Syntax:

< Form > < INPUT type = "text" name = "..." ...... /> </ form > single text field properties:

file field b: to transfer files to the server

format:

<form>
　　<input type="file" name="..." ...... /> </form>

c. checkbox

format:

<form>
　　<input type="radio" name="..." value="..." checked/> </form>

Note: name of the same group to the same value. checked state is selected by default

d. checkbox

format:

<form>
　　<input type="checkbox" name="..." value="..." checked/> </form>

Note: name value of the check box of the same group may be the same or different, but to the server in case there are multiple groups doing good judgment, or try the same group of name value set to the same name. checked state is selected by default

e. Button

format:

<form>
　　<input type="button" name="..." value="..." />普通按钮

　　<input type="submit" name="..." value="..." />提交按钮

　　<input type="reset" name="..." value="..." />重置按钮 </form>

Note: name value of the check box of the same group may be the same or different, but to the server in case there are multiple groups doing good judgment, or try the same group of name value set to the same name. checked state is selected by default

f. image domain (image submit button), the submit button has a function, while increasing the aesthetics button

format:

<form>
　　<input type="image" name="..." src="imageurl"/> </form>

g. a hidden field for those who do not want users to see but to submit information to the server

format:

<form>
　　<input type="hidden" name="..." value="..."/> </form>

<input>标签的练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单的表单案例</title>
    </head>
    <body>
        <hr color="black" />
        
        <form>
            <table bgcolor="gainsboro" align="center" width="50%">
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="username" placeholder="请输入姓名"/></td>
                </tr>
                <tr>
                    <td>邮箱：</td>
                    <td><input of the type = "Email" name = "Email" value = "@ 163.com" /> </ td > 
                </ TR > 
                < TR > 
                    < td > Password: </ td > 
                    < td > < the INPUT of the type = "password" name = "pwd" placeholder = "Please enter the password" /> </ TD > 
                </ TR > 
                < TR > 
                    < TD > confirm password: </ TD >
                    <td><input of the type = "password" name = "repwd" placeholder = "Please re-enter the password" /> </ td > 
                </ TR > 
                < TR > 
                    < td > Photo: </ td > 
                    < td > < the INPUT of the type = "File " name =" File "  /> </ TD > 
                </ TR > 
                < TR > 
                    < TD > sex: </ TD > 
                    < TD >
                        男<input type="radio" name="sex" checked/>
                        女<input type="radio" name="sex" />
                    </td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td>
                        唱歌<input type="checkbox" name="sing" value="sing" checked/>the INPUT<
                        Runningtype="checkbox" name="running" value="running" checked/>
                        游泳<input type="checkbox" name="swimming" value="swimming" checked/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" name="button" value="button"/>
                    </td>
                    <td>
                        <input type="reset" name="reset" value="reset"/>
                        <input type="submit" name="submit" value="submit"/>
                    </td>
                </tr>
                <tr>
                    <td><input type="hidden" name="hidden" value="我是隐藏的信息"/></td>
                    
                    <td><input type="image" name="igage_button" src="../../慕课手机/img/logo.png"/><br /></td>
                </tr>
            </table>    
        </form>
        
    </body>
</html>

The results show:

(2) the drop-down menu list and label

format:

<form>
　　<input type="hidden" name="..." value="..."/> </form>

Form structure

Use common form elements

Form interaction properties

HTML Basics 4-- form

Guess you like