web前端学习（十）——HTML5中网页表单的相关标签设置

★★光亭★★

已于 2024-04-24 11:23:42 修改

阅读量8.7k

点赞数 4

分类专栏： # 【HTML+CSS+JavaScript】文章标签：前端学习 html5

于 2020-12-28 21:24:41 首次发布

本文链接：https://blog.csdn.net/weixin_43823808/article/details/111874013

版权

【HTML+CSS+JavaScript】专栏收录该内容

48 篇文章 55 订阅

订阅专栏

1.表单标签

表单主要用于收集网页上浏览者的相关信息，其标签为：<form>...</form>，其基本语法格式如下：👇👇👇

<form action="url" method="get" enctype="mime">
</form>

其中，action中的内容指定处理提交表单的格式，它可以是一个URL地址或者一个电子邮件地址。method中的内容指明提交表单的HTTP方法。enctype中的内容指明用来把表单提交给服务器时的互联网媒体形式。

简单的实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			下面是用户登录信息
			<br/>
			用户名称
			<input type="text" name="user"/>
			<br/>
			用户密码
			<input type="password" name="password"/>
			<br/>
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

2.文字字段

2.1 单行文本输入框（text）

文本框是一种让访问者自己输入内容的表单对象，通常用来填写单个字或者简单的回答，代码格式如下：👇👇👇

<input type="text" name="..." size="..." maxlength="..." value="...">

其中，type="text"定义单行文本输入框。

name属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。

size属性定义文本框的宽度，单位是单个字符宽度。

maxlength属性定义最多输入的字符数。

value属性定义文本框的初始值。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请输入您的姓名
			<input type="text" name="yourname" size="20" maxlength="15"/>
			<br/>
			请输入您的地址
			<input type="text" name="youraddress" size="20" maxlength="15"/>
		</form>
	</body>
</html>

2.2 多行文本输入框（textarea）

多行文本输入框主要用于输入较长的文本信息，代码格式如下：👇👇👇

<textarea name="..." cols="..." rows="..." wrap="...">
</textarea>

其中，name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。

cols属性定义多行文本框的宽度；rows属性定义多行文本框的高度。

wrap属性定义输入内容大于文本域时的显示方式。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请简述您最近的学习情况<br/>
			<textarea name="yourstudy" cols="50" rows="10"></textarea>
			<br/>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

2.3 密码域（password）

密码输入是一种特殊的文本域，主要用于输入一些保密信息。当网页浏览者输入文本时，显示的是黑点或者其他符号，这样就增加了输入文本的安全性。代码格式如下：👇👇👇

<input type="password" name="..." size="..." maxlength="..."/>

其中，type="password"定义密码框。name属性定义密码框的名称，要保证唯一性。

size属性定义密码框的宽度。maxlength属性定义最多输入的密码字符数。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			用户姓名：
			<input type="text" name="yourname"/><br/>
			登录密码：
			<input type="password" name="yourpassword"/><br/>
		</form>
	</body>
</html>

2.4 单选按钮（radio）

单选按钮主要是让网页浏览者在一组选项里选择一个。代码格式如下：👇👇👇

<input type="radio" name="..." value="..."/>

其中，type="radio"定义单选按钮。

name属性定义单选按钮的名称，单选按钮都是以组为单位使用的，在同一组中的单选选项都必须使用同一个名称。

value属性定义单选按钮的名称，在同一组中，它们的值必须是不同的。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请选择您感兴趣的图书类型：<br/>
			<input type="radio" name="book" value="Book1"/>网站编程<br/>
			<input type="radio" name="book" value="Book2"/>办公软件<br/>
			<input type="radio" name="book" value="Book3"/>设计软件<br/>
			<input type="radio" name="book" value="Book4"/>网络管理<br/>
			<input type="radio" name="book" value="Book5"/>黑客攻防<br/>
		</form>
	</body>
</html>

2.5 复选框（checkbox）

复选框主要是让网页浏览者在一组选项里同时选择多个选项（也即多选框），每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码格式如下：👇👇👇

<input type="checkbox" name="..." value="..."/>

其中，type="checkbox"定义复选框。

name属性定义复选框的名称，在同一组中的复选框都必须用同一个名称。

value属性定义复选框的值。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请选择您感兴趣的图书类型：<br/>
			<input type="checkbox" name="book" value="Book1"/>网站编程<br/>
			<input type="checkbox" name="book" value="Book2"/>办公软件<br/>
			<input type="checkbox" name="book" value="Book3"/>设计软件<br/>
			<input type="checkbox" name="book" value="Book4"/>网络管理<br/>
			<input type="checkbox" name="book" value="Book5"/>黑客攻防<br/>
		</form>
	</body>
</html>

2.6 下拉菜单

使用 select + option 可以创建单选或多选下拉菜单。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<select>
			<option>列表1</option>
			<option>列表2</option>
			<option>列表3</option>
			<option>列表4</option>
		</select>
	</body>
</html>

在运行结果中，点击下拉菜单的小箭头，即可看到我们设置的下拉菜单中的几个选项：列表1、列表2、列表3、列表4。

2.7 列表框

列表框主要用于在有限的空间里设置多个选项，即可用作单选，也可用作多选。代码格式如下：👇👇👇

<select name="..." size="..." multiple>
<option value="..." selected>...</option>
</select>

其中，size属性定义下拉选择框的行数。name属性定义下拉选择框的名称。

multiple属性表示可以多选，如果不设置本属性，那么只能单选。

value属性定义选择项的值。selected属性表示默认已经选择本选项。具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请选择您感兴趣的图书类型：<br/>
			<select name="book" size="3" multiple>
				<option value="Book1" selected>网站编程</option>
				<option value="Book2">办公软件</option>
				<option value="Book3">设计软件</option>
				<option value="Book4">网络管理</option>
				<option value="Book5">黑客攻防</option>
			</select>
		</form>
	</body>
</html>

2.8 普通按钮（button）

普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下：👇👇👇

<input type="button" name="..." value="..." onclick="...">

其中，type="button"定义普通按钮。name属性定义普通按钮的名称。value属性定义按钮的显示文字。

onclick属性表示单击行为，也可以是其他的事件，通过指定脚本函数来定义按钮的行为。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			点击下面的按钮，把文本框1中的内容复制到文本框2中：<br/>
			文本框1：<input type="text" id="field1" value="学习HTML的技巧"/><br/>
			文本框2：<input type="text" id="field2"/><br/>
			<input type="button" name="..." value="点击我" onclick="document.getElementById('field2').value
				=document.getElementById('field1').value"/>
		</form>
	</body>
</html>

上图的运行结果中，在文本框1中输入相应的内容，之后点击下面的按钮“点击我”即可将文本框1的内容复制到文本框2中。

2.9 提交按钮（submit）

提交按钮用来将输入的信息提交到服务器。代码格式如下：👇👇👇

<input type="submit" name="..." value="..."/>

其中，type="submit"定义提交按钮。name属性定义提交按钮的名称。

value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form action="https://www.baidu.com" method="get">
			请输入你的姓名：
			<input type="text" name="name"/><br/>
			请输入你的电话：
			<input type="text" name="telephone"/><br/>
			请输入你的身份证号：
			<input type="text" name="IDCard"/><br/>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

在以上三个文本框中输入相应的内容，之后点击“提交”按钮，即可实现将表单中的数据发送百度的首页（action="百度一下，你就知道"）。

2.10 重置按钮（reset）

重置按钮用来重置表单中输入的信息。代码格式如下：👇👇👇

<input type="reset" name="..." value="..."/>

其中，type="reset"定义重置按钮。name属性定义重置按钮的名称。value属性定义按钮的显示文字。

具体实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML简单学习</title>
	</head>
	
	<body>
		<form>
			请输入用户名称：
			<input type="text" name="name"/><br/>
			请输入用户密码：
			<input type="password" name="password"/><br/>
			<input type="submit" value="登录"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>