文字輸入

<form>
 First name:<br>
<input type="text" name="firstname" value="aa"> <!--必須有name屬性才能向後端傳值,value提供預設值-->
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

單選按鈕輸入

<form>
<input type="radio" name="sex" value="male" checked>Male<!--checked預設勾選此項-->
<br>
<input type="radio" name="sex" value="female">Female
</form> 
 

提交表單資料按鈕

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

select下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
 

多行文字輸入

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button按鈕

<button type="button" onclick="alert('Hello World!')">點選我！</button>
<!-- 與js函式繫結,
-->
<input type="Submit" vlue="Submit"/>
<!-- 提交表單按鈕,
-->
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!--似乎與第一個按鈕沒區別-->
 

password

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw"><!--password 欄位中的字元會被做掩碼處理-->
</form> 

複選框

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

檔案

<input type="file" name="img" multiple="multiple" />

HTML5新增輸入型別

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url

HTML Input屬性

• value規定輸入欄位的初始值

• readonly規定欄位只讀

• disabled規定輸入欄位禁用，被禁用的元素不會被提交。

• size規定輸入欄位的尺寸

• autofacus規定設定的input元素自動獲得焦點

• formenctype規定當把表單資料提交至伺服器時如何對其編碼，如multipart/form-data,僅針對method=post。

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" formmethod="POST"
  value="Submit as Multipart/form-data">
</form> 

• formmethod定義提交資料的HTTP方法。

• formtarget指示在何處顯示接收到的響應。

• mutiple允許使用者在input元素輸入一個以上的值，適用於一下輸入型別：email和file。

• pattern用於檢查<input>元素值的正則表示式。

• placeholder用以描述輸入欄位預期值的提示。

• required規定必須填寫該欄位。