1.文件选择器
Type:file 提供文件选择的格式
Accept指定可选择的文件类型,也可以直接输入格式的后缀名,例如.doc
“image/*”代表支持所有格式。
选择你的头像: <input type="file" accept="image/gif" >
选择你的头像: <input type="file" accept="image/gif" >
上传文件需指定对应表单的属性。
Enctype属性指定表单属性。
2.下拉列表
使用下拉列表的好处:节省页面空间,使得页面更加简洁,方便规范输入。
<select>标签的name属性定义了提交的参数名。
<option>标签的内容定义了该选项显示的文本,value属性定义了选择该选项时所传递的参数值。
比如选择“江西”并提交
多选可通过设置multiple属性来实现,ctrl+单击选择多个
Size属性:设置在下拉列表框页面中显示出来的选项的个数,当小于实际选项个数时,会自动增加一个滚动条
可以使用optgrop进行分组,label属性定义分组显示的文字,disabled设置该分组不能选择。例如:
3.Textarea属性:定义一个文本框,主要是方便用户输入较多文字信息,rows属性指定编辑区域的行数。
Cols:定义文本内可见的列数(对于字母而言)
Rows:定义文本内可见的行数(对于字母而言)
Readonly:只读属性。(h5新增)
Disable:规定禁用文本区域。(h5新增)
文本框内支持空格移动。
4.Fieldset属性:
当信息较多时,可以考虑按照信息内容进行分组,达到表达清晰的目的。Fieldset标签提供将信息分组的一种方式,分组后每组信息默认有一个边框,同时可以使用legend标签。
<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。
5.表格的使用方法
表格的一些常用标签如下:
<table>定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<border> 定义表格之间
<cellspacing>表格与表格之间的间隙
<cellpadding>设置单元格的大小
总结:通过对表格的理解,对表格的理解又更深刻了一层,从表单到表格,变得更简单化了,功能也多样多化了,还有多文本输入,解决了我们堆积在一行中的文本不美化的问题,还有下拉列表为页面节约了很多空间,也更加美化和多样化