HTML笔记——表单元素

表单元素

一系列用于收集用户数据的元素。

一些input元素

输入框，包括但不仅限于文本。

• type属性：输入框类型

 <!--普通文本输入框-->
<!--Emmet: input:text-->
<input type="text">

 <!--密码输入框-->
<input type="password">

 <!--日期选择框-->
 <!--和浏览器兼容性有关，样式不可更改-->
<input type="date">

 <!--搜索框-->
 <!--一般在移动端上显示效果-->
 <!--输入文本后移动端键盘换行键变为搜索键-->
 <!--和浏览器兼容性有关-->
<input type="search">

 <!--滑块-->
 <!--和浏览器兼容性有关-->
 <!--用JS才能显示值-->
 <!--像下面这样设置了最大最小值后滑块只能滑到整数值-->
<input type="range" min="0"  max="5">

<!--颜色选择框-->
<!--调用Windows/Mac颜色选择器-->
<input type="color">

<!--数字选择框-->
<!--可以像range一样设置min和max-->
<input type="number">

<!--多选框-->
<!--name标识同一组多选框-->
<!--value向后台传值用-->
<!--默认选中的选项加上checked布尔属性-->
Choose your hobbies: 
<input name="hobby" type="checkbox">swimming
<input name="hobby" type="checkbox">printing
<input name="hobby" type="checkbox">others

<!--单选框-->
<!--name标识同一组单选框-->
<!--value向后台传值用-->
<!--默认选中的选项加上checked布尔属性-->
Choose your age: 
<input name="hobby" type="radio">adult
<input name="hobby" type="radio">teenager

<!--让用户选择本地文件-->
<!--accept属性定义用户可以选择的文件类型-->
<input type="file">

当type值为reset、botton、submit时，输入框为按钮。value的值为按钮上显示的文字。

• value属性：输入框取值

type=“button”, “reset”, “submit” - value定义按钮上的显示的文本
type=“text”, “password”, “hidden” - value定义输入字段的初始值
type=“checkbox”, “radio”, “image” - value定义与表单提交相关联的值

<input type=“checkbox”> 和 <input type=“radio”> 中必须设置 value 属性。

• placeholder属性

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

select元素

下拉列表选择框。常和option元素配合使用。

<!--selected布尔属性默认选中-->
<!--添加布尔属性multiple即允许多选-->
<select name="city">
    <optgroup label="省会">
        <option value="beijing">北京</option>
        <option value="guangzhou">广州</option>
    </optgroup>
    <optgroup label="非省会">
        <option value="qingdao">青岛</option>
        <option value="xiamen">厦门</option>
    </optgroup> 
</select>

textarea元素

多行文本框。text元素会删除空行，不能输入多行文本。

<!--不建议使用cols和rows属性控制尺寸，建议使用CSS控制-->
<textarea cols="30" rows="10"></textarea>

botton元素

按钮空间建议使用botton元素而不是input元素，有更丰富的表现形式，更方便语义化。这里引用一篇更详细说明两者区别的文章。

type值可选reset、botton、submit。

表单状态

• readonly：布尔属性，表示只读。
• disabled：布尔属性，表示不可用。

常和表单元素关联使用的元素

label元素

• 显示关联
  label元素的for属性值关联单选框的id时，点击文字也可以选中选项。用若不用label元素，只有当点击单选的圆圈才能选中选项。

请选择您的性别：

<input type="radio" name="gender" id="radMale">
<label for="radMale">男</label>

<input type="radio" name="gender" id="radFemale">
<label for="radFemale">女</label>

<input type="radio" name="gender" id="radOthers">
<label for="radOthers">其他</label>

• 隐式关联
  和上面的代码得到的效果一样，但不用for关联id。

请选择您的性别： 

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

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

<label>
    <input type="radio" name="gender">
    其他
</label>

datalist元素

可以根据文本框中输入的内容筛选出符合条件的选项。

<input list="userAgent" type="text">

<datalist id="userAgent">
    <option value="Chrome">谷歌浏览器</option>
    <option value="IE">IE浏览器</option>
    <option value="Safari">苹果浏览器</option>
    <option value="Opera">欧鹏浏览器</option>
    <option value="Firefox">火狐浏览器</option>
</datalist>

form元素

包裹整个表单元素。当点击提交按钮，表单以某种方式（POST/GET）提交到后台。

表单一定要有name属性才能提交。get方法提交的时候，浏览器地址框最后附上提交的内容，比如name1=aaa?name2=bbb，这里的aaa和bbb是用户键入的内容或input的value值。

fieldset元素

表单分组用。
用field元素包裹同组表单元素。
子元素<legend></legend>中填写显示给用户的分组名称。