列表与表格的使用（新手入门基础学习）

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>设置单元格的大小

总结：通过对表格的理解，对表格的理解又更深刻了一层，从表单到表格，变得更简单化了，功能也多样多化了，还有多文本输入，解决了我们堆积在一行中的文本不美化的问题，还有下拉列表为页面节约了很多空间，也更加美化和多样化