<input> 標籤用於蒐集使用者資訊。

根據不同的 type 屬性值，輸入欄位擁有很多種形式。輸入欄位可以是文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等等。

在這裡博主介紹6中type的input，分別是文字域、密碼欄位、單選按鈕、複選按鈕、提交按鈕以及指定圖片按鈕

1：文字域 

文字域通過<input type="text"> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文字域。

First name: <input type="text" name="firstname">

瀏覽器下效果展示

2：密碼欄位 

密碼欄位通過標籤<input type="password"> 來定義

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

瀏覽器下效果展示

注意:密碼欄位字元不會明文顯示，而是以星號或圓點替代。

3：單選按鈕

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

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

瀏覽器顯示效果如下:

4:複選按鈕

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

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

瀏覽器顯示效果如下:

5:提交按鈕

<input type="submit"> 定義了提交按鈕.

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。

Username: <input type="text" name="user">
<input type="submit" value="Submit">

瀏覽器顯示效果如下:

6:指定圖片按鈕

<input type="image"> 定義了指定圖片按鈕,src後面跟上指定的圖片地址或者路徑，alt屬性為影象提供alt文字，因此螢幕閱讀器使用者可以更好地瞭解按鈕的用途。

<input type="image" id="image" alt="Login"
           src="/media/examples/login-button.png" />

瀏覽器顯示效果如下: