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

文章大綱來源：【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