form元素-优快云博客

本文链接：https://blog.youkuaiyun.com/lswdcyy/article/details/132377297

form

表单元素，一系列元素，主要用于收集用户数据，需要用户进行填写；表单元素有个神奇的现象，那就是只要在表单元素中按下回车，那就会触发提交按钮。

input元素

输入框，可输入文本、日期等

type属性

输入框类型

text 普通文本输入框，不同的浏览器显示可能有些差异。
password 密码框，防偷窥
date 日期选择框，有兼容性问题
search 搜索框，有兼容性问题
range 滑动条，有兼容性问题
- min 设定最小值
- max 设定最大值
color 颜色选择
number 数字输入框
- min 输入最小值
- max 输入最大值
- step 每次向上或者向下增加减少的数量
  手动输入一个越界值，虽然显示上是超过的，但是使用JS获取的时候是设定的最大或者最小值
checkbox 多选框
- checked 选中
radio 单选框
- checked 选中
  需要使用name才能实现单选效果
file 选择文件
hidden 不显示在页面上，但是他的值会被提交到服务器
button 普通按钮
submit 提交按钮，将该按钮所在的form元素中的所有input提交
reset 重置按钮，将该按钮所在的form元素中的所有input重置

value属性

输入框的值

placeholder

显示提示文本，文本框没有内容时显示

select元素

下拉列表选择框，使用option子元素来设置下拉列表选择框的选项

属性

multiple 启用多选，按住ctrl键

子元素

optgroup
下拉分选框分组
- lable 下拉分选框分组名称
option
- selected 表示选中属性，可以使用设置初始值

textarea

文本域，多行文本框

button

这个元素挺奇怪的，box-sizing没效果，width和height指的就是border-size。

type
- reset 重置按钮
- sumbit 默认值，提交按钮
- button 普通按钮

表单状态权限设置属性

readonly 表示是否只读状态，显示效果和默认的一样，就是不能修改；
disabled 表示是否禁用，会改变表单显示样式。

配合表单元素

label

普通元素，通常配合单选多选框使用

显示关联(使用for属性)
可以将label元素与单选多选框关联起来，点击label就可以进行单选多选的选中效果：

<input type="radio" name="gender" id="genderMale"><label for="genderMale">男</label>
<input type="radio" name="gender" id="genderFemale"><label for="genderFemale">女</label>

隐式关联

<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>

datalist

数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合使用；一般用于text类型输入框的问题提示：

<input list="testDatalist" type="text">
<datalist id="testDatalist">
    <option value="key1">value1</option>
    <option value="key2">value2</option>
    <option value="key3">value3</option>
</datalist>