1.常见的表单控件:
单行文本框、密码框、文本域、单选按钮、复选框、下拉列表框、提交表单、上传文件。一个表单可能有多个表单控件,每种控件收集不同的信息。服务器需要知道用户输入的每一条数据输入了哪个表单元素。
2.表单结构:
<form>:使用<form>元素来创建表单,表单里的表单控件位于<form>元素中。每个<form>元素都应该设置action特性,通常还要设置method特性和id特性。
action:此特性是服务器上的一个页面的URL,这个页面用来在用户提交表单的时候接受表单的信息,指定数据将要发送到哪个页面。
method:表单的提交可以采用以下两种方法之一:get或post。get适用于短表单、不需要加密的文件上传。post适用于非常长、含有敏感信息、以及安全性;要求高的文件上传。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单结构</title> </head> <body> <form action="http://www.example.com/subscribe.php" method="get"> <p>This is where the form controls will appear.</p> </form> </body> </html>
3.单行文本行:<input>元素用来创建多种不同的表单控件,其type特性的值决定了它将要创建哪种控件。
type:当type特性的值为text时,<input>元素会创建一个单行文本框。
name:当用户向表单中输入信息时,服务器需要要知道每条数据被输入到了哪个表单控件。
size:用来指定文本框的宽度。
maxlength:可使用maxlength来限制用户在文本区域输入字符的数量,它的值为用户可以输入字符的最大数量。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文本框</title> </head> <body> <form action="http://www.example.com/login.php"> <p>Username: <input type="text" name="username" size="4" maxlength="4"/> </p> </form> </body> </html>
4.单选按钮:
type=" radio"时,单选按钮只能让用户从一系列选项中选择其中一个。
name:name特性与用户所选择的值一同发送到服务器。当一个问题以单选按钮的形式来给用户提供了一系列答案时,用户回答这个问题的所有单选按钮的name特性值都应该相同。
value:value特性为选项指定了被选中时要发送到服务器的值。
checked:checked特性用来指定当页面加载时(如果有的话)哪个值会被选中。这个特性的值为checked,同一组中的单选按钮只能有一个使用此特性。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单选按钮</title> <body> </head> <form action="http://www.example.com/profile.php"> <p>Please select your favirote genre: <br/> <input type="radio" name="genre" value="rock" checked="checked"/>Rock <input type="radio" name="genre" value="pop"/> Pop <input type="radio" name="genre" value="jazz"/>Jazz </p> </form> </body> </html>
5.复选框:
type="checkbox":复选框允许用户在回答一个问题时选择(和取消选择)一个或多个特性。
name:name特性与用户选择项的值一并发送到服务器。
value:value特性指定复选框在被选中时需要发送到服务器的值。
checked:checked特性表明这个复选框在页面加载时将被选中。如果使用checked特性,它的值应该是checked。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复选框</title> </head> <body> <form action="http://www.example.com/profile.php"> <p>Please select your favorite music service(s): <br/> <input type="checkbox" name="service" vlaue="itunes" checked="checked"/>iTunes <input type="checkbox" name="service" vlaue="lastfm"/>Last.fm <input type="checkbox" name="service" value="spotify"/>Spotify </p> </form> </body> </html
6.下拉列表框:
<select>:下拉列表框让用户在一个下拉列表中选择其中的一个选择。<select>元素用来创建下拉列表框,它包含两个或者两个以上的<option>元素。
name:name特性指定这个表单控件的名称,此名称与用户选择的选项值一并发送到服务器。
<option>元素用于指定用户可以选择的选项。在开始标签<option>和</option>之间的文字将显示在下拉列表中。
value:<option>元素使用value特性来指定选项的值。
selected:selected特性可以用来指定当页面加载时被选中的选项,selected特性的值应该是selected。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉列表框</title> </head> <body> <form action="http:www.example.com/profile.php"> <p>what device do you listen to music on?</p> <select namr="devices"> <option value="ipod">iPod</option> <option value="radio">Radio</option> <option value="computer">Computer</option> </select> </form> </body> </html>
7.文本域:
<textarea>元素用来创建多行文本框,与其他的input元素不同,<textarea>元素并非空元素,因此它包含起始标签和结束标签。
cols:此特性指定文本域有多宽(以字符的数量来衡量)
rows:指定文本域在纵向上占据的行数。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本域(多行文本框)</title> </head> <body> <form action="http://www.example.com/comments.php"> <p>What did you think of this gig?</p> <textarea name="comments" cols="20" rows="4">Enter your comments...</textarea> </form> </body> </html>
8.密码框:
<input>
type="password”:当type特性的值为password时,<input>元素会创建一个用起来和单行文本框非常类似的文本框,唯一的不同之处在于其中的字符被掩盖了。
name:name特性表明密码框的名称,它将与用户输入的密码一同发送到服务器。
size:用来指定文本框的宽度。
maxlength:可使用maxlength来限制用户在文本区域输入字符的数量,它的值为用户可以输入字符的最大数量。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>密码框</title> </head> <body> <form action="http://www.example.com/login.php"> <p>Username: <input type="text" name="username" size="13" maxlength="30"/> </p> <p>Password: <input type="password" name="password" size="15" maxlength="30"/> </p> </form> </body> </html>
9.文本上传域:
<input>
type="file":这个类型的input会创建一个后面附有browse按钮的类似文本框的控件。如果允许用户上传文件,必须将<form>元素上的method特性设为post。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上传域</title> </head> <body> <form zction="http://www.example.com/upload.php" mothod="post"> <p>Upload your song in MP3 format:</p> <input type="file" name="user-song"/><br/> <input type="submit" value="Upload"/> </form> </body> </html>
10.提交按钮
<input>
type="submit":提交按钮用来将表单发送到服务器。
name:可以使用name特性但不是必需的。
value:value特性用于控制在按钮上显示的文本。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>提交按钮</title> </head> <body> <form action="http://www.example.com/subscrible.php"> <p> Subscribe to our email list: </p> <input type="text" name="email"/> <input type="submit" name="subscribe" value="Subscribe"/> </form> </body> </html>