HTML学习笔记20——表单form (用户注册表)

表单：用户注册，在线报名……时，需要把用户的相关信息填写并提交，这时就需使用到表单来收集用户信息。

基本格式：

【action 用于控制提交的地方(默认为自己的页面，也可在其值定义其他的网站名)，method(默认是将信息的内容直接显示在提交的页面网址上)当设置method=”post“时就不会将信息内容全部显示到提交的页面网址上】action控制往哪里发，method控制发送方式；

　　　　……

</form>

细项讲解：信息1&2……的基本格式有以下几种：【注：value的值是给后台的数据，name的值是用于给后台数据提供辨识名称】

　　1.提示名：<input type="text" name="xxx"/>　　　　　　　　　　　　//一般提示名为“用户名”时，用这种方式。

　　2.提示名：<input type="password" name="xxx"/>　　　　　　　　//一般提示名为“密码”时，用这种方式。

　　3.提示名：<input type="radio" name="xxx" value="xxxx"/>　　　　//一般提示名的类型为“单选”时，用这种方式。

　　4.提示名：<input type="checkbox" name="xxx" value="xxxx"/>　　 //一般提示名的类型为“多选”时，用这种方式。

　　5.提示名：<input type="file" name="xxx"/>　　　　　　　　　　　　　//一般提示名的类型为“文件域”时（如上传头像的功能），用这种方式。

　　6.提示名：<select name="xxx" >　　 //一般提示名的类型为“下拉框”时，用这种方式。

　　　　　　　</select>

　　7.提示名：<textarea name="xxx">　　 //一般提示名的类型为“较大的文本编辑区域”时，用这种方式。

　　　　　　　　　内容

　　　　　　　</textarea>

　　8.<input type="submit" value="提交"/>　　　　　　　　　　　　　　　　//“提交”时，用这种方式。　　　　　　

　　type="hidden"时为隐藏；

表单的默认值：用户名的直接value=”xx“;

　　　　　　　　　需要选择(单选或多选)的表单，就写checked=”checked“；

　　　　　　　　　下拉框，需写selected=”selected“；

　　　　　　　　　textarea直接添加内容即可；

　　　　　　　　　文本域(如头像)是没有默认值的，为安全考虑；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用户注册表</title>
 6 </head>
 7 <body>
 8     <form>
 9         <p>
10             用户名:<input type="text" name="name"/>
11         </p>
12         <p>
13             密码:<input type="password" name="password"/>
14         </p>
15         <p>
16             性别：男：<input type="radio" name="gender" value="男"/>
17                   女：<input type="radio" name="gender" value="女" checked="checked"/>
18         </p>
19         <p>
20             学历:<select name="学历">
21                 <option value="大学">大学</option>
22                 <option value="硕士">硕士</option>
23                 <option value="博士" selected="selected">博士</option>
24             </select>
25         </p>
26         <p>
27             头像:<input type="file" name="picture"/>
28         </p>
29         <p>
30             爱好：跑步：<input type="checkbox" name="hobby" value="跑步"/>
31                   篮球：<input type="checkbox" name="hobby" value="篮球"/>
32                   足球：<input type="checkbox" name="hobby" value="足球"/>
33                   台球：<input type="checkbox" name="hobby" value="台球"/>
34         </p>
35         <p>
36             个人简介：<br/>
37             <textarea name=“个人简介”> 个人简介需包含个人的性格，兴趣，特长等让大家更全面的认识你~ </textarea>
38         </p>
39         <p>
40             <input type="submit" value="提交"/>
41         </p>
42     </form>
43 
44 </body>
45 </html>

View Code

效果图：