02---HTML+CSS---表单

用于数据采集。

1、input标签（单标签 行内标签）

input常用属性：

type  规定 input 元素的类型。
name  定义 input 元素的名称。
placeholder  规定帮助用户填写输入字段的提示（例如：请输入用户名）。

type属性的属性值有：

值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 “浏览”按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

还有tel，email，range（滑动条），color，date（日期）等。

<input type="text" name=" ">
<input type="password" name=" ">
<input type="color" name=" ">
<input type="button" value="按钮" name=" ">

网页显示 ：

由于是行内标签，换行要自己单独用标签或样式。可以用value来改变button上的文字。

2、form标签

form的常用的两个属性：

action 规定当提交表单时向何处发送表单数据。
method  规定用于发送 form-data 的 HTTP 方法。（属性值通常用post和get）

metod属性值中，get用的比较多（会拼接显示在地址栏里，post则不会比较安全）。表单都要放在form标签里。

3、复选框

<input type="checkbox" checked>唱歌
<input type="checkbox" checked>跳舞
<input type="checkbox">学习
<input type="checkbox">游戏

网页显示：

checked表示默认选中。

4、单选框

<input type="radio" name="xingbie" id="nan"><label for="nan">男</label>
<input type="radio" name="xingbie" id="nv"><label for="nv">女</label>

网页显示：

id是唯一的。

radio需要name来确定是否唯一（不能又男又女）。

label标签，可以用来绑定（显示绑定/隐式绑定）字和前面的圆圈。使得点击字和点击前面的圆圈效果一致。以上是显示绑定。

隐式绑定：

<label><input type="radio" name="xingbie" id="nan">男</label>
<label><input type="radio" name="xingbie" id="nv">女</label>

隐式绑定时，label标签不需要写for属性。

label对于复选框checkbox是一样使用的。

5、type的hidden属性值

<input type="hidden" name="" value="">

在网页上看不到。上传不需要用户知道的东西。

6、文本域textarea

<textarea cols="20" rows="15" style="resize:none;"></textarea>

网页显示：

style=”resize:none;”：限定大小，使文本域不能拉伸。

可用div盒子替代：

<div contenteditable="true"></div>

contenteditable=”true”：使div是可编辑的状态。

7、select标签（下拉菜单）

<select name="" size="1">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
    <option value="4">选项四</option>
</select>

select需要name值。size表示默认显示几个。