HTML - 表单

上一页
下一页

HTML 表单是用于从用户那里收集数据的简单表单。HTMl 表单具有交互式控件和各种输入类型，例如文本、数字、电子邮件、密码、单选按钮、复选框、按钮等。我们可以在多个站点上看到它的应用，包括注册表、客户反馈表、在线调查表等等。

为什么要使用HTML表单？

HTML 表单用于从用户收集数据并将其发送到服务器。考虑将表单部分合并到 HTML 网页中的场景。每当浏览器加载该页面并遇到 <form> 元素时，它将在页面上生成控件，允许用户根据控件类型输入所需的信息。

创建 HTML 表单

HTML <form> 标签用于创建 HTML 表单。创建实际表单还需要一些标签 - 所有这些标签都在这篇文章中简要描述。<form> 元素包含各种预定义的标记和称为表单控件的元素。

语法  


<form action = "Script URL" method = "GET|POST">
	 form controls like input, textarea etc.
</form>

尝试运行以下 HTML 代码以查看输出。

HTML 表单示例

我们使用较少的表单元素创建两个基本表单，一个表单可以用于多种目的，具体取决于我们应该设计表单的目的。

创建简单的 HTML 表单

在下面的示例中，我们将创建一个简单的 HTML 表单（登录表单），用户可以在其中借助 <form> 元素和表单控件（如输入、类型和名称）输入他/她的名字。


<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>Sample HTML Form </title>
</head>
<body>
		<!-- Start of the form element -->
		<form action = " ">
			 <!-- various form controls -->
			 <label for="first_name">First name:</label>
			 <input type = "text" name = "first_name" />
			 <br><br>
			 <label for="first_name">Last name:</label>
			 <input type = "text" name = "last_name" />
			 <br><br>
			 <input type = "submit">
		</form>
</body>
</html>

带有重定向的 HTML 表单

在前面的示例中，我们设计了一个接受用户输入但不处理数据的表单。但是，在此示例中，当用户输入其姓名并单击“提交”按钮时，他们将被重定向到 qikepu 的 HTML 教程。仅当提供名称时才会发生重定向，否则，表单将提示用户输入其名称。


<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>Sample HTML Form </title>
</head>
<body>
		<!-- Start of the form element -->
		<form action = "" method = "post">
			 <!-- various form controls -->
			 <label for="first_name">First name:</label>
			 <input type = "text" name = "first_name" required/>
			 <br><br>
			 <label for="first_name">Last name:</label>
			 <input type = "text" name = "last_name" required/>
			 <br><br>
			 <input type = "submit">
		</form>
</body>
</html>

HTML 表单元素

有可以在表单元素中使用的元素列表。所有元素都在下面简要描述。

1. HTML <form> 元素

HTML <form>标签用于创建表单元素，此元素是所有其他表单元素的容器。表单元素不会创建表单，而是保留其他表单元素的容器。

语法  


<form>.....</form>

2. HTML <input> 元素

HTML <input>标签是表单控件的基本元素，用于从网站收集用户输入，我们可以使用此标签来创建输入元素。

语法  


<input type = ".."/>

3. HTML <label> 元素

HTML <label>标签用于创建表示 UI（用户界面）中项的标题的标签元素，或将标签添加到表单控件（如文本、文本区域、复选框、单选按钮等）。

语法  


<label>.......</label>

4. HTML <legend> 元素

HTML <legend>标签是元素的第一个子元素，指定 <fieldset> 标记的标题或标题。

语法  


<legend>.......</legend>

5. HTML <select> 元素

HTML <select>标签用于在 HTML 表单中创建下拉菜单，我们可以使用此标签在我们想要的任何地方创建下拉列表。

语法  


<select>....</select>

6. HTML <button> 元素

HTML <button>标签是一个交互式元素，用于在 HTML 中创建按钮。

语法  


<button>Button</button>

7. HTML <fieldset> 元素

HTML <fieldset>标签用于对 Web 窗体中的多个控件进行分组。通过使用 <fieldset> 标记和 <legend> 标记，用户可以更容易地理解表单。

语法  


<fieldset>....</fieldset>

8. HTML <datalist> 元素

HTML <datalist>标签包含一组 <option> 元素，这些元素表示可供选择的推荐选项。

语法  


<datalist>....</datalist>

9. HTML <output> 元素

HTML <output>标签是一个灵活且未被充分利用的组件，它使程序员能够在内容中动态显示计算或脚本的结果。

语法  


<output> Results... </output>

10. HTML <option> 元素

HTML <option>标签定义自动完成数据列表的元素（由 <datalist> 标记指定）或下拉列表的项（由 <select> 标记定义。

语法  


<option>.....</option>

11. HTML <optgroup> 元素

HTML <optgroup>标签在 <select> 元素中用于将相关的 <option> 元素组合在一起。

语法  


<optgroup> <option>..</option> . . </optgroup>

12. HTML <textarea> 元素

HTML <textarea>标签用于表示多行纯文本编辑控件。

语法  


<textarea>.......</textarea>

HTML 表单属性

HTML 表单元素还具有提供不同功能的属性，例如在其他网页上的重定向和文本的自动完成。要检查所有表单属性，请通过 HTML - 表单属性。

带代码的 HTML 表单示例

在此示例中，我们将使用 HTML 表单元素和每个元素的 accetted 属性创建一个注册表单。将使用一些 CSS 属性来设置表单的样式，您可以从我们的免费 CSS 教程中学习这些属性。


<!DOCTYPE html>
<html>
		<head>
				<title>HTML Form</title>
				<style>
						body {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 100vh;
								background-color: #f0f0f0;
						}

						form {
								width: 600px;
								background-color: #fff;
								padding: 20px;
								border-radius: 8px;
								box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
						}

						fieldset {
								border: 1px solid black;
								padding: 10px;
								margin: 0;
						}

						legend {
								font-weight: bold;
								margin-bottom: 10px;
						}

						label {
								display: block;
								margin-bottom: 5px;
						}

						input[type="text"],
						input[type="email"],
						input[type="password"],
						textarea {
								width: calc(100% - 20px);
								padding: 8px;
								margin-bottom: 10px;
								box-sizing: border-box;
								border: 1px solid #ccc;
								border-radius: 4px;
						}
						input[type="submit"] {
								padding: 10px 20px;
								margin-left: 475px;
								border-radius: 5px;
								cursor: pointer;
								background-color: #04af2f;
						}
				</style>
		</head>
		<body>
				<form>
						<fieldset>
								<legend>
										Registration Form
								</legend>
								<label>First Name</label>
								<input type="text" name="FirstName" />
								<label>Last Name</label>
								<input type="text" name="LastName" />
								<label>Email id</label>
								<input type="email" name="email"/>
								<label>Enter your password</label>
								<input type="password" name="password"/>
								<label>Confirm your password</label>
								<input type="password"name="confirmPass"/>
								<label>Address</label>
								<textarea name="address"></textarea>
								<input type="submit" value="Submit"/>
						</fieldset>
				</form>
		</body>
</html>

HTML 表单如何工作？

当用户通过单击按钮提交表单时，浏览器将创建一个包并将其转发到服务器。接下来，服务器将执行所需的处理，并以 HTML 网页的形式将响应发送回浏览器。

本页
上一页
下一页