## HTML基础-表单标签

## HTML基础-表单标签

# form标签(表单)

# datalist标签

# select标签

# optgroup分组名

# textarea标签

# text

# filedset表单边框

# legend 表单标题

1.什么是表单?

-表单就是专门用来收集用户信息的

2.什么是表单元素?

2.1什么是元素(element)

-在HTML中 标签/标记/元素 都是指HTML中的标签

例如:a标签/a标记/a元素

表单元素其实都是HTML中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能

3.表单的格式

<表单元素>

4.常见的表单元素

input标签,input标签有一个type属性,这个属性有很多类型的取值,取值的不同决定他不同的外观和功能—>

明文输入框

账号:

暗文输入框

密码:

给输入框设置默认值

value

input属性:

1.type:

-text:明文输入框

(type=“text”)

-password:暗文输入框

(type=“password”)

-radio:单选框

(注意:1.默认情况下单选框不会互斥,要想单选框互斥那么必须给每个单选框一个name,而且name属性必须设置相同的值

2.要想单选框默认选中一个框,那么可以给input标签添加一个checked属性 checked=“”

3.HTML中如果属性名跟取值名一样,可以省略不写,但是xhtml中必须写上,推荐一定要写

4.如果单选框都设置了一样name,设置了多个checked,那么生效的是最后的checked,也就是只单选选中最后一个)

-checkbox:复选框

(注意:要想复选框默认选中一个或多个框,那么可以给input标签添加一个checked标签 checked=“”)

-button:普通按钮

(input type=“button” value=”我是按钮”)

-image:图片按钮

(input type=“image” src=“”)

-reset:重置按钮

(type=“reset” 用于清空表单中已填好的数据.如果想重置按钮标题可以设置value属性 value=“清空”)

-submit:提交按钮

(type=“submit” 将表单中的数据提交到远程服务器中 注意:1.需要添加action属性指定提交到的服务器地址 2.需要给需要提交到服务器的表单元素都添加一个name属性 )

-hidden:隐藏域(type=“hidden” 配合提交按钮将一些数据偷偷地上传到服务器)

2.value

给输入框默认值

3.name

4.checked

label

1.默认情况下文字和输入框都是没有关联关系的

也就是说点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么就需要让蚊子和输入框进行绑定

2.想让输入框和文字绑定在一起,那么我们可以使用label标签

3.格式1(官方)

3.1给输入框一个id

3.2在label标签中通过for属性跟id绑定

label for=“account”>账号

label for=“password”>密码

格式2(方便,但有局限-比如错位绑定)

账号

了解

datalist标签

作用:给输入框绑定待选项

格式:

待选项内容1

待选项内容2

待选项内容3

如何给输入框绑定待选列表

1.搞一个输入框

2.搞一个datalist列表

3.给datalist标签添加一个列表,并设置id属性

4.给输入框一个list属性,并绑定datalist的id属性

例:

请输入你的车型:

待选项内容1

待选项内容2

待选项内容3

H5新的input类型type(很多浏览器不兼容,所以只需要了解):

email:自动校验邮箱格式

url:自动校验url格式http://www.baidu.com

number:自动校验是否为数字

date:可以通过日历选择时间

color:可以通过取色板选择颜色

select标签

-作用:用于定义下拉列表

-格式:

注意点:

1.下拉列表不能输入内容,但是可以下拉选择

2.可以通过给option标签添加一个selected标签设置默认选中

3.可以通过给option包裹一个optgroup标签给下拉列表进行分类,给select标签里添加optgroup标签

-optgroup分组名

textarea标签

-作用:定义一个可以换行的文本输入框

-格式:文本

注意点:

1.默认情况下输入框可以无限换行

2.默认情况下输入框有自己的宽高

3.通过col  row可以指定列数和行数,但是虽然可以指定行列数,但是还是可以无限输入

4.输入框可以拉大拉小

5.可以在css里设置resize:none,固定输入框的大小

除了按钮类型的input标签以外, 其它的类型的标签都可以通过一个name属性来指定将来提交到服务器的值

了解:

  空格

filedset

-作用:可以给表单添加一个边框

-格式

legend

-作用:给表单一个标题

datalist标签