HTML表单框架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>HTML表单框架</title>
6 </head>
7 <!--
8 表单：表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。（用于将信息提交给服务器）
9 <form>...</form>标记：
10 作用：用于创建一个表单,定义表单的开始和结束，他是一个容器，用于包含其他表单元素，比如文本框，单选框等。表单元素必须在form标记内才有效
11 属性：
12 action=url(传送的目标，处理表单信息的服务器端应用程序)
13 method=处理表单数据的方法（POST/GET(默认)） 注：POST方法可以传递大量的数据
14 GET方法将值附加到请求该页的URL中，适合传递少量的数据
15 name=表单名称
16
17 所有表单元素都要放置在form标签中。
18 所有的表单元素，以input为例，必须包含type属性和name属性
19 -->
20 <body>
21 <form action="8-新闻网页案例.html" method="post" name="">
22 <table border="1" width="300" align="center" cellpadding="5">
23 <tr>
24 <td>用户名：</td>
25 <td><input type="text"/ name="username"></td>
26 </tr>
27 <tr>
28 <td colspan="2"><input name="提交" type="submit" value="提交"/></td>
29
30 </tr>
31 </table>
32 </form>
33
34
35
36 <hr/>
37 <h2>登录界面</h2>
38 <form action="14-框架案列-top.html" method="post">
39 用户名：<input type="text" name="username"/><br/>
40 密 码：<input type="password" name=""pwd/><br />
41 <input type="submit" value="登录"/>
42 <input type="reset" value="重置"/>
43 </form>
44 </body>
45 </html>
表单详解：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>HTML表单详解</title>
6 </head>
7
8 <body>
9 <form action="8-新闻网页案例.html" method="post" name="会员注册">
10 <!--
11 表单外框：
12 <fieldset>...</filedset>:定义围绕在表单中元素的边框
13 <legend>...</legend>:为filedset标签定义标题
14 -->
15 <fieldset>
16 <legend>会员注册</legend>
17 <table border="0" width="550" align="center" cellpadding="5">
18
19
20 <!--
21 单行文本框：<input type="text" name=文本框名称 value=默认初始值 size=显示字符数 maxlength=最多容纳字符数 readonly="readonly"(设置为只读 ,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。) disabled="disabled"(设置为不可操作)/>
22 -->
23 <tr>
24 <td>用户名：</td>
25 <td><input type="text" name="username" maxlength="5" size="5"/><font color="#00FFFF" size="2">请输入中文名称</font></td>
26 </tr>
27
28
29
30
31
32
33
34 <!--
35 密码框：<input type="password" name=文本框名称" 称 value=默认初始值 size=显示字符数 字符数 maxlength=最多容纳字符数 ,readonly="readonly"(设置为 只读,用于当注册完之后，如果用户想修改个人的一些信息，但有些是不可以修改的，就设置为只读。)/>
36 -->
37 <tr>
38 <td>密码：</td>
39 <td><input type="password" name="password1" maxlength="16"/><font color="#00FFFF" size="2">请输入英文或数字，最多只能输入16位</font> </td>
40 </tr>
41 <tr>
42 <td>确认密码：</td>
43 <td><input type="password" name="password2" maxlength="16" /></td>
44 </tr>
45
46
47
48 <!--
49
50 -->
51 <tr>
52 <td>年龄：</td>
53 <td><input type="text" name="age" /></td>
54 </tr>
55
56
57
58
59
60
61 <!--
62 单选框：<input type="radio" name="单选框名称" value="提交值" checked="checked"(是否被选中，默认选中)/>
63
64 <lable>标注内容</lable>:为input标签定义标注：
65 属性：for（与关联的相关元素的id相同）
66 如：<lable for="man">男</label>
67 <input type="radio" name="sex" value="男" id="man"/>
68 -->
69 <tr>
70 <td>性别：</td>
71 <td>
72 <fieldset>
73 <legend>请选择性别</legend>
74 <input type="radio" name="sex" value="男" checked="checked"/>男
75 <input type="radio" name="sex" value="女" />女
76 </fieldset>
77 </td>
78 </tr>
79 <tr>
80 <td>性别：</td>
81 <td>
82 <label for="man">男</label>
83 <input type="radio" name="sex" value="男" checked="checked" id="man"/>
84 <label for="women">女</label>
85 <input type="radio" name="sex" value="女" id="women" />
86 </td>
87 </tr>
88
89
90
91
92
93 <!--
94 下拉列表：<select name="列表框名称">
95 <option selected="selected"添加到哪个(哪个为初始选择，就添加selected属性) value="提交值(一定要写这个值)">列表1 </option>
96 <option value="提交值">列表2 </option>
97 </select>
98 -->
99 <tr>
100 <td>所在城市：</td>
101 <td>
102 <select name="citys">
103 <option value="北京">北京 </option>
104 <option value="上海">上海 </option>
105 <option value="杭州">杭州 </option>
106 <option value="广州">广州 </option>
107 <option value="深圳">深圳 </option>
108 <option value="河源" selected="selected">河源</option>
109 </select>
110 </td>
111 </tr>
112 <!--
113 分组 <optgroup label="分组名称"></optgroup>
114 -->
115 <tr>
116 <td>城市中的地区：</td>
117 <td>
118 <select name="citys">
119 <optgroup label="广州"></optgroup>
120 <option value="海珠区">海珠区 </option>
121 <option value="天河区">天河区 </option>
122 <option value="萝岗区">萝岗区 </option>
123 <option value="花都区">花都区</option>
124 <option value="番禺区">番禺区 </option>
125 <option value="越秀区" selected="selected">越秀区</option>
126 <optgroup label="河源"></optgroup>
127 <option value="紫金县">紫金县 </option>
128 <option value="和平县">和平县 </option>
129 <option value="连平县">连平县 </option>
130 <option value="东源县">东源县</option>
131 <option value="龙川县">龙川县 </option>
132
133 </select>
134 </td>
135 </tr>
136
137
138 <!--
139 列表标记的另一种用法：
140 <select name="列表框名称" size="显示的行数" multiple(如果允许多选，则有该属性，否则没有改属性)>
141 <option value="提交值">列表1 </option>
142 .....
143 </select>
144 -->
145 <tr>
146 <td>交友目的：</td>
147 <td>
148 <select name="target" size="4" multiple="multiple">
149 <option value="普通朋友">普通朋友 </option>
150 <option value="爱人">爱人 </option>
151 <option value="同行">同行 </option>
152 <option value="爱好">爱好 </option>
153
154 </select>
155 </td>
156 </tr>
157
158
159
160
161
162
163 <!--
164 多选框：<input type="checkbox" name="复选框名称" value="提交值" "checkbox=""checkbox"(是否被选中)/>篮球
165 -->
166 <tr>
167 <td>爱好：</td>
168 <td>
169 <input type="checkbox" name="love" value="篮球" checked="checked"/>篮球
170 <input type="checkbox" name="love" value="音乐"/>音乐
171 <input type="checkbox" name="love" value="美术"/>美术
172 <input type="checkbox" name="love" value="睡觉"/>睡觉
173 </td>
174 </tr>
175
176
177
178 <!--
179 浏览框：<input type="file" name="名称" size="显示框的长度"/>
180 -->
181 <tr>
182 <td>照片上传：</td>
183 <td><input type="file" name="mypic" size="20"/></td>
184 </tr>
185
186
187
188 <!--
189 多行文本框：
190 <textarea name="多行文本框名称" cols="每行中的字符数" rows="显示的行数">
191 初始内容（可以不写）
192 </textarea>
193 -->
194 <tr>
195 <td colspan="2">
196 <fieldset>
197 <legend>自我评价</legend>
198 <textarea name="" cols="65" rows="5">
199 初始内容（可以不写）
200 </textarea>
201 </fieldset>
202 </td>
203 </tr>
204
205
206 <!--
207 隐藏域：（用于传递一些信息，比如用户的ip地址等，在网页中是不显示的,只要写在from标签内就可以）
208 <input name="名称" type="hidden" value="提交值"/>
209 -->
210
211
212
213
214
215
216 <tr>
217 <td colspan="2">
218 <!--
219 按钮：（属性：name="按钮名称" value="按钮显示文本"）
220 提交：submit
221 重置：reset
222 普通按钮：button
223 -->
224 <input type="submit" value="提交" />
225 <input type="reset" value="取消"/>
226 <input type="button" value="欢迎" onclick="alter(‘你好‘);"/>
227
228
229 <!--
230 图片按钮：<input type="image" name="图片按钮名称" src="图片路径"/>
231 -->
232 <input type="image" name="image" src="../../imgs/Default_36.gif"/>
233 </td>
234
235 </tr>
236 </table>
237 </fieldset>
238 </form>
239 </body>
240 </html>
HTML表单外框标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>HTML表单外框标签</title>
6 </head>
7
8 <body>
9 <!--
10 最外层加一个一行一列的表格是为了控制域的大小
11 -->
12 <table width="700" align="center">
13 <tr>
14 <td>
15 <form action="8-新闻网页案例.html" method="post" name="域名注册">
16 <fieldset>
17 <legend>域名注册</legend>
18
19 <table width="550" border="0" cellpadding="5" align="center">
20
21 <tr>
22 <td colspan="2"><b>请填写域名信息(请您务必填写真实，有效和完整的域名注册信息</b></td>
23 </tr>
24
25
26
27
28 <tr>
29 <td align="right">登录账号：</td>
30 <td align="left">
31 <input type="text" name="user" />
32 </td>
33 </tr>
34
35
36 <tr>
37 <td align="right">密码：</td>
38 <td align="left">
39 <input type="password" name="password" maxlength="16"/>
40 </td>
41 </tr>
42
43
44 <tr>
45 <td align="right">性别：</td>
46 <td align="left">
47 <input type="radio" name="sex" value="男" checked="checked" />男
48 <input type="radio" name="sex" value="女"/>女
49 </td>
50 </tr>
51
52
53 <tr>
54 <td align="right">注册网址：</td>
55 <td align="left">
56 <input type="text" name="url" value="www."/>
57 </td>
58 </tr>
59
60
61 <tr>
62 <td align="right">注册网址后缀：</td>
63 <td align="left">
64 <input type="checkbox" name="houzhui" value=".com" checked="checked"/>.com
65 <input type="checkbox" name="houzhui" value=".cn" />.cn
66 <input type="checkbox" name="houzhui" value=".net" />.net
67 <input type="checkbox" name="houzhui" value=".org" />.org
68 </td>
69 </tr>
70
71
72 <tr>
73 <td align="right">域名所有者(中文)：</td>
74 <td align="left">
75 <input type="text" name="author1"/>
76 </td>
77 </tr>
78
79
80 <tr>
81 <td align="right">域名所有者(英文)：</td>
82 <td align="left">
83 <input type="text" name="author2"/>
84 </td>
85
86 </tr>
87
88
89 <tr>
90 <td align="right">所属区域：</td>
91 <td align="left">
92 <select name="country">
93 <option value="中国" selected="selected">中国 </option>
94 <option value="蒙古">蒙古 </option>
95 <option value="朝鲜">朝鲜 </option>
96 <option value="韩国">韩国 </option>
97 <option value="日本">日本 </option>
98 <option value="西班牙">西班牙</option>
99 <option value="新西兰">新西兰</option>
100 <option value="德国">德国</option>
101 <option value="美国">美国</option>
102 <option value="法国">法国</option>
103 <option value="英国">英国</option>
104 </select>
105 <select name="citys">
106 <option value="省份" selected="selected">-省份-</option>
107 <optgroup label="中国"></optgroup>
108 <option value="北京">北京</option>
109 <option value="河南省">河南省 </option>
110 <option value="湖南省">湖南省 </option>
111 <option value="广东省">广东省</option>
112 <option value="江苏省">江苏省 </option>
113 <option value="四川省" >四川省</option>
114 <optgroup label="美国"></optgroup>
115 <option value="迈阿密">迈阿密 </option>
116 <option value="芝加哥">芝加哥 </option>
117 <option value="洛杉矶">洛杉矶 </option>
118 </select>
119 </td>
120 </tr>
121
122
123
124 <tr>
125 <td align="right">单位所在地：</td>
126 <td align="left">
127 <input type="text" name="danwei"/>
128 </td>
129 </tr>
130
131
132
133 <tr>
134 <td align="right">单位负责人：</td>
135 <td align="left">
136 <input type="text" name="fuzeren"/>
137 </td>
138 </tr>
139
140
141
142 <tr>
143 <td align="right">通信地址：</td>
144 <td align="left">
145 <input type="text" name="tongxindizhi"/>
146 </td>
147 </tr>
148
149
150
151 <tr>
152 <td align="right">联系电话：</td>
153 <td align="left">
154 <input type="text" name="phoneNumber" maxlength="11"/>
155 </td>
156 </tr>
157
158
159
160 <tr>
161 <td colspan="2" align="center">
162 <input type="submit" value="提交"/>
163 <input type="reset" value="重置"/>
164 </td>
165
166
167 </tr>
168 </table>
169 </fieldset>
170 </form>
171 </td>
172 </tr>
173 </table>
174 </body>
175 </html>
时间： 2024-10-08 12:20:49