分步表单如何实现 html

by Abhishek Jakhar

通过阿比舍克·贾卡(Abhishek Jakhar)

HTML表单入门的分步指南 (A step-by-step guide to getting started with HTML forms)

总览 (Overview)

HTML forms are required when you want to collect some data from the person who visits your website. For example, when you register/login for applications like Uber, Netflix, or Facebook, you enter information like Name, Email, and Password through HTML forms.

当您想从访问您的网站的人那里收集一些数据时，需要HTML表单。例如，当您注册/登录Uber，Netflix或Facebook之类的应用程序时，您会通过HTML 表单输入诸如Name ， Email和Password之类的信息。

Now we will learn all the required elements for creating a form.

现在，我们将学习创建表单的所有必需元素。

NOTE: I have already added the Styling using CSS and so my elements will look different, but they will work in exactly the same way.
注意：我已经使用CSS添加了样式，因此我的元素看起来会有所不同，但是它们的工作方式完全相同。

If you want to make your elements look like mine then, you can find my CSS file in the links given below:
如果要使您的元素看起来像我的元素，则可以在下面给出的链接中找到我CSS文件：

Custom CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
自定义CSS： https ： //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normalize CSS:
标准化CSS：

Normalize CSS:https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b
标准化CSS： https : //gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

表单元素 (Form Element)

This is the first element which we will learn. This element wraps all the other elements that go inside of our form. This is the form element.

这是我们将要学习的第一个要素。该元素包装了表单中所有其他元素。这是表单元素。

Our form won’t submit the data anywhere because it is not connected to a server. To connect our form to a server and process our data, we can use any server-side language like Node, Python, Ruby, or PHP. The part of processing the data involves two important attributes that are attached to the form element. Let’s take a look at those attributes.

我们的表单不会在任何地方提交数据，因为它没有连接到服务器。要将表单连接到服务器并处理数据，我们可以使用任何服务器端语言，例如Node，Python，Ruby或PHP。处理数据的部分涉及到附加到form元素的两个重要属性。让我们看一下这些属性。

Attributes:

属性：

action: The action attribute is the web address (URL) of a program that processes the information submitted by our form.
action： action属性是处理我们表单提交的信息的程序的网址(URL)。
method: It is the HTTP method that the browser uses to submit the form, the possible values are POST and GET.
method：这是浏览器用来提交表单的HTTP方法，可能的值为POST和GET。

POST — Data from the body of the form is sent to the server.
POST —表单主体中的数据发送到服务器。
GET — Data is sent inside of the URL and parameters are separated with a question mark.
GET-数据在URL内发送，参数之间用问号分隔。

Note: You cannot have forms nested inside another form. That means you cannot have a <form> element inside another<form> element.
注意： 表单不能嵌套在另一个表单中 。这意味着您不能在另一个<form>元素内包含<form>元素。

输入元素 (Input Element)

The input element is the most commonly used form element. It is used to make a text field where the user can type some information for example email, password etc.

输入元素是最常用的表单元素。它用于创建一个文本字段 ，用户可以在其中输入一些信息，例如电子邮件 ，密码等。

Let’s make a text field where the user can type in their name.

让我们创建一个文本字段，用户可以在其中输入他们的姓名。

Note: The input element is a self-closing tag, so there’s no need to type a closing tag to match the opening tag.
注意： input元素是一个自动关闭标签，因此无需键入关闭标签以匹配开始标签。

I have added three attributes in the above input tag. Let’s take a look at each one in detail.

我在上面的输入标签中添加了三个属性。让我们详细看一下每个。

type

类型

The type attribute indicates what kind of input we want. If we give a value of text to the type attribute, than what we mean here is that the value which we are entering into the input field is of type text. There are many possible values for this particular attribute. Some possible values are email, tel for telephone and password etc.

type属性指示我们想要哪种输入。如果我们给type属性提供一个text值，那么在这里我们要输入的值就是text类型。此特定属性有许多可能的值。一些可能的值是电子邮件，电话的tel和密码等。

Example: When you login into any of your accounts (Amazon/Netflix), you need to enter two things: email and password. So in this particular case the input element is used. The type attribute is given with the value of email and password respectively.

示例：登录到任何帐户(Amazon / Netflix)时，您需要输入两件事： email和password 。因此，在这种特殊情况下，将使用输入元素。 type属性分别带有email和password的值。

The ID attribute is not mandatory, but it’s a good idea to add one. In some cases, this is helpful for targeting elements with CSS/JavaScript. The ID attribute is added so that we can associate labels to specific form controls.

ID属性不是必需的，但最好添加一个。在某些情况下，这对于使用CSS / JavaScript定位元素很有帮助。添加了ID属性，以便我们可以将标签关联到特定的表单控件 。

name

名称

The name attribute is necessary. When a form is submitted to the server side code, the server can understand the form data and process the values appropriately.

名称属性是必需的。将表单提交到服务器端代码后，服务器可以理解表单数据并适当地处理值。

placeholder

占位符

It is a short hint which is displayed in the input field before the user enters a value. As the user starts typing in the input field the placeholder disappears.

这是一个简短的提示，在用户输入值之前显示在输入字段中。用户开始在输入字段中输入时，占位符消失。

Let’s see what a few other basic input elements look like.

让我们看看其他一些基本输入元素的外观。

Note: Using different values for the type attribute will produce different results. For example you can make input be of type email, text, or password etc. All of them show slightly different behaviour, which you will see below.
注意：为type属性使用不同的值将产生不同的结果。例如，您可以使输入的类型为电子邮件，文本或密码等。所有这些都显示出稍有不同的行为，您将在下面看到。

Multiple Input Elements (Text, Email, Password)

多个输入元素(文本，电子邮件，密码)

Multiple Input Element (Text, Email, Password)

多个输入元素(文本，电子邮件，密码)

Textarea元素 (Textarea Element)

Sometimes a single line of text is not enough and a simple input element won’t work. For example, some websites have a contact form for people to type their queries or messages. In these cases, it’s best to use the textarea element.

有时单行文本是不够的，简单的输入元素将无法工作。例如，某些网站具有供人们键入其查询或消息的联系表。在这种情况下，最好使用textarea元素。

The <textarea> is not a self-closing tag, so we need to type both the opening and the closing tag. (<textarea></textarea>)

<textar ea>不是自动关闭标签，因此我们需要同时输入开始标签和结束标签。 (<textarea> </ textarea>)

Attributes:

属性：

id: Same as mentioned above in <input/> element.
id：与上面<input />元素中提到的相同。
name: Same as mentioned above in <input/> element.
名称：与上面<input />元素中提到的相同。
cols: Specifies the visible width of a text area.
cols：指定文本区域的可见宽度。
rows: Specifies the visible number of lines in a text area.
行：指定文本区域中可见的行数。

You can see that the textarea allows us to type in multiple lines. A textarea is resizable by the user, you can see in the above illustration that I am resizing the textarea.

您会看到textarea允许我们键入多行。用户可以调整文本区域的大小，在上图中可以看到我正在调整文本区域的大小。

Note: In most browsers the textarea element is resizable.
注意：在大多数浏览器中， textarea元素是可调整大小的。

按钮元素 (Button Element)

The button element is one of the most important form elements. Without a button you cannot submit any form to the server for processing.

button元素是最重要的表单元素之一。没有按钮，您将无法将任何表单提交到服务器进行处理。

The button element accepts the attribute called type. This attribute accepts three values submit, reset and button.

button元素接受称为type的属性。该属性接受三个值Submit ， Reset和Button 。

Attributes:

属性：

type=”reset”: It will clear all the form data when it’s clicked.
type =“ reset”：单击后将清除 所有表单数据 。
type=”button”: It does not have any default behavior and it’s mostly used with JavaScript to program it for custom behavior.
type =“ button”：它没有任何默认行为，并且通常与JavaScript结合使用以对其进行自定义行为编程。
type=”submit”: The default behavior of the submit type is, as the name implies, submit the form and send all the data over to the server.
type =“ submit”：顾名思义，submit 类型的默认行为是提交表单并将所有数据发送到服务器。

标签元素 (Label Element)

Right now it’s impossible for the user to tell which form control does what. There’s no way to know where you will be entering the email and where you will be entering the password. The form looks very incomplete and messy.

现在，用户无法知道哪个表单控件执行什么操作。无法知道您将在哪里输入电子邮件以及您将在哪里输入密码。表格看起来非常不完整和混乱。

We can label each one of our forms controls using the label element.

我们可以使用label元素来标记我们每个窗体控件。

The most used attribute with a label is for.

带标签的最常用属性是for。

Attributes:

属性：

for: The for attribute associates the label with a particular form element. The way it matches is by ID. As you can see in the above example the value of the ID attribute given to the input element is email. The value of the for attribute given to the label element is also email, so both of them are associated with each other.
for： for属性将标签与特定表单元素相关联。匹配的方式是通过ID 。如您在上面的示例中所见，给输入元素提供的ID属性的值是email。 赋予label元素的for属性的值也是email，因此它们彼此关联。

Note: When we click on the label, we automatically get the focus to the input field which is associated with the label. This is a default behaviour.
注意：单击标签时，我们会自动将焦点移到与标签关联的输入字段。这是默认行为。

Now our form looks very good ?.

现在我们的表格看起来非常好吗？

选择菜单 (Select Menus)

Sometimes, when you’re creating a form, you don’t want the user to be able to type in the text. Rather, you might want them to pick from some preset options that you provide.

有时，当您创建表单时，您不希望用户能够输入文本。相反，您可能希望他们从您提供的一些预设选项中进行选择 。

Anytime you have a list of options that’s longer than, say, four or five things, it’s best to go with the select menu because it saves space.

任何时候您拥有的选项列表都比四，五种东西长，最好选择选择菜单，因为它可以节省空间。

Let’s say that our form is targeted for students who are going to seek admission at a university. We want to allow students to select from a predefined list of university programs.

假设我们的表格是针对打算在大学录取的学生的。我们希望允许学生从大学课程的预定义列表中进行选择。

The select menu element is made using opening and closing <select> tag.

选择菜单元素是使用打开和关闭<sele ct>标签制成的。

<select> — The select element renders a drop-down menu that contains selectable options. The select element won’t do anything, by itself. This form element actually needs additional elements inside of it, exactly like <ul> elements needs <li> elements. The elements we put inside of select element are called option elements.

<sele ct>-选择元素将显示一个包含可选选项的下拉菜单。选择元素不会做任何事情，本身。这种形式的元素实际上需要在它的内部的附加元件，恰好LIKË<UL> ELE 换货的需求<LI>元素。 我们把选择e 字元素内的元素被称为选项元素。

Attributes:

属性：

name: Same as mentioned above in <input/> element.
名称：与上面<input />元素中提到的相同。

<option> — The option element represents one of the choices that a user can choose in a select menu. The <option> element uses an attribute called value.

<opti on>-选项元素表示用户可以在选择菜单中选择的选项之一。＆l t; option>元素使用属性值。

Attributes:

属性：

value: When you submit a form to server-side code, each form element has an associated value for text inputs and text areas. That value is whatever the user types into the field. However, since we’re creating these predefined options, we need to specify what the value should look like when it’s submitted. So, we use the value attribute to specify the values to predefined options.
值：当您向服务器端代码提交表单时，每个表单元素对于文本输入和文本区域都有一个关联的值。该值是用户在字段中键入的任何值。但是，由于我们正在创建这些预定义的选项，因此我们需要指定该值在提交时的外观。因此，我们使用value属性为预定义选项指定值。

Now we have Select Courses label with the select menu which we have just created. Now, we can also organize our list into logical groups with the <optgroup> element.

现在，我们有了刚刚创建的带有选择菜单的“选择课程”标签。现在，我们还可以使用<optgro up>元素将列表组织成逻辑组。

Attributes:

属性：

label: The name of the group of options. In the example given below our list of options has been divided into two groups with the label of Engineering and Management.
标签：选项组的名称。在下面给出的示例中，我们的选项列表已分为两组，标签为Engineering and Management。

In the example given below

在下面的示例中

单选按钮 (Radio Buttons)

Select menus are great if you have lots of options. If you have something like 5 or fewer options, it’s better to use radio buttons.

如果您有很多选择，那么选择菜单会很棒。如果您有5种或更少的选项，则最好使用单选按钮。

The difference between Select Menu and Radio Button is that radio buttons show you all the options at once. Like the select menu the user can only pick from one of them.

选择菜单和单选按钮之间的区别在于单选按钮可一次显示所有选项。像选择菜单一样，用户只能从其中之一中进行选择。

Attributes:

属性：

name: Same as mentioned above in <input/> element.
名称：与上面<input />元素中提到的相同。
value: Since we’re creating these predefined options, we need to specify what the value should look like when it’s submitted. So, we use the value attribute to specify the values to predefined options.
值：由于我们正在创建这些预定义的选项，因此我们需要指定该值在提交时的外观。因此，我们使用value属性为预定义选项指定值。

Note: If you select one option and then you try to select another option, you’ll see that it deselects the previous option. The way that it knows to do that is because we have the name attribute exactly same. So it knows that these two radio buttons are part of the same group.
注意： 如果选择一个选项，然后尝试选择另一个选项，则会看到它取消选择了上一个选项。 它知道这样做的方式是因为我们拥有完全相同的name属性。 因此，它知道这两个单选按钮是同一组的一部分。

Note: Name should be the same if we want radio buttons to be a part of the same radio button group.
注意：如果我们希望单选按钮成为同一个单选按钮组的一部分，则名称应相同。

选框 (Checkboxes)

Sometimes you might have a group of predefined options. You want the user to be able to select multiple options and not just one of them. That’s where checkboxes are useful.

有时您可能有一组预定义的选项。您希望用户能够选择多个选项，而不仅仅是其中之一。这就是复选框有用的地方。

Attributes:

属性：

name: Same as mentioned above in <input/> element.
名称：与上面<input />元素中提到的相同。
value: Since we’re creating these predefined options, we need to specify what the value should look like when it’s submitted. So, we use the value attribute to specify the values to predefined options.
值：由于我们正在创建这些预定义的选项，因此我们需要指定该值在提交时的外观。因此，我们使用value属性为预定义选项指定值。
checked: By default, a checkbox input is unchecked. You can set the default state to checked by using the attribute called checked. Remember this is a boolean attribute.
选中：默认情况下，未选中复选框输入。您可以通过使用称为checked的属性将默认状态设置为checked 。请记住，这是一个布尔属性。

<input type="checkbox" checked id="name" value="abhishek" name="user_name" />

In the example given below, I have used the label for each individual option. I have connected the checkbox and a label using the for attribute of label and id attribute of the checkbox.

在下面给出的示例中，我为每个选项使用了标签。我已连接的复选框 ，并使用该 复选框的标签和id属性的属性标签。

Note: It can be hard to click a small checkbox. It is recommended to wrap a <label> element around the checkbox. If we click the label then also our checkbox gets checked or unchecked. I have not done it below, but you can do it to make the UX better.
注意： 很难单击一个小复选框。 建议在复选框周围包裹一个<label>元素。 如果单击标签，则我们的复选框也会被选中或未选中。 我下面没有做过，但是您可以做得更好，以达到UX更好的效果 。

复选框和单选按钮之间的区别 (Difference between Checkbox and Radio button)

Checkbox can exist on its own, while radio buttons can only appear as a group (minimum of 2 radio buttons should be there).
复选框可以存在于它自己的 ，而单选按钮只能出现作为一个组 (2个的单选按钮最低也要在那里)。
Selecting checkbox is optional but choosing one of the radio button is mandatory.
选择复选框是可选的 ，但选择的单选按钮的一个是强制性的 。

完整表格 (The Complete Form)

We’ve learned about lots of HTML form elements and have covered the essentials.

我们已经了解了许多HTML表单元素，并涵盖了所有要点。

Don’t worry about memorizing everything. Almost no professional web developer can name every attribute or element. What’s more important than memorization is learning how to look up things in the documentation when you need them.

不必担心记住所有内容。几乎没有专业的Web开发人员可以命名每个属性或元素。比记忆更重要的是，学习如何在需要时在文档中查找内容。

You can try adding your own CSS to make this form look the way you want it to look.

您可以尝试添加自己CSS，以使此表单看起来像您想要的样子。

You can learn more about forms in the link given below

您可以在下面的链接中了解有关表格的更多信息

HTML formsThis module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for…developer.mozilla.org

HTML表单 此模块提供了一系列文章，可帮助您掌握HTML表单。 HTML表单对于... developer.mozilla.org 是一个非常强大的工具。

I hope you’ve found this post informative and helpful. I would love to hear your feedback!

希望您发现这篇文章对您有帮助。我希望听到您的反馈！

Thank you for reading!

感谢您的阅读！