分步表單如何實(shí)現(xiàn) html

by Abhishek Jakhar

通過(guò)阿比舍克·賈卡(Abhishek Jakhar)

HTML表單入門(mén)的分步指南 (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.

當(dāng)您想從訪問(wèn)您的網(wǎng)站的人那里收集一些數(shù)據(jù)時(shí)，需要HTML表單。 例如，當(dāng)您注冊(cè)/登錄Uber，Netflix或Facebook之類(lèi)的應(yīng)用程序時(shí)，您會(huì)通過(guò)HTML 表單輸入諸如Name ， Email和Password之類(lèi)的信息。

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

現(xiàn)在，我們將學(xué)習(xí)創(chuàng)建表單的所有必需元素。

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.

注意：我已經(jīng)使用CSS添加了樣式，因此我的元素看起來(lái)會(huì)有所不同，但是它們的工作方式完全相同。

If you want to make your elements look like mine then, you can find my CSS file in the links given below:

如果要使您的元素看起來(lái)像我的元素，則可以在下面給出的鏈接中找到我CSS文件：

Custom CSS: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

自定義CSS： https ： //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

Normalize CSS:

標(biāo)準(zhǔn)化CSS：

Normalize CSS:https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

標(biāo)準(zhǔn)化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.

這是我們將要學(xué)習(xí)的第一個(gè)要素。 該元素包裝了表單中所有其他元素。 這是表單元素。

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.

我們的表單不會(huì)在任何地方提交數(shù)據(jù)，因?yàn)樗鼪](méi)有連接到服務(wù)器。 要將表單連接到服務(wù)器并處理數(shù)據(jù)，我們可以使用任何服務(wù)器端語(yǔ)言，例如Node，Python，Ruby或PHP。 處理數(shù)據(jù)的部分涉及到附加到form元素的兩個(gè)重要屬性。 讓我們看一下這些屬性。

Attributes:

屬性：

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

action： action屬性是處理我們表單提交的信息的程序的網(wǎng)址(URL)。

method: It is the HTTP method that the browser uses to submit the form, the possible values are POST and GET.

method：這是瀏覽器用來(lái)提交表單的HTTP方法 ，可能的值為POST和GET。

• POST — Data from the body of the form is sent to the server.

  POST —表單主體中的數(shù)據(jù)發(fā)送到服務(wù)器。

• GET — Data is sent inside of the URL and parameters are separated with a question mark.

  GET-數(shù)據(jù)在URL內(nèi)發(fā)送，參數(shù)之間用問(wèn)號(hào)分隔。

Note: You cannot have forms nested inside another form. That means you cannot have a <form> element inside another<form> element.

注意： 表單不能嵌套在另一個(gè)表單中 。 這意味著您不能在另一個(gè)<form>元素內(nèi)包含<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.

輸入元素是最常用的表單元素。 它用于創(chuàng)建一個(gè)文本字段 ，用戶(hù)可以在其中輸入一些信息 ，例如電子郵件 ， 密碼等。

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

讓我們創(chuàng)建一個(gè)文本字段，用戶(hù)可以在其中輸入他們的姓名。

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元素是一個(gè)自動(dòng)關(guān)閉標(biāo)簽，因此無(wú)需鍵入關(guān)閉標(biāo)簽以匹配開(kāi)始標(biāo)簽。

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

我在上面的輸入標(biāo)簽中添加了三個(gè)屬性。 讓我們?cè)敿?xì)看一下每個(gè)。

type

類(lèi)型

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屬性提供一個(gè)text值，那么在這里我們要輸入的值就是text類(lèi)型。 此特定屬性有許多可能的值。 一些可能的值是電子郵件，電話的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.

示例：登錄到任何帳戶(hù)(Amazon / Netflix)時(shí)，您需要輸入兩件事： email和password 。 因此，在這種特殊情況下，將使用輸入元素。 type屬性分別帶有email和password的值。

id

ID

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屬性不是必需的，但最好添加一個(gè)。 在某些情況下，這對(duì)于使用CSS / JavaScript定位元素很有幫助。 添加了ID屬性，以便我們可以將標(biāo)簽關(guān)聯(lián)到特定的表單控件 。

name

名稱(chēng)

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.

名稱(chēng)屬性是必需的。 將表單提交到服務(wù)器端代碼后，服務(wù)器可以理解表單數(shù)據(jù)并適當(dāng)?shù)靥幚碇怠?

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.

這是一個(gè)簡(jiǎn)短的提示，在用戶(hù)輸入值之前顯示在輸入字段中。 用戶(hù)開(kāi)始在輸入字段中輸入時(shí)，占位符消失。

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屬性使用不同的值將產(chǎn)生不同的結(jié)果。 例如，您可以使輸入的類(lèi)型為電子郵件，文本或密碼等。所有這些都顯示出稍有不同的行為，您將在下面看到。

Multiple Input Elements (Text, Email, Password)

多個(gè)輸入元素(文本，電子郵件，密碼)

Multiple Input Element (Text, Email, Password)

多個(gè)輸入元素(文本，電子郵件，密碼)

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.

有時(shí)單行文本是不夠的，簡(jiǎn)單的輸入元素將無(wú)法工作。 例如，某些網(wǎng)站具有供人們鍵入其查詢(xún)或消息的聯(lián)系表。 在這種情況下，最好使用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>不是自動(dòng)關(guān)閉標(biāo)簽，因此我們需要同時(shí)輸入開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。 (<textarea> </ textarea>)

Attributes:

屬性：

• id: Same as mentioned above in <input/> element.

  id：與上面<input />元素中提到的相同。

• name: Same as mentioned above in <input/> element.

  名稱(chēng)：與上面<input />元素中提到的相同。

• cols: Specifies the visible width of a text area.

  cols：指定文本區(qū)域的可見(jiàn)寬度。

• rows: Specifies the visible number of lines in a text area.

  行：指定文本區(qū)域中可見(jiàn)的行數(shù)。

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.

您會(huì)看到textarea允許我們鍵入多行。 用戶(hù)可以調(diào)整文本區(qū)域的大小，在上圖中可以看到我正在調(diào)整文本區(qū)域的大小。

Note: In most browsers the textarea element is resizable.

注意：在大多數(shù)瀏覽器中， textarea元素是可調(diào)整大小的。

按鈕元素 (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元素是最重要的表單元素之一。 沒(méi)有按鈕，您將無(wú)法將任何表單提交到服務(wù)器進(jìn)行處理。

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

button元素接受稱(chēng)為type的屬性。 該屬性接受三個(gè)值Submit ， Reset和Button 。

Attributes:

屬性：

• type=”reset”: It will clear all the form data when it’s clicked.

  type =“ reset”：單擊后將清除 所有表單數(shù)據(jù) 。

• type=”button”: It does not have any default behavior and it’s mostly used with JavaScript to program it for custom behavior.

  type =“ button”：它沒(méi)有任何默認(rèn)行為，并且通常與JavaScript結(jié)合使用以對(duì)其進(jìn)行自定義行為編程。

• 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 類(lèi)型的默認(rèn)行為是提交表單并將所有數(shù)據(jù)發(fā)送到服務(wù)器。

標(biāo)簽元素 (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.

現(xiàn)在，用戶(hù)無(wú)法知道哪個(gè)表單控件執(zhí)行什么操作。 無(wú)法知道您將在哪里輸入電子郵件以及您將在哪里輸入密碼。 表格看起來(lái)非常不完整和混亂。

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

我們可以使用label元素來(lái)標(biāo)記我們每個(gè)窗體控件。

The most used attribute with a label is for.

帶標(biāo)簽的最常用屬性是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屬性將標(biāo)簽與特定表單元素相關(guān)聯(lián)。 匹配的方式是通過(guò)ID 。 如您在上面的示例中所見(jiàn)，給輸入元素提供的ID屬性的值是email。 賦予label元素的for屬性的值也是email，因此它們彼此關(guān)聯(lián)。

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.

注意：單擊標(biāo)簽時(shí)，我們會(huì)自動(dòng)將焦點(diǎn)移到與標(biāo)簽關(guān)聯(lián)的輸入字段。 這是默認(rèn)行為。

Now our form looks very good ?.

現(xiàn)在我們的表格看起來(lái)非常好嗎？

選擇菜單 (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.

有時(shí)，當(dāng)您創(chuàng)建表單時(shí)，您不希望用戶(hù)能夠輸入文本。 相反，您可能希望他們從您提供的一些預(yù)設(shè)選項(xiàng)中進(jìn)行選擇 。

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.

任何時(shí)候您擁有的選項(xiàng)列表都比四，五種東西長(zhǎng)，最好選擇選擇菜單，因?yàn)樗梢怨?jié)省空間。

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.

假設(shè)我們的表格是針對(duì)打算在大學(xué)錄取的學(xué)生的。 我們希望允許學(xué)生從大學(xué)課程的預(yù)定義列表中進(jìn)行選擇。

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

選擇菜單元素是使用打開(kāi)和關(guān)閉<sele ct>標(biāo)簽制成的。

<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>-選擇元素將顯示一個(gè)包含可選選項(xiàng)的下拉菜單。 選擇元素不會(huì)做任何事情，本身。 這種形式的元素實(shí)際上需要在它的內(nèi)部的附加元件，恰好LIK?<UL> ELE 換貨的需求<LI>元素。 我們把選擇e 字元素內(nèi)的元素被稱(chēng)為選項(xiàng)元素。

Attributes:

屬性：

• name: Same as mentioned above in <input/> element.

  名稱(chēng)：與上面<input />元素中提到的相同。

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

<opti on>-選項(xiàng)元素表示用戶(hù)可以在選擇菜單中選擇的選項(xiàng)之一。 ＆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.

  值：當(dāng)您向服務(wù)器端代碼提交表單時(shí)，每個(gè)表單元素對(duì)于文本輸入和文本區(qū)域都有一個(gè)關(guān)聯(lián)的值。 該值是用戶(hù)在字段中鍵入的任何值。 但是，由于我們正在創(chuàng)建這些預(yù)定義的選項(xiàng)，因此我們需要指定該值在提交時(shí)的外觀。 因此，我們使用value屬性為預(yù)定義選項(xiàng)指定值。

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.

現(xiàn)在，我們有了剛剛創(chuàng)建的帶有選擇菜單的“選擇課程”標(biāo)簽。 現(xiàn)在，我們還可以使用<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.

  標(biāo)簽：選項(xiàng)組的名稱(chēng)。 在下面給出的示例中，我們的選項(xiàng)列表已分為兩組，標(biāo)簽為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.

如果您有很多選擇，那么選擇菜單會(huì)很棒。 如果您有5種或更少的選項(xiàng)，則最好使用單選按鈕。

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.

選擇菜單和單選按鈕之間的區(qū)別在于單選按鈕可一次顯示所有選項(xiàng)。 像選擇菜單一樣，用戶(hù)只能從其中之一中進(jìn)行選擇。

Attributes:

屬性：

• name: Same as mentioned above in <input/> element.

  名稱(chēng)：與上面<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.

  值：由于我們正在創(chuàng)建這些預(yù)定義的選項(xiàng)，因此我們需要指定該值在提交時(shí)的外觀。 因此，我們使用value屬性為預(yù)定義選項(xiàng)指定值。

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.

注意： 如果選擇一個(gè)選項(xiàng)，然后嘗試選擇另一個(gè)選項(xiàng)，則會(huì)看到它取消選擇了上一個(gè)選項(xiàng)。 它知道這樣做的方式是因?yàn)槲覀儞碛型耆嗤?strong>name屬性。 因此，它知道這兩個(gè)單選按鈕是同一組的一部分。

Note: Name should be the same if we want radio buttons to be a part of the same radio button group.

注意：如果我們希望單選按鈕成為同一個(gè)單選按鈕組的一部分，則名稱(chēng)應(yīng)相同。

選框 (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.

有時(shí)您可能有一組預(yù)定義的選項(xiàng)。 您希望用戶(hù)能夠選擇多個(gè)選項(xiàng)，而不僅僅是其中之一。 這就是復(fù)選框有用的地方。

Attributes:

屬性：

• name: Same as mentioned above in <input/> element.

  名稱(chēng)：與上面<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.

  值：由于我們正在創(chuàng)建這些預(yù)定義的選項(xiàng)，因此我們需要指定該值在提交時(shí)的外觀。 因此，我們使用value屬性為預(yù)定義選項(xiàng)指定值。

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

  選中：默認(rèn)情況下，未選中復(fù)選框輸入。 您可以通過(guò)使用稱(chēng)為checked的屬性將默認(rèn)狀態(tài)設(shè)置為checked 。 請(qǐng)記住，這是一個(gè)布爾屬性。

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

在下面給出的示例中，我為每個(gè)選項(xiàng)使用了標(biāo)簽。 我已連接的復(fù)選框 ，并使用該 復(fù)選框的標(biāo)簽和id屬性的屬性標(biāo)簽 。

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.

注意： 很難單擊一個(gè)小復(fù)選框。 建議在復(fù)選框周?chē)粋€(gè)<label>元素。 如果單擊標(biāo)簽，則我們的復(fù)選框也會(huì)被選中或未選中。 我下面沒(méi)有做過(guò)，但是您可以做得更好，以達(dá)到UX更好的效果 。

復(fù)選框和單選按鈕之間的區(qū)別 (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).

復(fù)選框可以存在于它自己的 ，而單選按鈕只能出現(xiàn)作為一個(gè)組 (2個(gè)的單選按鈕最低也要在那里)。

Selecting checkbox is optional but choosing one of the radio button is mandatory.

選擇復(fù)選框是可選的 ，但選擇的單選按鈕的一個(gè)是強(qiáng)制性的 。

完整表格 (The Complete Form)

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

我們已經(jīng)了解了許多HTML表單元素，并涵蓋了所有要點(diǎn)。

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.

不必?fù)?dān)心記住所有內(nèi)容。 幾乎沒(méi)有專(zhuān)業(yè)的Web開(kāi)發(fā)人員可以命名每個(gè)屬性或元素。 比記憶更重要的是，學(xué)習(xí)如何在需要時(shí)在文檔中查找內(nèi)容。

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

您可以嘗試添加自己CSS，以使此表單看起來(lái)像您想要的樣子。

You can learn more about forms in the link given below

您可以在下面的鏈接中了解有關(guān)表格的更多信息

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表單對(duì)于... developer.mozilla.org 是一個(gè)非常強(qiáng)大的工具。

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

希望您發(fā)現(xiàn)這篇文章對(duì)您有幫助。 我希望聽(tīng)到您的反饋！

Thank you for reading!

感謝您的閱讀！

翻譯自: https://www.freecodecamp.org/news/a-step-by-step-guide-to-getting-started-with-html-forms-7f77ae4522b5/

分步表單如何實(shí)現(xiàn) html

總結(jié)

以上是生活随笔為你收集整理的分步表单如何实现 html_HTML表单入门的分步指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。