## 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标签