Html 简明教程
HTML - Forms
HTML 表单是收集用户数据的简单表单。HTML 表单具有交互式控件和各种输入类型，例如 text, numbers, email, password, radio buttons, checkboxes, buttons, 等。我们可以看到它在多个网站中的应用，包括注册表单、客户反馈表单、在线调查表以及更多内容。
HTML forms are simple form that has been used to collect data from the users. HTMl form has interactive controls and various input types such as text, numbers, email, password, radio buttons, checkboxes, buttons, etc. We can see its application in multiple sites, including registration forms, customer feedback forms, online survey forms and many more.
Why use HTML Forms?
HTML 表单用于收集来自用户的数据并将其发送到服务器。考虑我们将其表单部分合并到 HTML 网页中的场景。每当浏览器加载该页面并遇到 <form> 元素时，它将在页面中生成控件，允许用户根据控件类型输入所需信息。
An HTML form is used to collect data from the user and send it to the server. Consider a scenario where we incorporate a Form section into our HTML webpage. Whenever the browser loads that page and encounters the <form> element, it will generate controls on the page allowing users to enter the required information according to the type of control.
Create an HTML Form
HTML * <form>* 标记用于创建 HTML 表单。另有一些标记可用于创建实际表单 - 所有这些标记均在此帖子中进行了简要描述。 <form> 元素包含各个预定义的标记和元素，称为表单控件。
The HTML <form> tag is used to create an HTML form. There are a few more tags which are required to create an actual form - all those tags are briefly described in this post. The <form> element contains various predefined tags and elements termed as form controls.
HTML Forms Examples
使用较少的表单元素创建两个基本表单，表单可用于多个目的，我们应根据目的设计表单。
We create two basic form with using less form elements, a form can be used for multiple purposes, depending on the purpose we should design the form.
Creating Simple HTML Form
在以下示例中，我们将创建一个简单的 HTML 表单（登录表单），用户可以使用 <form> 元素和输入、类型和名称等表单控件输入他/她的姓名。
In the following example, we will create a simple HTML form(login form) where a user can enter his/her name with the help of <form> element and form controls like input, type and name.
<!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 教程。只有在提供名称后才会发生重定向，如果没有，该表单会提示用户输入其姓名。
In the previous example, we designed a form that accepts user input but doesn’t process the data. In this example, however, when users enter their name and click the Submit button, they will be redirected to Tutorialspoint’s HTML Tutorial. The redirection only occurs if a name is provided, if not, the form will prompt the user to enter their name.
<!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
表单元素内可使用的元素列表。所有元素均在此处进行了简要描述。
There are list of elements which can be used within the form element. All the elements are briefy described bellow.
1. HTML <form> Element
-
HTML form tag* 用于创建表单元素，此元素是所有其他表单元素的容器。表单元素不会创建表单，它的容器保留其他表单元素。
HTML form tag is used to create the form element, this element is the container for all other form elements. The form element soes not create the form it’s container that keeps the other form elements.
2. HTML <input> Element
-
HTML input tag* 是从网站收集用户输入的表单控件的基本元素，我们可以使用此标记来创建一个输入元素。
HTML input tag is an essential element of form control for gathering user input from the web sites, we can use this tag to create an input element.
3. HTML <label> Element
-
HTML label tag* 用于创建标签元素，该标签代表 UI（用户界面）中某项的标题，或向文本、文本区域、复选框、单选按钮等表单控件添加标签。
HTML label tag is used to create label element that represent a caption for an item in a UI(user interface), or to add labels to a form control like text, textarea, checkbox, radio button, etc.
4. HTML <legend> Element
-
HTML legend tag* 是元素的第一个子元素，指定 <fieldset> 标记的标题或标题。
HTML legend tag is the element’s first child, specifies the caption or title for the <fieldset> tag.
5. HTML <select> Element
-
HTML select tag* 用于创建 HTML 表单中的下拉菜单，我们可以使用此标记在任何我们想要的位置创建下拉菜单。
HTML select tag is used to create the dropdon in HTML forms, we can use this tag to create dropdown anywhere we want.
6. HTML <button> Element
-
<a>* 是一个交互式元素，用于在 HTML 中创建按钮。
HTML button Tag is an interactive element that is used to create a button in HTML.
7. HTML <fieldset> Element
-
HTML button Tag* 用于在 Web 表单中对几个控件进行分组。通过使用 <fieldset> 标签和 <legend> 标签，表单对用户来说会更容易理解。
HTML fieldset tag is used to group several controls within a web form. By using the <fieldset> tag and <legend> tag a form can be much easier to understand to the users.
8. HTML <datalist> Element
-
HTML fieldset tag* 包含一组 <option> 元素，这些元素代表推荐的一些可用选项。
HTML datalist tag contains a set of <option> elements that represent recommended options available to choose from among others.
9. HTML <output> Element
-
HTML datalist tag* 是一个灵活且未充分使用的组件，它使程序员能够动态显示计算或脚本的结果。
HTML output tag is a flexible and under used component that enables programmers to dynamically show the outcomes of calculations or scripts inside the content.
10. HTML <option> Element
-
HTML output tag* 定义数据列表的元素以进行自动完成，由 <datalist> 标签指定，或者由 <select> 标签定义的下拉列表的项。
HTML option tag defines either the elements of the data list for autocomplete, specified by the <datalist> tag, or the items of a drop-down list, defined by the <select> tag.
11. HTML <optgroup> Element
-
HTML option tag* 用于 <select> 元素中，用于将相关的 <option> 元素分组在一起。
HTML optgroup tag is used in the <select> element to group together relevant <option> elements.
12. HTML <textarea> Element
-
HTML optgroup tag* 用于 <select> 元素中，用于表示多行纯文本编辑控件。
HTML textarea tag is used to represent a multiline plain-text editing control.
HTML Form Attributes
HTML 表单元素还具有提供不同功能的属性，如重定向到其他网页和自动完成文本。要检查所有表单属性，请仔细阅读 * HTML textarea tag* 。
HTML forms element also has attributes that provide different functionalities like redirection on other web pages and auto completion of text. To check all the form attributes please go through HTML - Form Attributes.
HTML Form Example with Code
在下面的示例中，我们将使用 HTML 表单元素和每个元素所接受的属性创建一个注册表单。我们将使用一些 CSS 属性来设置表单样式，您可以从我们的免费 * HTML - Form Attributes* 中学习这些属性。
Here in this example we will create a registration form using HTML form elements and accetted attributes of each elements. Will style the form by using some CSS properties which you can learn from our free CSS Tutorial.
<!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>How does an HTML Form Work?
当用户通过点击按钮来提交表单，浏览器会创建一个信息包并将其发送给服务器。接下来，服务器会执行必要的处理，并以 HTML 网页的形式给浏览器发送回一个响应。
When users submit the form by clicking the button, the browser creates a package and forwards it to the server. Next, the server will perform the required processing and sends back a response to the browser in the form of a HTML web page.