HTML Form表单元素全面了解

如下所示：

1. !DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
2.   
3. html xmlns="http://www.w3.org/1999/xhtml">   
4. head>   
5.     title> 注册表单/title>   
6. /head>   
7. body>   
8.     form action="DoFormAction.htm">   
9.         fieldset style="width=800px">                                                               !--套住注册表格的边框-->   
10.         legend> 请输入如下的信息然后进行注册/legend>   
11.         table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">   
12.             tr>   
13.                 td align="right"> 用户名:/td>                                    !--文本框-->   
14.                 td> input type="text" size="20" style="width:150px" /> /td>   
15.             /tr>   
16.             tr>   
17.                 td align="right"> 密码:/td>                                      !--密码框-->   
18.                 td> input type="password" size="20" style="width:150px" /> /td>   
19.             /tr>   
20.             tr>   
21.                 td align="right"> 确认密码:/td>   
22.                 td> input type="password" size="20" style="width:150px" /> /td>   
23.             /tr>   
24.             tr>   
25.                 td align="right"> 性别:/td>                                       !--单选框-->   
26.                 td>   
27.                     input type="radio" checked="checked" name="sex1" value="男" /> 男    
28.                     input type="radio" name="sex1" value="女" /> 女   
29.                 /td>   
30.             /tr>   
31.             tr>   
32.                 td align="right"> 性别(可以点文字选择):/td>   
33.                 td>   
34.                     fieldset style="width:150px">                               !--表单外框，也可以通过css设置宽度-->   
35.                     legend> 请选择性别/legend>   
36.                         input type="radio" checked="checked" name="sex2" value="男" id="man" />   
37.                         label for="man"> 男/label>   
38.                         input type="radio" name="sex2" value="女" id="woman" />   
39.                         label for="woman"> 女/label>   
40.                     /fieldset>   
41.                 /td>   
42.             /tr>   
43.             tr>   
44.                 td align="right"> 城市:/td>                                     !--下拉框-->   
45.                 td>   
46.                     select name="city">   
47.                         option value="北京"> 北京/option>   
48.                         option value="深圳"> 深圳/option>   
49.                         option value="上海"> 上海/option>   
50.                         option value="南昌" selected="selected"> 南昌/option>   !--默认选择南昌-->   
51.                     /select>   
52.                 /td>   
53.             /tr>   
54.             tr>   
55.                 td align="right"> 城市所在区域:/td>   
56.                 td>   
57.                     select name="area">             
58.                         optgroup label="北京">                                 !--下拉框分组显示-->   
59.                             option value="朝阳区"> 朝阳区/option>   
60.                             option value="海淀区"> 海淀区/option>   
61.                             option value="其他区"> 其他区/option>   
62.                         /optgroup>   
63.                         optgroup label="南昌">   
64.                             option value="东湖区"> 东湖区/option>   
65.                             option value="西湖区"> 西湖区/option>   
66.                             option value="青山湖区"> 青山湖区/option>                                
67.                         /optgroup>   
68.                     /select>   
69.                 /td>   
70.             /tr>   
71.             tr>   
72.                 td align="right"> 交友目标:/td>   
73.                 td>   
74.                     select name="target" size="3" multiple="multiple">         !--列表框-->          
75.                         option value="同行" selected="selected"> 同行/option>   
76.                         option value="普通朋友"> 普通朋友/option>   
77.                         option value="爱人"> 爱人/option>   
78.                     /select>   
79.                 /td>   
80.             /tr>   
81.             tr>   
82.                 td align="right"> 爱好:/td>   
83.                 td>   
84.                                                                             !--复选框,注意name属性设置一样，分组-->       
85.                     input type="checkbox" name="love" value="足球" /> 足球   
86.                     input type="checkbox" name="love" value="蓝球" /> 蓝球   
87.                     input type="checkbox" name="love" value="乒乓球" /> 乒乓球   
88.                 /td>   
89.             /tr>   
90.             tr>   
91.                 td align="right"> 照片上传:/td>   
92.                 td>   
93.                                                                             !--文件选择框-->       
94.                     input type="file" name="myPic" />   
95.                 /td>   
96.             /tr>   
97.             tr>   
98.                 td align="right"> 自我介绍:/td>   
99.                 td>   
100.                                                                             !--多行文本框-->       
101.                     textarea rows="5" cols="50">   
102.                     /textarea>   
103.                 /td>   
104.             /tr>   
105.             tr>   
106.                 td align="center" colspan="2">   
107.                     input type="submit" value="确定" />   
108.                     input type="reset" value="清空" />                        
109.                     input type="image" src="../images/BTnreg.png" onclick="alert('hello')" />       !--演示图片按钮(会提交数据，类似submit)  
110.                                                                                                     -->   
111.                 /td>   
112.             /tr>   
113.         /table>   
114.         /fieldset>   
115.     /form>   
116. /body>   
117. /html>   

以上就是小编为大家带来的HTML Form表单元素全面了解的全部内容了，希望对大家有所帮助，多多支持~

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！