常見HTML中form表單input輸入類型有哪些

這篇文章主要講解了“常見HTML中form表單input輸入類型有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“常見HTML中form表單input輸入類型有哪些”吧！

HTML表單用于收集不同類型的用戶輸入，表單是一個(gè)包含表單元素的區(qū)域。表單元素是允許用戶在表單中輸入內(nèi)容，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。表單使用表單標(biāo)簽<form>來(lái)設(shè)置

1 <form>2 input elements3 </form>

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>），<input>元素是最重要的表單元素。輸入類型是由類型屬性（type）定義的，大多數(shù)經(jīng)常被用到的輸入類型如下：

1. 文本域（Text Fields）

2. 密碼字段

3. 單選按鈕（Radio Buttons）

4. 復(fù)選框（Checkboxes）

5. 提交按鈕(Submit Button)

一、什么是文本域（Text Fields）？

文本域通過(guò)<input type="text" /> 標(biāo)簽來(lái)設(shè)定，當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域。注意:表單本身并不可見。同時(shí)，在大多數(shù)瀏覽器中，文本域的缺省寬度是20個(gè)字符。

First name: 
Last name: 

1 <form>2 First name: <input type="text" name="firstname"><br>3 Last name: <input type="text" name="lastname">4 </form>

二、什么是密碼字段？

密碼字段通過(guò)標(biāo)簽<input type="password" /> 來(lái)定義，注意:密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代。

Password: 

1 <form>2 Password: <input type="password" name="pwd">3 </form>

三、什么是單選按鈕（Radio Buttons）？

<input type="radio">標(biāo)簽定義了表單單選框選項(xiàng)

Male
Female

1 <form>2 <input type="radio" name="sex" value="male">Male<br>3 <input type="radio" name="sex" value="female">Female4 </form>

四、什么是復(fù)選框（Checkboxes）？

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。

I have a bike
I have a car

1 <form>2 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>3 <input type="checkbox" name="vehicle" value="Car">I have a car 
4 </form>

五、什么是提交按鈕(Submit Button)？

<input type="submit">>定義了提交按鈕.當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理

Username:  

 注釋:假如您在文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會(huì)傳送到 "html_form_action.php" 的頁(yè)面。該頁(yè)面將顯示出輸入的結(jié)果。 

1 <form name="input" action="html_form_action.php" method="get">2 Username: <input type="text" name="user">3 <input type="submit" value="Submit">4 </form>

關(guān)于html表單補(bǔ)充部分

• A.html基本標(biāo)簽表單實(shí)現(xiàn)交互原理，單選框，復(fù)選框，下拉框介紹

• 概括：表單是什么？表單是前端和服務(wù)器做交互的一種機(jī)制，表單收集用戶輸入信息，之后發(fā)送或者提交給服務(wù)器。用戶在輸入的信息稱之為內(nèi)容，內(nèi)容的文本分為普通和密碼型，用戶通過(guò)單選框、復(fù)選框、下拉框（也就是下拉菜單）完成內(nèi)容信息輸入，最后通過(guò)提交按鈕發(fā)送給服務(wù)器！這里要講到瀏覽器怎么發(fā)送給服務(wù)器？涉及到http協(xié)議，也就是超文本傳輸協(xié)議，它是瀏覽器和服務(wù)器通訊的一種機(jī)制。模式為：請(qǐng)求——應(yīng)答，瀏覽器發(fā)送請(qǐng)求=>服務(wù)器接收=>自身處理=>結(jié)果返回瀏覽器=>瀏覽器根據(jù)結(jié)果展示頁(yè)面給用戶，請(qǐng)求分為GET和POST；以及input單選框，復(fù)選框和select下拉框介紹

• B.form實(shí)現(xiàn)瀏覽者登陸、注冊(cè)頁(yè)面與瀏覽器的交互

• 概括：網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。 &lt:form method="傳送方式" action="服務(wù)器文件">1.<form>標(biāo)簽是成對(duì)出現(xiàn)的2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php);3.method ： 數(shù)據(jù)傳送的方式（get/post）。注意事項(xiàng):1>所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 <form<>/form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦?。?>method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問(wèn)題。

感謝各位的閱讀，以上就是“常見HTML中form表單input輸入類型有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)常見HTML中form表單input輸入類型有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！