常見form表單5種input輸入類型

HTML表單用於收集不同類型的用戶輸入，表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽<form>來設置

<form>
input elements
</form>

HTML 表單 - 輸入元素

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

1. 文本域（Text Fields）
2. 密碼字段
3. 單選按鈕（Radio Buttons）
4. 復選框（Checkboxes）
5. 提交按鈕(Submit Button)

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

文本域通過<input type="text" /> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。注意:表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。

First name:
Last name:

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

二、什么是密碼字段？

密碼字段通過標簽<input type="password" /> 來定義，注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。

Password:

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

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

<input type="radio">標簽定義了表單單選框選項

Male
Female

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form> 

四、什么是復選框（Checkboxes）？

<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

I have a bike
I have a car

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

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

<input type="submit">>定義了提交按鈕.當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理

Username:

注釋:假如您在文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。

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

關於html表單補充部分

A.html基本標簽表單實現交互原理，單選框，復選框，下拉框介紹

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

B.form實現瀏覽者登陸、注冊頁面與瀏覽器的交互

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