表单标签

表单通过 <form> 标签定义，其结束标签为 </form> 。

表单用来收集不同类型的用户输入，包括：文本框、密码框、单选框、复选框、下拉列表等。

表单实例

创建文本框

本例演示如何在 HTML 页面创建文本框，用户可以在文本框中写入文本。

创建密码框

本例演示如何创建 HTML 的密码框，输入的密码不会明文显示，而是以替代符号显示。

表单标签

New：HTML5 新标签。

标签	属性	属性值	描述
<form>：表单	action		定义表单向哪里提交
	method	get	采用 get 方式提交表单数据
	method	post	采用 post 方式提交表单数据
<input>：输入元素	type	text	文本框
		password	密码框
		radio	单选框
		checkbox	复选框
		submit	提交按钮
		reset	重置按钮
		button	普通按钮
		image	图像按钮： src 属性定义图像的地址 alt 属性定义一串预备的可替换的文本 width 和 height 属性分别定义图像的宽高
		file	文件域
	name		定义输入元素的名称
	value		定义输入元素的内容
	size		定义输入元素的宽度
	maxlength		定义输入元素可容纳字符的最大长度
	disabled	disabled	禁用输入元素（值可以省略）
	checked	checked	定义默认选择的按钮（值可以省略）
<select> ：下拉列表	name		定义下拉列表的名称
<select> ：下拉列表	disabled	disabled	禁用下拉列表（值可以省略）
<option>：下拉列表项	value		定义列表项的实际值
	selected	selected	定义默认选中的列表项（值可以省略）
	disabled	disabled	禁用下拉列表项（值可以省略）
<textarea>：文本域	rows		定义文本域的行
	rols		定义文本域的列
	disabled	disabled	禁用文本域（值可以省略）
<field>			定义了一组相关的表单元素，并使用外框包含起来
<legend>			定义了 fieldset 元素的标题
<datalist>New			指定一个预先定义的输入控件选项列表
<keygen>New			定义了表单的密钥对生成器字段
<output>New			定义一个计算结果

input - 文本框

文本框用 <input type="text"> 定义，一个文本框默认宽度是 20 个字符。

文本框的可用属性：

name 属性定义文本框的名称。
value 属性定义文本框的内容，内容会在文本框里显示出来。
size 属性定义文本框的宽度。
maxlength 属性定义文本框可容纳字符的最大长度。
disabled 属性禁用文本框。

演示如何在 HTML 页面创建文本框，可以在文本框中写入文本：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>创建文本框</title>
	</head>
	<body>
		<form action="">
			First name: <input type="text" name="firstname" /><br />
			
			<!-- 设置容纳字符最大长度为15 -->
			Last name: <input type="text" name="lastname" maxlength="15" /><br />
			
			<!-- 设置文本框宽度为50个字符 -->
			Email：<input type="text" name="email" size="50" /><br />
			
			<!-- 禁用此文本框 -->
			Address：<input type="text" name="address" disabled="disabled" /><br />
			
			<!-- 文本框内容为：China -->
			Country: <input type="text" name="country" value="China" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

disabled 属性禁用文本框通常写做 disabled="disabled"，但也可以简写为 disabled 。

input - 密码框

密码框用 <input type="password"> 定义，一个密码框默认宽度是 20 个字符。

密码框的可用属性：

name 属性定义密码框的名称。
value 属性定义密码框的内容，内容会在密码框内以星号（*）或者圆点（●）显示。
size 属性定义密码框的宽度。
maxlength 属性定义密码框可容纳字符的最大长度。
disabled 属性禁用密码框。

演示如何创建 HTML 的密码框，输入的密码不会直接显示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>创建密码框</title>
	</head>
	<body>
		<form action="">
			Username: <input type="text" name="user" /><br />
			
			<!-- 设置密码最长18位 -->
			Password: <input type="password" name="password" maxlength="18" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

input - 单选按钮

单选按钮用 <input type="radio"> 定义。

单选按钮的可用属性：

name 属性定义单选按钮的名称，名称相同则归为一组，同一组内的单选按钮互斥，只能单选。名称不同的单选按钮归为不同组，可同时选择。
value 属性定义单选按钮勾选后获取到的内容，内容不会直接显示在页面上。
disabled 属性禁用单选按钮。
checked 属性定义默认勾选的单选按钮。

演示如何创建 HTML 的单选按钮：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>单选按钮</title>
	</head>
	<body>
		<form action="">
			<input type="radio" name="sex" value="Male" /> 男<br />
			
			<!-- 默认选择女 -->
			<input type="radio" name="sex" value="Female" checked="checked" /> 女
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

checked 属性定义默认选择的按钮，通常写做 checked="checked"，但也可以简写为 checked 。

input - 复选框

复选框用 <input type="checkbox"> 定义，可以同时选择一个或多个。

复选框的可用属性：

name 属性定义复选框的名称，名称相同则归为一组，同一组内可选择一个或多个。
value 属性定义复选框勾选后获取到的内容，内容不会直接显示在页面上。
disabled 属性禁用复选框。
checked 属性定义默认勾选的复选框。

演示如何创建 HTML 的复选框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>复选框</title>
	</head>
	<body>
		<form action="">
			<input type="checkbox" name="hobby" value="football" /> 足球 <br />
			
			<!-- 默认选中篮球 -->
			<input type="checkbox" name="hobby" value="basketball" checked="checked" /> 篮球
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

input - 提交按钮

提交按钮用 <input type="submit"> 定义。

提交按钮的可用属性：

name 属性定义提交按钮的名称。
value 属性定义提交按钮的内容，内容会显示在按钮上。
disabled 属性禁用提交按钮。

当用户单击确认按钮时，表单的内容会被传送到另一个文件，即动作属性 action 里定义的位置。

由动作属性 action 定义的文件通常会对接收到的输入数据进行相关的处理。

演示如何创建 HTML 的提交按钮：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提交按钮</title>
	</head>
	<body>
		<form action="html_form_action.php">
			Username: <input type="text" name="user" />
			<input type="submit" name="submit" value="提交" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

input - 重置按钮

重置按钮用 <input type="reset"> 定义。

重置按钮的可用属性：

name 属性定义重置按钮的名称。
value 属性定义重置按钮的内容，内容会显示在按钮上。
disabled 属性禁用重置按钮。

当点击重置按钮的时候，会将表单中的所有元素恢复到默认状态。

重置按钮示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>重置按钮</title>
	</head>
	<body>
		<form action="">
			Username：<input type="text" name="user" />
			<input type="reset" name="reset" value="重置" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

往 Username 输入框里写入内容，点击重置按钮，内容会被清空。

input - 普通按钮

普通按钮用 <input type="button"> 定义。

普通按钮的可用属性：

name 属性定义普通按钮的名称。
value 属性定义普通按钮的内容，内容会显示在按钮上。
disabled 属性禁用普通按钮。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>创建普通按钮</title>
	</head>
	<body>
		<form action="">
			<input type="button" name="button" value="普通按钮" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

可以通过 JavaScript 对按钮添加事件，比如单击、双击事件等。

input - 图像按钮

图像按钮用 <input type="image"> 定义。

图像按钮的可用属性：

src 属性定义图像的地址。
alt 属性定义一串预备的可替换的文本，当图像不能正常显示时，用此文本替换。
width 和 height 属性分别定义图像的宽高。
disabled 属性禁用图像按钮。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图像按钮</title>
	</head>
	<body>
		<form action="">
			<input type="image" src="img/head/3.jpg" alt="开心" width="100px" height="100px" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

图像按钮与提交按钮的作用相同，点击图像按钮后，表单的内容会被传送到另一个文件，即动作属性 action 里定义的位置。

input - 文件域

文件域用 <input type="file"> 定义，文件域可以提供选择文件的窗口。

文件域的可用属性：

disabled 属性禁用文件域。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文件域</title>
	</head>
	<body>
		<form action="">
			<input type="file" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

select - 下拉列表

下拉列表用 <select> 标签定义，下拉列表项用 <option> 标签定义。

下拉列表的可用属性：

value 属性定义列表项的内容（实际值），内容不会直接显示在页面上。
selected 属性定义默认选中的列表项。
disabled 属性禁用下拉列表或者下拉列表项。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉列表</title>
	</head>
	<body>
		<form action="">
			<select name="cars">
				<option value="volvo">沃尔沃</option>
				<option value="BMW">宝马</option>
				<option value="Porsche">保时捷</option>
				<option value="Hongqi" selected="selected">红旗</option>
			</select>
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

selected 属性定义默认选中的列表项通常写做 selected="selected"，但也可以简写为 selected 。

textarea - 文本域

文本域用 <textarea> 标签定义，与文本框不同，文本域可以输入多行内容。

文本域的可用属性：

rows 属性定义文本域初始化时能够容纳的行的数量。
cols 属性定义文本域初始化时能够容纳的列的数量。
disabled 属性禁用文本域。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本域</title>
	</head>
	<body>
		<form action="">
			<textarea rows="10" cols="30">这是一个文本域</textarea>
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

表单的外框与标题

HTML 的表单元素可以使用外框包裹起来，外框通过 <fieldset> 标签定义，外框的标题通过 <legend> 标签定义。

<fieldset> 标签可以将表单内的相关元素分组，并在相关表单元素周围绘制边框。

<legend> 标签为 <fieldset> 标签定义标题。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>笔记本代码(bjbcode.com)</title>
	</head>
	<body>
		<form action="">
			<fieldset>
				<legend>Personal information:</legend>
				Name: <input type="text" size="30"><br>
				E-mail: <input type="text" size="30"><br>
				Date of birth: <input type="text" size="10">
			</fieldset>
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

label 标签与表单

<label> 标签用于为表单元素定义标注——即显示在表单元素旁边的说明性文字。

用 <label> 标签定义的标注，从显示上看与其他文本毫无差异。

不过，它为用户增强了可用性：当用户点击由 <label> 标签定义的标注时，与该标注关联的表单元素将获得焦点。

一般情况下，需要点击表单元素本身才能获得焦点。

但更多的时候，为了方便快速的操作，我们想要点击表单元素前后的文字描述，就能对表单元素进行操作，这个时候就需要用到 <label> 标签。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用 label 标签定位表单元素</title>
	</head>
	<body>
		<form action="">
			<!-- 通过 <label> 标签对里面的表单元素进行定位 -->
			<label>Username: <input type="text" name="user" /></label>
			<br />
			<!-- 通过 <label> 标签和 id属性 对外面的表单元素进行定位 -->
			<label for="pwd">Password: </label>
			<input type="password" name="password" id="pwd" />
		</form>
	</body>
</html>

尝试一下

在浏览器中显示为：

有用的提示

<button> 内部可以放置文本、图像、多媒体等内容，<input type="button"> 只能放置文本。
如果在 HTML 表单中使用 <button>，不同的浏览器会提交不同的按钮值，所以请使用 <input type="button"> 在 HTML 表单中创建按钮。

学习笔记

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<!-- 表单 -->
		<!-- target属性的值有：_self:原窗口打开，_blank:新窗口打开，_top:顶框架，_parent:父框架 -->
		<form name="表单名称" action="Demo.html" method="post/get" target="_blank">
			<!-- fieldset：让表单带边框，是html5标签，ie9以下不支持 -->
			<fieldset>
				<!-- legend：在边框上显示表单标题 -->
				<legend>my practice form</legend>
				<!-- input是行内块元素（所以无需设置display:block/inline-block就可以设置宽高），text文本框，value内容，placeholder占位内容：一般是单行，autofocus自动获得光标焦点，required表示必填，accesskey通过按下alt+s键将光标定位到输入框 -->
				<!-- placeholder/autofocus/required/accesskey是html5标签，ie9以下不支持 -->
				<input type="text" value="" placeholder="问候语" autofocus="autofocus" required="required" accesskey="s"><br />
				<!-- password密码框，maxlength表示可以输入的字符的最大长度 -->
				<input type="password" maxlength="6"><br />
				<!-- radio单选框，name单选框名称(名称一样的单选框就是同一组，会互斥)，checked是否默认选中 -->
				<input type="radio" name="sex" checked="checked">男
				<input type="radio" name="sex">女<br />
				<!-- checkbox复选框，name复选框名称，checked是否默认选中，上网 复选框内容 -->
				<input type="checkbox" name="hobby" checked="checked">上网
				<input type="checkbox" name="hobby">学习<br />
				<!-- file文件域（打开选择文件的窗口）,multiple可以多选文件(是html5标签，ie9以下不支持)-->
				<input type="file" multiple><br/>
				<!-- button普通按钮，value按钮显示的内容，disabled按钮不可点击 -->
				<input type="button" value="确认" disabled="disabled"><br />
				<!-- submit提交按钮，value按钮显示的内容：通常一个表单只有一个提交按钮，点击后会将内容提交给action属性里的对象 -->
				<input type="submit" value="提交"><br />
				<!-- reset重置按钮，value按钮显示的内容：点击后会将表单恢复到默认状态 -->
				<input type="reset" value="重置"><br/>
				<!-- image图像按钮，src图像的路径，按钮宽，按钮高 -->
				<input type="image" src="../img/2.png" width="20" height="20"><br />
				<!-- 邮箱输入框，会自动校验输入的是不是邮箱格式，是html5标签，ie9以下不支持 -->
				<input type="email">
				<!-- 手机号输入框，会自动校验输入的是不是手机号，是html5标签，ie9以下不支持 -->
				<input type="tel">
				<!-- 网址输入框，会自动校验输入的是不是网址，是html5标签，ie9以下不支持 -->
				<input type="url">
				<!-- 数字输入框，会自动校验输入的是不是数字，是html5标签，ie9以下不支持 -->
				<input type="number">
				<!-- 搜索框框(输入内容后，会出现一个删除符号)，是html5标签，ie9以下不支持 -->
				<input type="search">
				<!-- 能够拖动滑块，是html5标签，ie9以下不支持 -->
				<input type="range">
				<!-- 时间输入框，是html5标签，ie9以下不支持 -->
				<input type="time">
				<!-- 日期输入框，是html5标签，ie9以下不支持 -->
				<input type="date">
				<!-- 时间日期输入框，是html5标签，ie9以下不支持 -->
				<input type="datetime">
				<!-- 月份输入框，是html5标签，ie9以下不支持 -->
				<input type="month">
				<!-- 星期输入框，是html5标签，ie9以下不支持 -->
				<input type="week">
				<!-- 预先定义选项的文本框 -->
				<input list="fruits" name="shuiguo">
				<datalist id="fruits">	<!-- datalist，是html5标签，ie9以下不支持 -->
					<option value="orange">橙子</option>
					<option value="banana">香蕉</option>
					<option value="lemon">柠檬</option>
					<option value="apple">苹果</option>
				</datalist><br/>
				<!-- 下拉列表 -->
				<select>
					<option value="beijing">北京</option>
					<!-- selected的作用是默认选中，或者写成：selected="selected" -->
					<option value="shanghai" selected>上海</option>
				</select><br/>
				<!-- 多选的下拉列表 -->
				<select multiple>
					<!-- selected的作用是默认选中，或者写成：selected="selected" -->
					<option value="beijing">北京</option>
					<option value="shanghai" selected>上海</option>
				</select><br />
				<!-- 定义选项组 -->
				<select>
					<optgroup label="数字">
						<option>111</option>
						<option>222</option>
						<option>333</option>
					</optgroup>
					<optgroup label="字母">
						<option>aaa</option>
						<option>bbb</option>
						<option>ccc</option>
					</optgroup>
				</select><br />
				<!-- 文本域（不支持富文本），4行5列（一般不用rows和cols来设置文本域的宽高，而是用css设置） -->
				<textarea rows="4" cols="5" placeholder="请输入内容"></textarea><br />
				<!-- label标签可以用来显示一段文字 -->
				<label>我是label标签</label><br />
			</fieldset>
		</form>
		<!-- input标签也可以不放在form里面 -->
		<input type="button" value="确定"><br/>
	</body>
</html>

Bjb Code

表单标签

表单实例

表单标签

input - 文本框

input - 密码框

input - 单选按钮

input - 复选框

input - 提交按钮

input - 重置按钮

input - 普通按钮

input - 图像按钮

input - 文件域

select - 下拉列表

textarea - 文本域

表单的外框与标题

label 标签与表单

有用的提示

学习笔记