4.12文件选择框

<form action="#">     选择你的头像：<input type="file"accept="image/png"> </form>

accept属性：指定要选择的文件类型，指定类型的方式有：

选择你的头像：<input type="file" accept="image/*"> 选择你的头像：<input type="file" accept="image/png"> 简历：<input type="file" accept="application/pdf"> 简历：<input type="file" accept=".doc">

上传文件需指定对应表单的属性

<formenctype="multipart/form-data">

4.13下拉列表

使用下拉列表的好处：

（1）      节省页面空间，使得页面更加简洁

（2）      方便输入

（3）      规范输入

<form action="#" target="_blank"> 你来自：     <select name="province">        <option value="33">浙江</option>        <option value="41">河南</option>        <option value="32">江苏</option>        <option value="36">江西</option>        <option value="13">河北</option>     </select>     <input type="submit"> </form>

<select>标签定义了一个下拉列表

<option>标签定义下拉列表的一个选项

<select>标签的name属性定义了提交的参数名

<option>标签的内容定义了该选项显示的文本，value属性定义了选中该选项时传递的参数值

多选可通过设置multiple属性来实现，Ctrl+单击，选择多个

<select name="color" multiple>     <option value="red">红</option>     <option value="black">黑</option>     <option value="white">白</option>     <option value="blue">蓝</option>     <option value="yellow">黄</option> </select> <input type="submit">

 

传递的参数为：

<select>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条。

代码格式化快捷键：ctrl+alt+L

<select name="province" size="1">     <optgroup label="国产车">         <option value="红旗">红旗</option>         <option value="比亚迪">比亚迪</option>         <option value="奇瑞">奇瑞</option>     </optgroup>     <optgroup label="德国车">         <option value="奔驰">奔驰</option>         <option value="宝马">宝马</option>         <option value="大众">大众</option>     </optgroup>     <optgroup label="日本车" disabled>         <option value="丰田">丰田</option>         <option value="本田">本田</option>         <option value="三菱">三菱</option>     </optgroup> </select>

<optgroup>的label属性定义分组显示文字，disabled设置该分组不能用

4.14textarea

textarea标签主要是为了方便用户输入大量文字信息，rows属性指定文本框的行，cols属性指定文本框的列数

<form action="">     学习经历：     <textarea rows="4" cols="30"></textarea> </form>

4.15fieldset （E1-04-08）

<fieldset>标签：当信息比较多且杂乱的时候，可以用此标签进行分组整理，达到界面整洁、美观的目的，<fieldset>标签只提供信息分组的方式，并且为每一组都提供一个边框和legend属性：为美一个分组给个标题。

<fieldset>     <legend>个人基本信息</legend>     姓名：<input type="text"name="name">     <br>     性别：     <br>     年龄： </fieldset>

4.16隐藏域（E1-04-09）

<input type="hidden" name="stuno"value="20140200923" >

hidden属性：当需要向服务器传递参数，且该参数无须用户输入，甚至都不想让用户看见可以使用隐藏域来实现。

4.17表单总结

查看http头部

按F12

头部有四部分：

 

1）

2）ResponseHeaders

3）Request Headers

4）Form Data

5.  table

5.1表格

表格标题<caption>

<caption>华鑫信息科技有限公司</caption>

 

表格表头<thead>

<thead> <tr>     <th>姓名</th>     <th>性别</th>     <th>出生年月</th>     <th>职务</th>     <th>电话</th>     <th>部门</th> </tr> </thead>

<tbody>定义表格主体部分

<tfoot>定义表尾

<tr>标签定义一行

<th><td>定义一个数据项（单元格），<th>一般用于表头，有加粗样式，<td>一般用于表格主题部分，没有加粗样式

<td>的rowspan和colspan分别定义单元格跨行的行数和跨列的列数。

总结

在今天的学习中，我们系统的学习了表单的所有内容，完善了对表单的学习，其中比较重要的就是下拉列表，也是今后我们在写代码、做网页中经常用到的，<select>标签有很多属性，我们要熟悉每个属性，将最基本的属性了解清楚。还有就是<table>标签，也就是表格，在网上，大部分人都会用table来排版表格，但是，table尽量只要用来做表格，工整完善。table也会是我们今后常用的一个标签，他的属性是目前我们学习的最多的属性，属性之间也有所关联，我们要在实践中锻炼，熟练使用。