Day 25

2月4日，继续看知识点。

构建表单
1.表单元素

（1）form：form是表单的容器，最常用的两个属性action和method。例如：

<form action="/login.html" method="post">
</form>

（2）原始文本类型：text、password。

（3）Html5增加的文本类型：color、date、datetime、email、month、number、range、search、tel、time、url、week。例如下面代码：

form action="No8-6.html" method="post">
    日期：<input type="date" />
    <br>
    颜色：<input type="color"/>
    <br>
    范围：<input type="range"/>
</form>

chrome展示结果：

form action="No8-6.html" method="post">
日期：


颜色：


范围：

（4）兼容性：如果浏览器不支持这些Html5的文本类型，元素类型自动显示为text类型。

（5）textarea元素：属性cols设置初始化时文本区内的可见宽度，rows设置初始化时文本区内的可见行数。个人建议直接设置height和width。

2.选择元素

（1）radio元素：一组radio必须有相同的名字，添加checked表示选择项。例如：

<form action="No8-6.html" method="post">
    哪天？
    <input type="radio" name="day" value="Friday" checked>Friday
    <input type="radio" name="day" value="Saturday" >Saturday
    <input type="radio" name="day" value="Sunday" >Sunday
</form>

哪天？ Friday Saturday Sunday

（2）checkbox元素：和radio相似，但可以多选。例如：

<input type="checkbox" name="day" value="Friday" checked> Friday
<input type="checkbox" name="day" value="Saturday"> Saturday
<input type="checkbox" name="day" value="Sunday"> Sunday

Friday
Saturday
Sunday

（3）下拉列表元素：使用select和options两个元素实现。例如：

<select name="day">
    <option value="Friday" selected>Friday</option>
    <option vlaue="Saturday">Saturday</option>
    <option value="Sunday">Sunday</option>
</select>

Friday Saturday Sunday

（4）多选列表：和下拉列表相似，但需要给select添加multiple属性。例如：<select name="day" multiple>

3.表单按钮

（1）submit input:<input type="button" value="submit">。

（2）submit button：可通过设置button元素实现和input button一样的效果，代码如下：

<button type="submit">
    <strong>Send us</strong> a message
</button>

Send us a message

4.其他元素

（1）hidden input：可通过该类型在本地保存某些值，例如：<input type="hidden" name="tracking-code" value="abc-123">。

（2）file input：file类型的样式不好控制，一般都是通过js设置文件上传控件。

5.组织表单

（1）label元素：一般用来描述表单的头部信息。label包含for属性，for的值为text输入框元素的id。这样设置后，当点击label元素时，for属性值对应的输入框元素自动获取焦点。例如：

<label for="username">Username</label>
<input type="text" name="username" id="username">

Username

（2）label元素for属性的替代方式：只需用label元素包含输入框元素，例如：

<label>
    <input type="radio" name="day" value="Friday">Friday
</label>
<label>
    <input type="radio" name="day" value="Saturday"> Saturday
</label>
<label>
    <input type="radio" name="day" value="Sunday"> Sunday
</label>

Friday Saturday Sunday

（3）fieldset：字段集合分组，和section相似。把form表单中同类元素信息放在一个组。

（4）legend：作为filedset头部信息。例如：

<fieldset>
    <legend>登录</legend>
    <label>
        Username
        <input type="text" name="username">
    </label>
    <label>
        Password
        <input type="text" name="password">
    </label>
</fieldset>

显示效果如下：

登录

Username Password

6.input属性

（1）disabled：元素不可用。

（2）placeholder：html5属性，文本框提示信息，例如：

<label>
    Email:
    <input type="email" name="email" placeholder="请输入电子邮件">
</label>

Email:

（3）required：html5属性，设置为必填项。可通过:required伪类设置无效元素的样式。

（4）html5其他附加属性：accept、autocomplete、autofocus、formaction、formenctype、formmethod、formnovalidate、formtarget、max、maxlength、min、pattern、readonly、selectionDirection、step。