1.文件选择框
file属性,选择文件
accept属性,选择文件的类型。image/*全部的类型的图片.
上传文件需要指定对用表单的属性,也就是enctype属性
<formenctype="multipart/form-data">
选择你的头像:<input type="file" accept="image/jpeg">
简历:<inputtype="file" accept="application/pdf">
选择文档:<inputtype="file" accept=".docx">
</form>
2.下拉列表
(1)单选列表使用下拉列表的好处:节省空间,页面简洁,方便输入,规范输入
<select name="province"></select>属性定义下拉列表,name定义了提交的参数名
<option value="41"></option>在select标签中,属性定义下拉列表的选项,value属性定义选择该选项时所传递的参数值
点击提交地址栏显示:file:///E:/H5课堂/HTML/chapter4/E101-04-02.html?province=41#
<form action="#" method="get">
来自:<select name="province"> <option value="33">浙江</option> <option value="41"selected>河南</option> <optionvalue="32">江苏</option> </select>
<inputtype="submit">
</form>
(2)多选列表
<select></select>的size属性定义下拉列表的选项个数,当小于实际选项个数时,会增加一个滚动条。selected默认选择
多选地址:https://www.baidu.com/?hobby=?&hobby=?
爱好:
<selectname="hobby"multiple size="2"> <option value="music">音乐</option> <option value="dance" >跳舞</option> <option value="read">阅读</option> <option value="run">跑步</option>
</select>
用<optgrouplabel="">进行分组
<select> <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>
</select>
3.<textarea>
定义一个文本区域 (text-area) (一个多行的文本输入区域)。用户可在此文本区域中写文本。在一个文本区中,您可输入无限数量的文本。文本区中的默认字体是等宽字体(fixed pitch)。
disabled 不能更改,readonly 只可以读
rows属性,行数 cols(column的复数)列、纵
<form> 学习经历: <textarearows="3" cols="20"></textarea> </form> <!--cols是column的复数形式-->
4.fieldset
用于一些分组
<legend>标签用于对一些信息进行分组
<form action="#" method="get"> <fieldset> <legend>个人基本信息</legend> 姓名:<inputtype="text" name="name"><br> 性别:。。。<br> 年龄:。。。<br> </fieldset><br><br> <fieldset> <legend>毕业情况</legend> 毕业院校:。。。<br> 工作经历:。。。<br> </fieldset> </form>
5.隐藏域
当需要像服务器传输一些数据时,并且该参数无需用户输入,甚至可以不被看见,可以使用隐藏域。
input type="hidden" name="stuId"value="123456">
6.table
<border边框 cellspacing=表格间距 cellpaddingd=单元格间距> <thead>标题的头 <caption>定义表格标题<tbody>定义表格的内容<tr>定义表格的行 <td>的rowspan和colspan分别定义合并几行和几列 <tfoot>表尾
<tableborder="1" cellspacing="0" cellpadding="4"> <thead> <caption>基本信息</caption> <tr> <th>姓名</th> <th>性别</th> <th>出生日期</th> <th>手机号</th> <th>部门</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>1990.1.1</td> <td>18888888888</td> <tdrowspan="2">人事部</td> </tr> <tr> <td>王二</td> <td>男</td> <td>1995.12.12</td> <td>13333333333</td> </tr> <tr> <td>李四</td> <td>女</td> <td>1999.10.10</td> <td>16666666666</td> <td>市场部</td> </tr> </tbody> <tfoot> <tr> <tdcolspan="5" align="center">共计1人</td> </tr> </tfoot> </table>