1. Form tag - <form> ... </ form>
(. 1) <form> start position and the end position </ form> defined form, when the form is submitted content is <form> contents of the form
(2) basic format
< Form Action = "server address (to accept the contents of the form of address)" name = "form name" Method, = "POST | GET" > ... </ form >
(3) common properties
The name attribute form name
Method attribute data transfer mode, sub-mode post and get
get way: When you get submission, content will form appended to the URL address, it limits the length of content submitted no more than 8192 characters, and do not have privacy
post way: during post submission, the form data included in the form together with the body, into the processing server transmitted with no data size limit
URL address of the handler's action attribute of the form data
If empty then the current URL address of the document, if the form does not require action attribute must specify its properties to "no"
Enctype attribute encoding form data set
target property and hyperlinks similar properties, it is used to specify target window
2. The text fields and password - <input> tag
(1) <input> tag has no end tag, is a single marker
(2) The basic syntax
<input type="" name="" value="" size="" maxlength="">
(3) Properties Introduction
type properties
type attribute has two values: text and password
When the type = "text", <input> represents a text input field
When the type = "password", <input> denotes a password input field
Name The name attribute defines control
value attribute initialization value, open the browser, the contents of the text box
Size property of the control length
3. Submit, reset push button
(1) submit button
When the <input type = "submit">, for the submit button
(2) the reset button
When <input type = "reset">, the reset button
(3) push button
When <input type = "button">, as the push button
4. and check boxes
(1) check box
When <input type = "radio">, single box
(2) check box
When <input type = "checkbox">, the check box
(3) Note
Radio buttons and check boxes can be used "checked" attribute to set the default selected item
5. Hidden Field
When <input type = "hidden">, hidden form fields
6. Multi-line text fields
(1) Action: Using <textarea> tag can implement one, multiple lines of text can be input region
(2) syntax
<textarea name="name" rows="value" cols="value" value="value">... ...</textarea>
Number of rows and columns (3) rows and cols attribute properties are used to specify the display unit is the number of characters
7. dropdown menu domain - <select> tag
(1) syntax
<select name="" size="value" multiple> <option value="value" selected>选项1</option> <option value="value">选项2</option> <option value="value">选项3</option> ... ... </select>
(2) Properties
name attribute specifies the name of the drop-down list
size attribute specifies the number of drop-down list of options
multiple attribute specifies to select multiple options
(3) option mark
<Option> tag to specify a list of options, you need to be placed between the <select> </ select>
property value assigned to the options, specify the value transmitted to the server
selected attribute specifies the default option
8 illustrates
For example MEMBER fill in registration login information
Registration code demo.html:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>会员注册</title> 5 </head> 6 <body> 7 <center> 8 <form name="注册" method="get" target="_self" action="demo2.html"> 9 设置账号：<input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 设置密码：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 确认密码：<input name="mima" type="password"> 16 <br/> 17 <br/> 18 <input type="submit" value="提交"> 19 20 <input type="reset" value="重置"> 21 <br/> 22 <br/> 23 </form> 24 </center> 25 </body> 26 </html>
Log Code demo2.html:
. 1 < HTML > 2 < head > . 3 < Meta charset = "UTF-. 8" > . 4 < title > Login </ title > . 5 </ head > . 6 < body > . 7 < Center > . 8 < form name = "login" Method, = "GET" target = "_ Self" Action = "demo1.html" > 9 Please enter your login: <input name="zhanghao" type="text" value="" maxlength="10"> 10 <br/> 11 <br/> 12 请输入你的密码：<input name="mima" type="password"> 13 <br/> 14 <br/> 15 <input type="submit" value="提交"> 16 17 <input type="reset" value="重置"> 18 <br/> 19 <br/> 20 </form> 21 </center> 22 </body> 23 </html>
Fill in the information demo1.html:
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>个人信息登记</title> 5 </head> 6 <body> 7 <form action="demo.html" target="_self" name="信息登记" method="get"> 8 <center> the INPUT<10 Name: 9 name="name" type="text" size="4"> 11 <br/> 12 <br/> 13 性别： 14 <input type="radio" name="sex" checked>男 15 <input type="radio" name="sex">女 16 <br/> 17 <br/> 18 年龄： 19 <select> 20 <option>1-10</option> 21 <option>11-20</option> 22 <option>21-30</option> 23 <option>31-40</option> 24 <option>41-50</option> 25 <option>51-60</option> 26 <option>61-70</option> 27 <option>71-80</option> 28 </select> 29 <br/> 30 <br/> 31 爱好： 32 <input type="checkbox" name="running">跑步 33 <input type="checkbox" name="swimming">游泳 34 <input type="checkbox" name="learning">学习 35 <input type="checkbox" name="basketball">篮球 36 <br/> 37 <br/> 38 个人说明： 39 <textarea name="personal description" rows="10" cols="50"></textarea> 40 <br/> 41 <br/> 42 <input type="submit" value="Submit " 43> 44 <input type="reset" value="重置"> 45 46 <input type="button" value="按钮"> 47 </center> 48 </form> 49 </body> 50 </html>
Show results:
