《HTML+CSS+JavaScript》之第9章 表单
9.1 表单简介
9.1.1 表单是什么
表单最重要的作用是在浏览器端收集用户的信息,然后将数据提交给服务器端来处理。
9.1.2 表单标签
form、input、textarea、select、option。
外观划分:
- 单行文本框
- 密码文本框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉列表
9.2 form标签
9.2.1 form标签简介
所有表单标签必须放在form标签内部。(与服务器无交互的表单元素可以不放在form标签内)
<form>
各种表单标签
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<form>
<input type="text" value="这是一个单行文本框"/><br/>
<textarea>这是一个多行文本框</textarea><br/>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</form>
</body>
</html>
9.2.2 form标签属性
属性 | 说明 |
---|---|
name | 表单名称,区分表单 |
method | 提交方式,指定表单数据的http提交方法,post(更安全),get |
action | 提交地址,指定表单数据提交的处理地址 |
target | 窗口打开方式 |
enctype | 表单数据提交的编码方式,一般上传文件时才需要 |
9.3 input标签
大多数表单使用input标签实现,input是自闭和标签。
- input标签的type属性取值
属性值 | 说明 |
---|---|
text | 单行文本框 |
password | 密码文本框 |
radio | 单选框 |
checkbox | 多选框 |
button、submit、reset | 按钮 |
file | 文件上传 |
9.4 单行文本框
9.4.1 单行文本框简介
常见于网站注册登录功能。
<input type="text"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名:<input type="text" />
</form>
</body>
</html>
9.4.2 单行文本框属性
属性 | 说明 |
---|---|
value | 默认显示文字 |
size | 长度,一般用CSS来控制 |
maxlength | 最多可输入字符数 |
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名:<input type="text" /><br />
姓名:<input type="text" value="helicopter"/>
姓名:<input type="text" size="20"/><br />
姓名:<input type="text" size="10"/>
姓名:<input type="text" />
姓名:<input type="text" maxlength="5"/>
</form>
</body>
</html>
9.5 密码文本框
9.5.1 密码文本框简介
外观与单行文本框相似,属性相同(value,size,maxlength等)。但输入字符不可见。
<input type="password"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号:<input type="text" /><br />
密码:<input type="password" />
</form>
</body>
</html>
9.5.2 密码文本框属性
属性 | 说明 |
---|---|
value | 默认显示文字 |
size | 长度,一般用CSS来控制 |
maxlength | 最多可输入字符数 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号:<input type="text" size="15" maxlength="10" /><br />
密码:<input type="password" size="15" maxlength="10" />
</form>
</body>
</html>
9.6 单选框
9.6.1 单选框简介
<input type="radio" name="组名" value="取值"/>
name表示单选按钮所在组名,value表示单选按钮取值,这两个属性必须设置。
一组单选按钮,只能选中其中一项。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
- checked属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" checked />男 <!--checked默认选中-->
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
9.6.2 忽略点
- 无name属性及name取值不同的单选框,可以同时选中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别(无name属性):
<input type="radio" value="男"/>男
<input type="radio" value="女"/>女<br/>
性别(有name属性):
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女<br />
性别(name取值不一样):
<input type="radio" name="gender1" value="男"/>男
<input type="radio" name="gender2" value="女"/>女<br />
年龄:
<input type="radio" name="age" value="80后" />80后
<input type="radio" name="age" value="90后" />90后
<input type="radio" name="age" value="00后" />00后
</form>
</body>
</html>
- 为了更好的语义化,表单元素与文本一般需要借助label标签关联起来。
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
//改为
<label><input type="radio" name="gender" value="男" />男</label>
<label><input type="radio" name="gender" value="女" />女</label>
一般情况下,value属性值与文本相同,value属性是为了方便JavaScript或者服务器操作数据。
所有表单元素的value属性作用都是一样的。
9.7 复选框
name表示复选按钮所在组名,value表示复选按钮取值,这两个属性必须设置。
一组复选按钮,可以选中多项。
<input type="checkbox" name="组名" value="取值"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
你喜欢的水果:<br/>
<input type="checkbox" name="fruit" value="苹果" checked/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>
9.8 按钮
9.8.1 普通按钮button
配合JavaScript进行各种操作。
<input type="button" value="取值"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function () {
alert("I ❤ HTML!");
};
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="表白"/>
</form>
</body>
</html>
9.8.2 提交按钮submit
给服务器提交数据,针对当前form标签而言。
<input type="submit" value="取值"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>
9.8.3 重置按钮reset
清除用户在表单中输入的内容,针对当前form标签而言。
<input type="reset" value="取值"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号:<input type="text" /><br />
密码:<input type="password" /><br />
<input type="reset" value="重置" /><br />
</form>
昵称:<input type="text" />
</body>
</html>
9.8.4 button标签
基本不会用到button标签。
<button></button>
9.9 文件上传
<input type="file"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="file"/>
</form>
</body>
</html>
9.10 多行文本框
输入多行文本,默认显示文本在标签对的内部设置,而不是value属性中设置。
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
个人简介:<br/>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
</form>
</body>
</html>
9.11 下拉列表
9.11.1 下拉列表简介
select和option标签对配合使用表示,可看成特殊的无序列表。
<select>
<option>选项内容</option>
<option>选项内容</option>
</select>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select>
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
</select>
</form>
</body>
</html>
9.11.2 select标签属性
- multiple,设置可选择多项(Ctrl+鼠标左键)。
- size,设置显示几个列表项,取值整数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select size="5" multiple> <!--chrome要求size最少4-->
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
</form>
</body>
</html>
9.11.3 option标签属性
- selected,是否选中。
- value,选项值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select size="5">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="jQuery">jQuery</option>
<option value="JavaScript" selected>JavaScript</option>
<option value="vue.js">Vue.js</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
</select>
</form>
</body>
</html>