html列表与表格与表单,HTML之表格和表单(示例代码)

1. 表格和表单的区别：表格多用于页面布局，创建页面的排版样式。表单多用于传输数据获取信息，如：input输入框，单选、多选、下拉选择框。

2. 表格：table。

a. 基本样式如下：

table test

1

2

b. 单独操作某列，其中每一个col代表一列的样式，span默认值为1，设置其他值时，表示从该行开始的几列的样式。

c.  基本属性

colspan：合并列数，值为数值，rowspan：合并行数，值为数值。

3. 表单：form

a. 输入框，格式如下：

其中type属性可以为：text(文本)，password(密码)，button(按钮)，checkbox(多选)，radio(单选)，reset(复位)，submit(提交)，file(上传文件)，number(数字)，email(邮箱)，url(连接)，tel(电话)，color(颜色)，date(日期)，datetime(时间)，datetime-local(本地时间)，等等...，其中，当属性为radio时，必须将一组内的单选选项的 name设置为一致，例如：男  女。

input标签可以使用type="hidden"属性来定义隐藏的输入字段，隐藏字段对于用户而言不可见，一般用来传递参数。

value为该文本框的值，size为输入框的长度，maxlength为输入框能输入的最大内容。placeholder为输入框内的提示文字。

b. 设置文本框自动聚焦和自动完成填充。

c. datalist标签

datalist定义一个可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。如下：

男装

女装

童装

d. 进度条

min-max表示进度条的范围，step表示每次滑动进度条增加的阶数，使用格式如下：

e. 下拉选择标签 select

四川

北京

上海

其中，mutiple表示可以多选，size为显示下拉框的长度，selected为浏览器加载时默认的选择选项。

f. 分组标签fieldset

fieldset标签能组合表单的相关元素，生成一组相关的表单字段，浏览器会以特殊的方式来显示他们。其子元素legend 元素定义fieldset的标题。

g. 文本框textarea

其使用方法如下：

分别使用cols和rows来控制文本框的大小。