分步表单如何实现 html_HTML表单入门的分步指南

分步表单如何实现 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:

属性：

1. action: The action attribute is the web address (URL) of a program that processes the information submitted by our form.

   action： action属性是处理我们表单提交的信息的程序的网址(URL)。

2. 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