前端菜鳥筆記 Day-2 Form表單

• HTML表單
• 表單元素
• 表單屬性
• HTML5追加的表單元素

HTML表單

HTML 表單用於蒐集不同類型的用戶輸入。

<form>

<form>標籤定義 HTML 表單：

<form>
  ...
  form elements
  ...
</form>

表單元素

HTML 表單包含表單元素。

表單元素指的是不同類型的：

• input元素
• 複選框
• 單選按鈕
• 提交按鈕
• 等等

內容引用：HTML表單元素

<input>

最重要的表單元素。

<input> 元素根據不同的 type 屬性可以變化爲多種形態。

<form>
  ...
  <input type="..." ...>
  ...
</form>

text

單行輸入框。

<input type="text" name="usr">

password

字符掩碼處理的單行輸入框。

<input type="password" name="psw">

submit

一個提交按鈕。

<input type="submit">

至於用哪個程序來處理提交的表單數據，在<form>標籤中的action屬性中定義。

<form action="action.php">
  ...
  <input type="submit" value="Submit">
</form>

其中的value屬性定義按鈕上顯示的文字，缺省會顯示默認文本（中文環境下爲“提交”）。

radio

定義單選按鈕。

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

其中的name屬性非常重要，多個radio類型的<input>只有在name屬性相同時才具有單選限制。

checkbox

定義多選框，允許選0個或多個。

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

name屬性作用類似radio。

button

定義按鈕。

<input type="button">和<button>標籤的異同會在之後單獨的專題說明。

<input type="button" onclick="alert('Hello World!')" value="Click">

• onclick定義觸發的方法
• value定義按鈕顯示文字

file

用於選取文件和上傳文件。

<input type="file" name="pic" accept="image/gif" />

涉及到的時候會在之後單獨的專題說明。

reset

定義重置按鈕，觸發後會清楚表單的所有數據。

<input type="reset" value="Reset">

<select>

定義下拉列表。

<select name="cars">
  <option value="volvo">沃爾沃</option>
  <option value="mazda">馬自達</option>
  <option value="hevrolet">雪佛蘭</option>
  <option value="audi">奧迪</option>
</select>

<option>定義待選擇的選項，列表通常會默認選擇第一個選項，可以使用slected屬性來定義預定義選項。

<option value="mazda" selected>馬自達</option>

<textarea>

定義多行輸入字段。

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

<button>

定義可點擊的按鈕。

<button type="button" onclick="alert('Hello World!')">Click</button>

表單屬性

• value（通用）
• name（通用）
• readonly（通用）
• disable（通用）
• type（重要）
• checked（radio、checkbox，重要）
• size
• maxLength

內容引用：HTML Input 屬性

value

value屬性規定輸入字段的初始值，和按鈕的顯示文字。

<input type="text" name="firstname" value="John">

readonly

readonly屬性規定輸入字段只讀（不可修改）。

<input type="text" name="firstname" value="John" readonly>

屬性不用賦值，等同於readonly="readonly"。

disabled

disabled屬性規定輸入字段是禁用的（不可用和不可點擊）。

並且也不會被提交（與readonly不同）。

<input type="text" name="firstname" value="John" disabled>

屬性不用賦值，等同於disabled="disabled"。

size

size屬性規定輸入字段的尺寸（以字符計）。

這裏的尺寸，具體指的是類似輸入框寬度的屬性。

<input type="text" name="firstname" value="John" size="40">

maxlength

maxlength屬性規定輸入字段允許的最大長度。

<input type="text" name="firstname" maxlength="10">

超過長度的字符不會被接受（也就是輸入不進去），但是用戶超過時，input元素本身不會有任何提示。

HTML5追加的表單元素

瞭解內容，主要是一些新增的Input類型：

• email
• url
• number
• range
• Date pickers
• search
• color

目前開發的經驗來看，這類組件如果對UI統一需求不高的話，可以嘗試使用一點，不過一般情況下都會造輪子或者用現成較爲成熟的輪子來代替使用這些。

內容連接：HTML5 Input 類型

---

個人靜態博客：

• 氣泡的前端日記： https://rheabubbles.github.io