学习笔记（七）：表单

---

表单就是收集用户信息的，就是让用户填写的、选择的。
表单分为：文本框，密码框，单选按钮，复选框，下拉列表，多行文本框（文本域）。下面我就来依次介绍。

一、文本框

<input type="text" />

这是一个自封闭标签,其中有一个属性叫value，显示为文本框是默认有的值。

<input type="text" value="默认有的值" />

显示为

image.png

二、密码框

<input type="password" />

所以说，input很神奇，既可以是文本框，也可以是密码框。具体的功能是type标签决定的。如果type=”text”，是文本框；如果type=”password”，则是密码框。
显示为

image.png

三、单选按钮

只能选一个，术语叫做“互斥”。

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女

显示为

image.png

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。默认被选择，就应该书写checked=”checked”

<input type="radio" name="sex" checked="checked">

四、复选框

也是input标签，type是checkbox。

请选择你的爱好：
<input type="checkbox" name="aihao"/> 睡觉
<input type="checkbox" name="aihao"/> 吃饭
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 篮球
<input type="checkbox" name="aihao"/> 乒乓球

显示为

image.png

复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

五、下拉列表

select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。

<select>
<option>北京</option>
<option>河北</option>
<option>河南</option>
<option>山东</option>
<option>山西</option>
<option>湖北</option>
<option>安徽</option>
</select>

显示为

image.png

六、多行文本框（文本域）

text就是“文本”，area就是“区域”。

<textarea cols="30" rows="10"></textarea>

这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。