分步表單如何實現 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!

感謝您的閱讀！