1 什么是表单?
表单就是专门用来收集用户信息的
2 什么是表单元素
2.1 什么是元素
在html 中标签/标记/元素都是指HTML中的标签,例如 a 标签/a标记,a元素
表单元素其实还是HTML中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能
2.2 表单的格式
2.3 常见的表单元素
input 标签,有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观
格式:
账号:
密码:
账号:
密码:
性别: 男
女
篮球
足球
棒球
2.4 label 标签
默认情况下文字和输入框是没有关联关系的,也就是说点击文字输入框不会聚焦,如果想点击文字时让对应的输入框聚焦,那么旧需要让文字输入框进行绑定;
要想让输入框和文字绑定在一起,那么我们就可以使用label标签。
绑定方法:
将文字利用label 标签包裹起来;
给输入框添加一个id 属性;
在label 标签中通过for 属性和输入框中的id进行绑定即可
账号
2.5 datalist 标签
作用:给输入框绑定待选项
格式:
待选项内容
如何给输入框绑定待选列表
写一个输入框
写一个datalist列表
给datalist 列表标签添加一个id
给输入框添加一个list 属性,将datalist 的id 对应的值赋值给list 属性即可。
2.6 select标签
作用:用于定义下拉列表
格式:
列表数据
注意点:
下拉列表不能输入内容,但是可以直接在列表中选择内容
可以通过给option标签添加一个selected属性来指定列表的默认值
可以通过给option 标签包裹一层optgroup 标签来给下拉列表中的数据进行分类的。
2.7 textarea 标签
作用:定义一个多行输入框
格式:
注意点:
1.默认情况下输入框可以无限换行;
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows 指定输入框的宽度和高度,但是指定了列数和宽度,但是还是可以无限往下输入的。
4.默认情况下,多行输入框可以手动进行拉伸的。
在单选框和多选框中,所有的name 都必须一致。
在表单标签中,出了按钮标签以外的标签,都可以通过value 指定提交到服务器的数据的值。