文本选择框
选择你的头像:<input type="file" accept="image/*"/>
选择你的头像:<input type="file" accept="image/jpeg"/>
简历:<input type="file" accept="application/pdf"/>
简历:<input type="file" accept=".doc"/>
accept :属性指定可选择的文件类型
上传文件需指定对应表单的属性
<form enctype="multipart/form-data">
注意:image/*中*代表通配符即全部image的文件
mage/?中?代表任意一个字符
下拉列表
其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:
<select>标签的size属性定义了一个下拉列表框显示的选项个数,当小于实际选项个数时,会增加一个滚动条。
可使用optgrounp进行分组
Optgrounp中label属性定义分组 显示的文字
option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:
option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性
注意:多选可通过设置multiple属性来实现,Ctrl+单击选择多个
使用下拉列表的好处:
节省页面空间,使得页面更加简洁
方便输入
规范输入
textarea标签
textarea:是表单文字区块标记
name属性文字区块的名称
disabled 使元素无效无法输入文字无效且变成灰色
readonly是无法输入文字
Fieldset标签
Fieldset即信息分组的一种方式,,分组后每组信息默认有一个边框。同时可以使用<legend>标签为每组指定一个标题
隐藏域
不需要用户编辑的,甚至不想让用户看见的
代码如下:
<input type="hidden" name="stuNo" value="2017110103" />
表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th> 标签进行定义。
<captiion>定义表格的标题
<td>的rowspan和colspan分别定义单元格跨行的行数、跨行的列数
Cellpadding:创建单元格内容与其边框之间的空白。
Cellspacing:单元格之间的距离。