7-2.表单-HTML基础
六、单选框
1.是什么?
在
HTML中，单选框也是使用Input标签来实现的，其中type属性取值为radio。
（1）语法格式
<input type="radio" name="组名" value="取值" />
① 说明
-
name属性表示单选框所在组名。 -
value属性表示单选框的取值。
这两个属性必须设置。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单选框" action="" method="post">
性别：
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="秘密" />秘密
</form>
</body>
</html>
单选框示例1.png
Ⅱ.例2-checked属性
通过
checked属性实现在默认情况下，选中哪一个单选框。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单选框" action="" method="post">
性别：
<input type="radio" name="gender" value="男" checked="checked"/>男
<!--
上面这个语句等价于下面：
<input type="radio" name="gender" value="男" checked/>男
-->
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="秘密" />秘密
</form>
</body>
</html>
单选框示例2.png
checked="checked"这个语句可以简写为checked，这也是HTML5新规，以后都要写简写形式。
2.name属性
（1）不添加name属性
在上述两个例子中，我都使用了
name属性，但和我去掉name属性的效果一样，但是通过点击单选框会发现。 若我们不添加name属性，我们可以在单选框中选择多个选项，这就和单选框的用意相违背。
（2）name属性取值不一样
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单选框" action="" method="post">
性别：
<input type="radio" name="gender1" value="男" checked="checked"/>男
<input type="radio" name="gender2" value="女" />女
<input type="radio" name="gender3" value="秘密" />秘密
</form>
</body>
</html>
单选框示例name属性取值不一.png
若
name属性取值不一样，我们也可以在单选框中选择多个选项，这就和单选框的用意相违背。
① 实际开发
在实际开发中，对于同一组的单选框，必须要设置一个相同的
name，只有这样做才会把这些选项归为同一组中。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="单选框" action="" method="post">
性别：
<label><input type="radio" name="gender" value="男" checked="checked"/>男</label>
<label><input type="radio" name="gender" value="女" />女 </label>
<label><input type="radio" name="gender" value="秘密" />秘密 </label>
<br/>
国家：
<label><input type="radio" name="country" value="秦国" />秦国</label>
<label><input type="radio" name="country" value="齊国" checked/>齊国</label>
<label>
<input type="radio" name="country" value="楚国" />楚国
</label>
</form>
</body>
</html>
单选框示例name属性示例1.png
上述代码我加上了
label标签这是为了更好的语义化，表单元素与后面的文本一般都需要借助label标签关联在一起。
3.value属性
（1）value属性取值
value属性取值通常跟后面文本相同，之所以加上value属性，是为了JavaScript或服务器操作数据。 所有表单元素的value属性的作用都一样。
七、复选框
1.是什么?
在
HTML中，单选框也是使用Input标签来实现的，其中type属性取值为radio。
（1）语法格式
<input type="checkbox" name="组名" value="取值" />
① 说明
-
name属性表示复选框所在组名。 -
value属性表示复选框的取值。
这两个属性必须设置。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表单</title>
</head>
<body>
<form name="复选框" action="" method="post">
春秋五霸：
<label> <input type="checkbox" name="春秋" value="齐桓公" checked/> 齐桓公 </label>
<label> <input type="checkbox" name="春秋" value="宋襄公" /> 宋襄公 </label>
<label> <input type="checkbox" name="春秋" value="晋文公" /> 晋文公 </label>
<label> <input type="checkbox" name="春秋" value="秦穆公" checked/> 秦穆公 </label>
<label> <input type="checkbox" name="春秋" value="楚庄王" checked/> 楚庄王 </label>
<br/><br/>
战国七雄：
<label> <input type="checkbox" name="战国" value="秦" checked/> 秦 </label>
<label> <input type="checkbox" name="战国" value="齐" checked/> 齐 </label>
<label> <input type="checkbox" name="战国" value="楚" checked/> 楚 </label>
<label> <input type="checkbox" name="战国" value="燕" /> 燕 </label>
<label> <input type="checkbox" name="战国" value="韩" /> 韩 </label>
<label> <input type="checkbox" name="战国" value="赵" /> 赵 </label>
<label> <input type="checkbox" name="战国" value="魏" /> 魏 </label>
</form>
</body>
</html>
复选框示例1.png
复选框中的name跟单选框中的name都是用来设置组名”的，表示该选项位于哪一组中。 两者均设置name属性，单选框只能选中一项，而复选框可以选择多项，这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（这是根据type属性取值来识别如果是单选框组，就只能选择一项；如果是复选框组,就可以选择多项） 通过使用
checked属性使得在默认情况下，让复选框中的某项选中,。
八、按钮
在
HTML中，常见按钮有 3 种：button-普通按钮、submit-提交按钮、reset-重置按钮。
1.button-普通按钮
在
HTML中，button-普通按钮一般情况下都是配合JavaScript来进行各种操作。
（1）语法格式
<input type="button" value="取值">
① 说明
value属性取值就是按钮上的文字。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>普通按钮</title>
<script>
window.onload = function()
{
var oBtn = document.getElementsByTagName("input"); /*通过标签名获取元素*/
oBtn[0].onclick = function() /*点击选中的第1个元素*/
{
alert("Dream it possible!"); /**/
};
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="让梦想成为可能"/>
</form>
</body>
</html>
普通按钮示例1.png
普通按钮示例1-1.png
2.submit-提交按钮
在
HTML中，submit-提交按钮一般用来给服务器提交数据，它其实可以看成特殊的普通按钮。
（1）语法格式
<input type="submit" value="取值">
① 说明
value属性取值就是按钮上的文字。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>提交按钮</title>
</head>
<body>
<form method="post">
<input type="submit" value="提交"/>
</form>
</body>
</html>
提交按钮示例1.png
（2）提交范围
提交按钮针对当前所在
form标签。
3.reset-重置按钮
在
HTML中，reset-重置按钮一般用来清除用户在表单中输入的内容，它其实也可以看成特殊的普通按钮。
（1）语法格式
<input type="reset" value="取值">
① 说明
value属性取值就是按钮上的文字。
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>重置按钮</title>
</head>
<body>
<form method="post">
<label> 账户：<input type="text"> </label> <br/>
<label> 密码：<input type="password"> </label> <br/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
重置按钮示例1.png
（2）清除范围
重置按钮只能清空它所在
form标签内表单中的内容，对于其所在之外。
4.button标签
在
HTML中，除了以上 3 种按钮，其实还有一种按钮是使用button标签实现的。
（1）语法格式
<button></button>
① 实际开发
在实际开发中，基本不会用到
button标签，了解即可。
5.总结
三种按钮虽然从外观上看起来是一样的，但是实际功能却是不样的。 普通按钮：一般情况下都是配合 JavaScript来进行各种操作的。 提交按钮：一般都是用来给服务器提交数据的。 重置按钮：一般用来清除用户在表单中输入的内容。
九、文件上传
在
HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。 文件上传功能实际上需要用到后端技术，在这里只需把页面效果做出来即可，功能实现不需深究。
（1）语法格式
<input type="file"/>
① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>重置按钮</title>
</head>
<body>
<form method="post">
<input type="file"/>
</form>
</body>
</html>
文件上传示例1.png
当我们点击 ”选择文件“ 这个按钮时，是上传不了文件的，需要结合后端技术。
十、多行文本框
单行文本框只能输入一行文本，而多行文本框能输入多行文本。 在
HTML中，多行文本框使用textarea标签，而不是input标签。
1.语法格式
<textarea rows="行数" cols="列数" value="取值"> 默认内容 </textarea>
（1）说明
多行文本框默认显示文本是在标签内部设置，而不是在
value属性中设置的。 通常，不需要设置默认显示文本。
（2）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>多行文本框</title>
</head>
<body>
<form method="post">
个人简介：<br/>
<textarea rows="5" cols="19" value="取值">
阁下尊姓大名啊，从何处来，又要到何处去。
</textarea>
</form>
</body>
</html>
多行文本框示例1.png
2.文本框总结
- HTML有 3 种文本框：单行文本框、密码文本框、多行文本框。
- 单行文本框、密码文本框使用的是
input标签；多行文本框使用的是textarea标签。
十一、下拉列表
1.是神马?
在
HTML中，下拉列表由select和option这两个标签配合使用。 这一点与无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。 为了更好地理解，我们可以把下拉列表看成是一种特殊的无序列表。
（1）最节省页面空间
下拉列表是一种最节省页面空间的方式，因为它在默认情况下只显示一个选项，只有当我们点击它时才会看到全部选项。
（2）语法格式
<select> <option>选项内容</option> ... </select>
2.select标签属性
在
HTML中，select标签常用属性有 2 个。
（1）select标签常用属性
属性 | 说明 |
|---|---|
multiple | 设置下拉列表可以选择多项。 |
size | 设置下拉列表显示几个列表项，取值为整数。 |
（2）示例
① 例1-multiple属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select multiple>
<option>君初见</option>
<option>王小淘</option>
<option>見贤思齊</option>
<option>贤思齊</option>
<option>初见</option>
</select>
</form>
</body>
</html>
select标签multiple属性.png
默认情况下，下拉列表只能选择一项，我们可以通过
multiple属性设置下拉列表可以选择多项。 想要选取多项，可以使用“Ctr+鼠标左键”来选取。 下拉列表的 multiple属性没有属性值，这是HTML5的最新写法，这个与单选框中的 checked属性是一样的。
② 例2-size属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select size="3">
<option>君初见</option>
<option>王小淘</option>
<option>見贤思齊</option>
<option>贤思齊</option>
<option>初见</option>
</select>
</form>
</body>
</html>
select标签size属性.png
有些情况，
size属性取值为1、2、3时，会发现在Chrome浏览器中无效。 这是因为Chrome浏览器最低是4个选项，所以我们只能选取4及以上数字。
3.option标签属性
在
HTML中，option标签常用属性有 2 个。
（1）option标签常用属性
属性 | 说明 |
|---|---|
selected | 是否选中 |
value | 选项值 |
（2）示例
① 例1-selected属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select size="4">
<option>君初见</option>
<option>王小淘</option>
<option selected>見贤思齊</option>
<option>贤思齊</option>
<option>初见</option>
</select>
</form>
</body>
</html>
option标签selected属性.png
selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，跟单选框中的checked属性是一样的。 将size属性去掉，只会显示一项。
② 例2-value属性
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>下拉列表</title>
</head>
<body>
<form method="post">
<select size="4">
<option value="君初见">君初见</option>
<option value="王小淘">王小淘</option>
<option value="見贤思齊">見贤思齊</option>
<option value="贤思齊">贤思齊</option>
<option value="初见">初见</option>
</select>
</form>
</body>
</html>
option标签value属性.png