Html 简明教程
HTML - Forms
HTML 表单是收集用户数据的简单表单。HTML 表单具有交互式控件和各种输入类型，例如 text, numbers, email, password, radio buttons, checkboxes, buttons, 等。我们可以看到它在多个网站中的应用，包括注册表单、客户反馈表单、在线调查表以及更多内容。
Why use HTML Forms?
HTML 表单用于收集来自用户的数据并将其发送到服务器。考虑我们将其表单部分合并到 HTML 网页中的场景。每当浏览器加载该页面并遇到 <form> 元素时，它将在页面中生成控件，允许用户根据控件类型输入所需信息。
Create an HTML Form
HTML * <form>* 标记用于创建 HTML 表单。另有一些标记可用于创建实际表单 - 所有这些标记均在此帖子中进行了简要描述。 <form> 元素包含各个预定义的标记和元素，称为表单控件。
HTML Forms Examples
使用较少的表单元素创建两个基本表单，表单可用于多个目的，我们应根据目的设计表单。
Creating Simple HTML Form
在以下示例中，我们将创建一个简单的 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 form with Redirection
在前面的示例中，我们设计了一个接受用户输入但不处理数据的表单。但在此示例中，当用户输入其姓名并单击提交按钮时，它们将重定向到 Tutorialspoint 的 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 Form Elements
表单元素内可使用的元素列表。所有元素均在此处进行了简要描述。
1. HTML <form> Element
-
HTML form tag* 用于创建表单元素，此元素是所有其他表单元素的容器。表单元素不会创建表单，它的容器保留其他表单元素。
2. HTML <input> Element
-
HTML input tag* 是从网站收集用户输入的表单控件的基本元素，我们可以使用此标记来创建一个输入元素。
3. HTML <label> Element
-
HTML label tag* 用于创建标签元素，该标签代表 UI（用户界面）中某项的标题，或向文本、文本区域、复选框、单选按钮等表单控件添加标签。
4. HTML <legend> Element
-
HTML legend tag* 是元素的第一个子元素，指定 <fieldset> 标记的标题或标题。
5. HTML <select> Element
-
HTML select tag* 用于创建 HTML 表单中的下拉菜单，我们可以使用此标记在任何我们想要的位置创建下拉菜单。
6. HTML <button> Element
-
<a>* 是一个交互式元素，用于在 HTML 中创建按钮。
7. HTML <fieldset> Element
-
HTML button Tag* 用于在 Web 表单中对几个控件进行分组。通过使用 <fieldset> 标签和 <legend> 标签，表单对用户来说会更容易理解。
8. HTML <datalist> Element
-
HTML fieldset tag* 包含一组 <option> 元素，这些元素代表推荐的一些可用选项。
9. HTML <output> Element
-
HTML datalist tag* 是一个灵活且未充分使用的组件，它使程序员能够动态显示计算或脚本的结果。
10. HTML <option> Element
-
HTML output tag* 定义数据列表的元素以进行自动完成，由 <datalist> 标签指定，或者由 <select> 标签定义的下拉列表的项。
11. HTML <optgroup> Element
-
HTML option tag* 用于 <select> 元素中，用于将相关的 <option> 元素分组在一起。
12. HTML <textarea> Element
-
HTML optgroup tag* 用于 <select> 元素中，用于表示多行纯文本编辑控件。
HTML Form Attributes
HTML 表单元素还具有提供不同功能的属性，如重定向到其他网页和自动完成文本。要检查所有表单属性，请仔细阅读 * HTML textarea tag* 。
HTML Form Example with Code
在下面的示例中，我们将使用 HTML 表单元素和每个元素所接受的属性创建一个注册表单。我们将使用一些 CSS 属性来设置表单样式，您可以从我们的免费 * HTML - Form Attributes* 中学习这些属性。
<!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>