作用
专门用来收集用户信息的
input标签
- type属性
text
明文输入框
password
暗文输入框
radio
单选框
注意单选框默认不会互斥的,如果需要互斥,则需要互斥的所有单选框都添加name属性,而且必须一样
如果需要默认选中一个单选框,则需要给这个单选框添加一个checked属性值也为checked,如果属性和值是一样的在html里面可以省略一个不写,但是在xhtml里面必须都写上
checkbox
多选框
注意多选框的默认值可以有多个,单选框的默认值只能有一个,如果设置了多个,只有最后一个才会生效
button
按钮
按钮的value属性是按钮上显示的文本
image
是用图片来定义按钮的
reset
定义重置按钮,作用是来清空表单的数据,有个默认显示值是重置,可以更改
submit
定义提交按钮的 默认显示的值是提交,可以更改
作用是把表单的数据提交到远程的服务器,具体提交到那个服务器是通过from的action属性来确定的,提交的是有name属性的表单,并且是一key value的形式提交的
hidden
隐藏域
用于不会让用户知道的方式提交数据,所以不会在网页上显示出来 - value属性
默认值
label标签
用来将文字和输入框绑定,用法是给输入框设置一个id,再在label标签的for属性传进去
<label for="1">
账号
</label>
<input type="text" id="1">
<label for="2">
密码
</label>
<input type="password" id="2">
还有一种写法
<label>
账号
<input type="text">
</label>
<label>
密码
<input type="password">
</label>
但是这种写法有一定的局限性不太灵活
- datalisht标签
作用:是提供一个待选框
首先要有一个输入框
再有一个待选框
待选框里每个元素都在option标签里
然后给待选框一个id属性
再给输入框一个list属性,把id的值传进去
<label>
账号
<input type="text" list="hehe">
</label>
<datalist id="hehe">
<option >在么?</option>
<option >吃了吗?</option>
<option >呵呵</option>
</datalist>
但是现在很多浏览器都不支持
h5里面的input类型
- email
作用是会自动校验输入的是否是邮箱 - url
自动校验输入的是不是网址 - number
自动校验输入的是不是数字 - time
可以通过日历来选择时间 - color
可以通过取色版来选择颜色
select
用来定义下拉列表
里面的数据也是放到option标签的
注意点:下拉列表不可以输入值,但是可以在列表.里选择值
可以通过给option标签添加select属性来指定默认值,select属性的值是select
可以通过给option标签外层包裹一个optgroup标签来分类
textarea
定义一个多行的文本输入框
注意点:默认情况下输入框可以无限换行,输入框有自己的高度和宽度
通过 col 属性 row 属性来指定输入框的宽度和高度,但是还是可以无限输入
默认情况下输入框可以随便拉伸
提交表单
第一from的属性要有一个值
第二提交的数据要有name属性
注意,单选框和多选框的name属性必须一样
除了button都可以通过value属性来指定提交的值