1 课程目标 2 3 掌握HTML的常用标签的使用 4 掌握表格、表单的使用 5 能够创建自己的个人主页 6 7 了解提交表单的方法 8 掌握常用表单字段的使用（重点） 9 ------------------------------------------------- 10 表单概述 11 12 表单用来收集用户信息并提交给服务器。 13 服务器需要一门动态语言来获取这些信息并进行处理，常用的服务器端语言有asp/asp.net/php/jsp等。 14 15 <form method="get" action="form.htm"> 16 <input type="text" name="id" value="" /> 17 <input type="submit" value="提交" /> 18 </form> 19 ------------------------------------------------- 20 提交表单的方法 21 22 示例：GET方法提交表单 23 <form method="get" action="form.htm"> 24 25 GET方法的HTTP请求消息头： ******************** 26 GET /DEMO/form/form.htm?id=dd&password=123456 HTTP/1.1 27 Accept: */* 28 Referer: http://localhost:4346/DEMO/form/form.htm 29 Accept-Language: zh-cn 30 31 32 示例：POST方式提交表单 33 34 POST方法的HTTP请求消息头： ********************** 35 POST /DEMO/form/form.htm HTTP/1.1 36 Accept: */* 37 Referer: http://localhost:4346/DEMO/form/form.htm 38 Accept-Language: zh-cn 39 Content-Type: application/x-www-form-urlencoded 40 Accept-Encoding: gzip, deflate 41 User-Agent: Mozilla/4.0 (compatible; MSIE 7.0) 42 Host: localhost:4346 43 Content-Length: 21 44 45 id=dd&password=123456 46 47 action属性 48 提交表单时转到的URL地址。 49 50 method 属性 ********************** 51 GET方式 52 收集用户少量信息。 53 URL的长度限制为4KB 54 POST方式 55 收集用户大量信息（可能包含用户上传的文件）。 56 用户提交的信息保存在HTTP请求消息的正文。 57 提交后不能使用刷新按钮。 58 59 ------------------------------------------------- 60 常用表单字段 61 62 文本输入框（input） 63 type 属性 64 --type=“text”表示文本输入框 65 value 属性 66 --文本框的值 67 name属性 68 --必须的，提交表单时此文本框的值value存储在name变量中。 69 70 <input type="text" name=“input1" value="你好" /> 71 72 maxlength 属性 73 --文本框允许输入的最多的字符数 74 tabindex 属性 ********************** 75 --用户点击tab按键时焦点的切换顺序（从1开始） 76 77 disabled属性 78 --不可用 79 readonly属性 80 --只读 81 82 Disabled和readonly的区别？ 83 disabled的文本框显示为灰色 84 tabindex对disabled的文本框不起作用 85 disabled的文本框的值不会发送到服务器 86 87 密码输入框（input） 88 --用于输入密码，输入的密码以星号显示。 89 90 如果表单的 method=’get’，则点击提交按钮时，URL地址变成： 91 http://localhost:4346/DEMO/form/password.htm?password1=123456 92 所以，一般用户登陆的表单需要用POST提交方式。 93 94 ------------------------------------------------- 95 96 多行文本输入框（textarea） ***************** 97 用于输入多行文本，如果输入内容过长，则会自动显示滚动条。 98 99 注：实现自动换行的功能：写一个css,如下 100 <style> ***************** 101 .test{ 102 5em; 103 border:1px solid #000000; 104 word-wrap:break-word; 105 } 106 </style> 107 <textarea class="test"></textarea> ***************** 108 ------------------------------------------------- 109 列表框（select） 110 下拉列表，用户可以从一些可选项中选择。 111 示例：简单的下拉列表 112 <select name="country"> 113 <option value="America">美国</option> 114 <option value="China" selected="selected">中国</option> 115 <option value="India">印度</option> 116 <option value="Russia">俄罗斯</option> 117 </select> 118 119 <optgroup>标签 ***************** 120 用来对选项进行分组（分组标签是不可选择的） 121 122 <select name="country2"> ***************** 123 <optgroup label="北美洲"> 124 <option value="America">美国</option> 125 </optgroup> 126 <optgroup label="亚洲"> 127 <option value="China" selected="selected">中国</option> 128 <option value="India">印度</option> 129 <option value="Russia">俄罗斯</option> 130 </optgroup> 131 </select> ***************** 132 133 列表框（以平铺的形式显示） ***************** 134 设置<select>标签的属性 size 的值大于 1 即可 135 size表示显示多少行 136 137 示例：列表框与多选列表框？ ***************** 138 <select name="country4" size="5"> 139 <option value="America">美国</option> 140 <option value="China" selected="selected">中国</option> 141 <option value="India">印度</option> 142 <option value="Russia">俄罗斯</option> 143 </select> 144 145 列表框（可以多选） ***************** 146 设置<select>标签的属性 multiple="multiple“ 147 用户可以通过Ctrl或Shift选择多个选项。 148 149 ------------------------------------------------- 150 单选按钮（input） 151 单选按钮的行为类似上面介绍的下拉列表，用户可以从几个选项中选择一个。 152 153 示例：单选按钮分组？ 154 蓝色<input type="radio" value="blue" name="color" /> 155 红色<input type="radio" value="red" checked="checked" name="color" /> 156 白色<input type="radio" value="white" name="color" /> 157 158 特别注意：name 用于指定哪些单选框是一组的， 159 同组的单选框只能选中一个。 160 161 ------------------------------------------------- 162 多选框（input） 163 多选框和单选按钮，以及可以多选的列表框类似。 164 165 示例：多选框分组？ 166 167 蓝色<input type="checkbox" value="blue" name="color" /> 168 红色<input type="checkbox" value="red" checked="checked" name="color" /> 169 白色<input type="checkbox" value="white" name="color" /> 170 171 ------------------------------------------------- 172 按钮（input） 173 提交按钮（type=”submit”） 174 点击提交按钮所在的表单 175 用户在单行文本框或密码框中，按enter时提交表单（相当点击提交按钮）。 176 177 重置按钮（type=”reset”） 178 将表单字段的值重置为页面第一次加载时的值。 179 180 一般按钮（type=”button”） 181 没有默认行为。 182 怎样使用一般按钮提交表单？（使用Javascript） 183 184 ------------------------------------------------- 185 图片按钮（input） 186 类似提交按钮，但是使用一个图片而不是浏览器默认的按钮。 187 188 示例：图片按钮向服务器提交的数据？ 189 190 <input type="image" src="../images/rose.bmp" alt="Rose" /> 191 点击图片按钮会回发表单，HTTP请求消息为： 192 GET /form/imgbutton.htm?password=123456&x=5&y=93 HTTP/1.1 193 Accept: */* 194 Referer: http://localhost:4346/DEMO/form/imgbutton.htm 195 Accept-Language: zh-cn 196 197 ------------------------------------------------- 198 注意， ****************** 199 在发送到服务器的数据中，除了文本框的值，还有： 200 x=5&y=93 201 这个是点击按钮时，光标落在图片的坐标。 202 203 204 ------------------------------------------------- 205 隐藏输入框（input） 206 用户不可见，但是隐藏输入框的值可以随着表单一起提交。 207 <input type="hidden" name="password" value="123456" /> 208 209 210 常见的使用场合 211 多页面收集用户信息。 212 213 服务器需要三个页面收集用户数据。 214 用户提交第一个页面，服务器把数据以隐藏字段的方式保存在第二个页面中。 215 当用户提交第二个页面时，服务器把数据保存在第三个页面。 216 用户提交第三个页面，完成。 217 218 ------------------------------------------------- 219 标签（label） ******************** 220 有些HTML标签尺寸很小，比如单选框和多选框。希望点击单选框旁边的按钮和点击单选框的效果相同。 221 222 示例：<label>标签常见的使用场景？ 223 <label for="blue">蓝色</label> 224 <input type="radio" id="blue" value="blue" name="color" /> 225 226 注意：label标签中的for值和输入框中的id值须一致 227 228 ------------------------------------------------- 229 id和name有什么区别呢？ ******************** 230 id 在整个页面是唯一的，没有任何两个HTML标签的id是一样的。 231 name 用在向服务器发送数据时，保存HTML标签的值。 232 可以有相同的name的HTML标签存在（比如相同name的radio是同一分组的）。 233 234 ------------------------------------------------- 235 分组框（fieldset） ******************** 236 分组框<fieldset>标签。 237 <legend>标签来显示分组框标题。 238 239 <fieldset style="200px;"> 240 <legend>选择颜色</legend> 241 <ul> 242 <li>蓝色<input type="radio" value="blue" name="color" /></li> 243 <li>红色<input type="radio" value="red" checked="checked" name="color" /></li> 244 <li>白色<input type="radio" value="white" name="color" /></li> 245 </ul> 246 </fieldset> 247 248 ------------------------------------------------- 249 框架 250 251 为什么使用frameset 252 <frameset> 允许我们把很多页面组合成一个页面 253 254 常见的应用场景 255 一个frame中放置页面导航，另一个frame中放置页面内容， 256 当点击页面导航时，只刷新页面内容。（部分刷新） 257 ------------------------------------------------- 258 垂直分栏框架 259 <frameset>的 cols 属性，定义垂直分栏的各列的宽度： 260 261 示例：一个三列的框架，其中第一列占据150px的宽度，第二列占据10%的宽度， 262 第三列占据剩余的宽度。 263 264 <frameset cols="150, 10%, *"> 265 <frame src="1.htm" /> 266 <frame src="2.htm" /> 267 <frame src="3.htm" /> 268 </frameset> 269 270 ------------------------------------------------- 271 水平分栏框架 272 273 274 示例： 275 <frameset rows="50, 10%, *"> 276 <frame src="1.htm" /> 277 <frame src="2.htm" /> 278 <frame src="3.htm" /> 279 </frameset> 280 281 ------------------------------------------------- 282 水平分栏框架 283 284 285 <frame>标签的属性 286 frameborder="0“ 287 用来设置不显示分隔条 288 noresize="noresize“ 289 则设置分隔条不可拖动 290 scrolling=”no” 291 不显示滚动条。 292 293 ------------------------------------------------- 294 混合框架 295 科大的bbs（http://bbs.ustc.edu.cn）使用框架 296 297 <frameset cols="151, 10, *" framespacing="0" frameborder="no“ border="0"> 298 <frameset rows="*, 25" framespacing="0" frameborder="no" border="0"> 299 <frame name="f2" src="cgi/bbsleft" noresize> 300 <frame scrolling="no" name="f2tty" src="tty.html" noresize> 301 </frameset> 302 <frame src="f5.html" name="f5" frameborder="no" scrolling="no" noresize> 303 <frameset rows="0, *, 20" framespacing="0" frameborder="no" border="0"> 304 <frame name="f3" src="cgi/bbsindex" noresize> 305 <frame scrolling="no" name="f4" src="cgi/bbsfoot" noresize> 306 </frameset> 307 </frameset> 308 309 ------------------------------------------------- 310 框架之间导航 311 框架中的链接可以在框架之间导航，通过设置<a> 标签的target属性。 312 313 <a>的target属性和<frame>的name属性相对应。