html form表格采购单,【HTML】--- 列表、表格、form表单标签

Html常用标签(2)

上篇博客讲了些常用的html标签 :【HTML】---常用标签(1)

这里主要讲 列表、表格标签和 form表单标签。

一、列表、表格标签

1、列表标签

概念 把内容以列表的形式展现。列表最大的特点就是 整齐 、整洁、 有序。

示例

列表标签

2017年心愿

• 父母身体健康
• 宝宝健康成长
• 媳妇健健康康

2017年大事件

2. 老婆要生小孩了
3. 自己换工作了
4. 要卖掉一套房

时刻告诉自己

不抱怨

零负能量

该与不该

运行结果

2、表格标签

表格的现在还是较为常用的一种标签，但不是用来布局。常见用于处理、显示表格式数据。

基本语法

border

width

height

cellspacing

cellpadding

bgcolor

align

示例

table标签

我的好朋友

姓名性别年龄爱好小红女20跳舞小舵女24唱歌

运行结果

合并单元格 在表格操作的时候我们可能会有合并单元格的操作，如下示例

table中合并单元格

align="center" background="first.jpg" >

1占两列 2占两行 345678

运行结果

二、form表单标签

作用 用于收集用户信息，如：登录、注册等场景。

form表单里主要包含的标签有：form表单域、input标签、 select 标签、label标签、textarea标签。

1、form表单域

基本语法

action 提交地址动作。与input标签中的submit属性相关联。

method 提交方法，有 get 和 post 两种提交方法。

enctype 表单数据提交时编码类型，默认"pplication/x-www-form-urlencoded"，如果表单中有上传文件，编码类型需要使用"multipart/form-data"，类型，

才能完成传递文件数据。

2、input标签

标签为单标签，type属性为其最基本的属性类型 ,其取值不同代表不同的控件类型。

基本语法

选择完input类型type属性后，还有些常用的属性值：

name: 指定名字，因为提交的是键值对，所以必须要指定名字，否则无法提交，即使提交了也没有意义

value: input控件的默认文本值。

size: 控件的宽度。

checked: 定义选择控件默认被选中。

maxlength: 运行输入的文本最大长度。

placeholder: 文本的提示内容。

readonly: 只读模式，设置后无法修改输入框的内容。

disabled: 禁用状态。

3、 select 标签

select标签是一个下拉框的形式让用户进行选择选项，所以select标签中必须包含option标签才能显示属性

基本语法

选项1

选项2

选项3

...

4、label标签

作用 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

示例

Male

5、textarea(文本域)

text文本框只能写一行文本，而textarea文本域可以输入大量文本的信息。

基本语法

文本内容

6、完整示例

为了方便理解，这里来一个完整的示例。

form表单

用户注册

用户名:

密码 :

性别:男性

女性

学历:

博士

研究生

本科

专科

兴趣爱好:骑车

睡觉

吃饭

敲代码

备注:

个人头像:

个人网站:

个人邮箱:

身体体重:

出生日期:

隐藏项：