HTML入门学习笔记之表单类标签

---

input标签

<input>标签可以创建一个输入框，使用type属性来指定input元素的类型，使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。

---

文本框

文本框：<input type="text"/>

type="text"表示普通文本的输入。

显示效果如图所示：

---

密码框

密码框：<input type="password" value="123456"/>

type="password"表示密码的输入。
value属性的值是密码框里的值。

显示效果如图所示：

---

单选框

单选框<br>
<input type="radio"/>A
<input type="radio"/>B
<input type="radio"/>C
<input type="radio"/>D

type="radio"表示单选框。

显示效果如图所示：

---

多选框

多选框<br>
<input type="checkbox"/>A
<input type="checkbox"/>B
<input type="checkbox"/>C
<input type="checkbox"/>D

type="checkbox"表示多选框。

显示效果如图所示：

---

默认属性

默认选A<br>
<input type="radio" checked="checked"/>A
<input type="radio"/>B
<input type="radio"/>C
<input type="radio"/>D

只要有checked属性就会被默认选中，不管它的值是什么；
不想被默认选中，不添加checked属性就可以了。

显示效果如图所示：

---

禁用属性

不可选A<br>
<input type="radio" disabled="disabled"/>A
<input type="radio"/>B
<input type="radio"/>C
<input type="radio"/>D

只要有disabled属性就会被禁用，不管它的值是什么；
不想被禁用，不添加disabled属性就可以了。

显示效果如图所示：

---

label标签

<label>标签的作用主要是提高用户体验性。当点击<label>元素内的文本时，焦点会自动定位到与<label>标签绑定的表单元素上。通俗地说，就是点击文本也能选择表单元素。

注：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。

例如：

<label for="user">用户：</label>
<input type="text" id="user"/><br>
<label for="pwd">密码：</label>
<input type="password" id="pwd"/>

显示效果如图所示：

---

下拉列表

<select>标签用来创建下拉列表，<option>标签定义列表中的可用选项。

下拉列表：
<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option selected="selected">D</option>
</select>

只要有selected属性就会被默认选中，不管它的值是什么；
如果不添加selected属性，则会默认选中第一个选项。

显示效果如图所示：

---

文本域

<textarea>标签可以定义多行的文本输入框。用宽width和高height来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

定义文本域输入框的大小时，用<style></style>标签包裹。

例如：

<style>
textarea{
	width:100px; 
	height:100px;
}
</style>
文本域：<textarea maxlength="10"></textarea>

显示效果如图所示：

---

提交按钮

<input type="submit" value="提交按钮"/>

显示效果：

---