HTML第三天学习笔记

文件选择按钮

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

文件选择按钮的accept属性指定可选择文件的类型。
而上传文件的时候需指定对应表单的属性

<form action="" enctype="multipart/form-data">

下拉列表

使用下拉列表标签< select>可以节省页面空间，使页面更加简洁也可以方便和规范输入。

<form action="result.html">
    你来自：
    <select name="province">
        <option value="33">浙江</option>
        <option value="41">河南</option>
        <option value="32">江苏</option>
        <option value="36">江西</option>
    </select>
    <input type="submit"/>
</form>

< select>标签定义了一个下拉列表
< option>标签定义下拉列表的一个选项
< select>标签的name属性定义了提交的参数名
< option>标签的内容定义了该选项的显示的文本，而value属性定义了选中该选项时传递的参数值。如果想多选可通过设置multiple属性来实现，ctrl+单击选择多个。
< select>标签size属性定义了下拉列表框显示的选项个数，当小于实际选项个数是，会自动增加一个滚动条。

<select name="car">
    <optgroup label="国产">
        <option value="红旗">红旗</option>
        <option value="比亚迪" selected>比亚迪</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设置该分组不能使用。

< textarea>标签

< textarea> 标签定义多行的文本输入控件。主要是为了方便用户输入较多文字信息。rows属性指定区域行数，cols属性指定区域列数，文本区中可容纳无限数量的文本。

<textarea name="text" rows="3" cols="217" style="resize: none;"></textarea>

< fieldset>标签

当信息较多时，可以考虑按照信息内容进行分组，达到表达清晰的目的
< fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。分组后每组信息默认有一个边框，同时可以使用< legend>标签指定每一个组的标题。

<fieldset>
<legend>个人基本信息</legend>
    姓名：<textarea name="text" rows="3" cols="217" style="resize: none;"></textarea>
</fieldset>
<fieldset>
    毕业学校：<textarea name="text" rows="3" cols="217" style="resize: none;"></textarea>
</fieldset>
<fieldset>
    工作单位：<textarea name="text" rows="3" cols="217" style="resize: none;"></textarea>
</fieldset>

隐藏域

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

<form action="result.html">
    <input type="hidden" name="stuNo" value="20140202473"/>
    原密码：<input name="old" type="password"/>
    <br/>
    新密码：<input name="new" type="password"/>
    <br/>
    <input type="submit" value="修改密码"/>
</form>

表单总结

在表单的所有标签中学习了< input>标签的所有type，有能输入信息的文本框，和能隐藏输入信息的密码框，有单选按钮，也有多选按钮，以及提交、重置、普通、图片按钮，还有可以上传文件的按钮。也学习了普通按钮的升级版< button>按钮，文本框的升级版< textarea>。还学习了下拉列表以及< fielaset>标签。经过这次学习，我对表单的认识更加深刻。

表格标签

表格

表格的组成部分：标题、表头、主体、表尾
< table>定义一个表格
< caption>定义表格的标题
< thead>定义表头部分
< tbody>定义表格主体（数据）部分
< tfoot>定义表尾，一般显示汇总信息等
< tr>定义一行
< th>< td>定义一个数据项（单元格），< th>一般用于表头，有加粗样式。< td>一般用于表格主体部分，没有加粗样式。
< td>的rowspan和colspan分别定义单元格的跨行的行数、跨列的列数

秒客网