2020-12-25發表2024-04-04更新網頁 / HTML11 分鐘讀完 (大約1611個字)

HTML - 表單標籤

<form>

建立一個 HTML 表單，<form> 做為表單的容器。

屬性:

action 指定一個位址 (URL)，要將表格的內容傳送過去。
method 指定資料傳輸時用的 HTTP 協議。( GET / POST )
- GET : 用在資料量較小或非敏感的資料，因為資料會被放在網址中直接傳出。
- POST : 用在表單資料量較大、有夾帶檔案上傳或隱私性考量的資料。
target 指定瀏覽器要在何處顯示伺服器回應的結果。
- _self : 顯示在表單所在的當前視窗。
- _blank : 顯示在新視窗。
- _parent : 顯示在上一層的視窗。
- _top : 顯示在最頂層的視窗。
autocomplete 是否啟用瀏覽器自動完成機制。( on(預設) / off )

<input>

建立不同用途的表單控制元件。

屬性:

name 欄位名稱。
value 初始值。
1
<input value="初始值">
disabled 設為禁用狀態。
1
<input value="此格禁用" disabled>

readonly 設為唯獨，不可更改狀態。

1	<input value="此格不可更改" readonly>

autocomplete 是否啟用瀏覽器自動完成功能( on / off )。
autofocus 頁面載入後，自動聚焦。
required 設為必填欄位。
pattern 表單欄位驗證。搭配正規表示法。<input pattern=”正規表達式”>
- text, date, search, url, tel, email 和 password 等輸入欄位可以使用。
type 建立不同的表單元件。

type 屬性

建立不同的表單元件。

type=’text’ 文字輸入。
- maxlength 屬性: 最多輸入字數。
- minlength 屬性: 最少輸入字數。
- size 屬性: 欄位顯示寬度。
- placeholder 屬性: 提示訊息。
  1
  <input placeholder="請輸入使用者帳號">
type=’password 和 text 的差別是，輸入的內容不會被明碼顯示在畫面中。

type=’checkbox’ 核取方塊，勾選某個選項是否成立，可多選。

1 2	<input type="checkbox" name="fast_food" value="McDonald's"> 喜歡麥當勞 <input type="checkbox" name="fast_food" value="KFC"> 喜歡肯德基

喜歡麥當勞
喜歡肯德基

type=’radio’ 選項按鈕，多選一。同一組的選項，需要一樣的name。
- checked 屬性: 可以將該 checkbox / radio 的初始狀態設定為已選取。
  1
  2
  3
  4
  選擇你最喜歡的顏色：
  <input type="radio" name="color" value="red"> red
  <input type="radio" name="color" value="green"> green
  <input type="radio" name="color" value="blue"> blue
  選擇你最喜歡的顏色：
  red
  green
  blue
type=’submit’ 表單送出按鈕。
1
<input type="submit" value="Send">
type=’reset’ 重設表單內容。
1
<input type="reset" value="Reset">
type=’hidden’ 隱藏資料欄位。
type=’image’ 圖片送出按鈕，使用圖片表示的送出按鈕。
- src 屬性: 圖片位址。
- alt 屬性: 當圖片下載失敗時的替代文字。
- width 屬性: 圖片寬度。
- height 屬性: 圖片高度。
type=’file’ 選擇上傳的檔案。
- accept 屬性: 限制允許上傳的檔案類型。可用逗點分隔多種允許類型。值:
  - . 檔案類型: .jpg、.pdf、.png…等。
  - 指定檔案類型: image/png、image/jpg等。
  - audio/*: 任意聲音檔。
  - video/*: 任意影片檔。
  - image/* : 任意圖片檔。
- multiple 屬性: 可同時選多個檔案上傳。
- capture 屬性 : 可用來開啟使用手機的照相鏡頭。值:
  - user : 開啟前鏡頭。
  - environment : 開啟後鏡頭。
type=’button’ 表單按鈕。
type=’search’ 搜尋框。
type=’tel’ 電話號碼輸入欄位。
type=’url’ 網址輸入欄位。
type=’email’ 電子郵件輸入欄位。
type=’number’ 數字輸入欄位。
- max 屬性: 可輸入的最大值。
- min 屬性: 可輸入的最小值。
- step 屬性: 控制數字一次跳動的幅度。
type=’range’ 使用滑動的方式在一個數字區間內選擇出一個值。
1
<input type="range" min="1" max="10">
type=’date’ 日期輸入欄位。
- max 屬性: 可輸入的最晚日期。
- min 屬性: 可輸入的最早日期。
- step 屬性: 控制日期一次跳動的幅度。
  1
  2
  3
  4
  5
  <input type="date"
  value="2020-12-25"
  min="2020-12-01"
  max="2022-12-31"
  step="5">
type=’time’ 時間輸入欄位。(同樣有max、min、step)
type=’color’ 顏色選擇器。
1
<input type="color" value="#00ff00">

<textarea>

建立一個可以輸入多行文字的輸入框。
內容文字的換行是使用一般的文字換行符號 \n。

屬性:

name 欄位名稱。
rows 數字，設定欄高是幾行文字。
cols 數字，設定欄寬是幾行文字。
maxlength
minlength
placeholder 提示訊息。
disable 設定禁用。( 布林值 )
readonly 設定唯獨。( 布林值 )

required 設定必填。( 布林值 )

<textarea name="輸入框"
          placeholder="說點什麼吧"
          rows="8"
          cols="16"
          required></textarea>

使用預設值則是將文字放在 <textarea> 標籤之間

<textarea name="輸入框"
          placeholder="說點什麼吧"
          rows="8"
          cols="16"
          required>12345</textarea>

12345

<select> 、 <option> 、 <optgroup>

<select> 建立下拉式選單的容器標籤。
標籤上的屬性:

name 欄位名稱。
disable 設定禁用。( 布林值 )
required 設定必填。( 布林值 )
multiple 設定選單中的選項可被多選。
size 指定一次顯示幾個選項。

在 <select> 裡面使用 <option> 標籤來建立個別選項。
標籤上的屬性：

value 設定的值。
selected 預先選取。( 布林值 )
label 用於說明選項。
disable 設定不可選。( 布林值 )

<option> 則是將選項分區顯示。

label 設定該分區的名稱。

<select name="menu">
<optgroup label="Coffee">
  <option>Americano</option>
  <option>Coffee Latte</option>
  <option>Cappuccino</option>
  <option>Caramel Macchiato</option>
</optgroup>
<optgroup label="Dessert">
  <option>Bagel</option>
  <option>Pizza</option>
  <option>Sandwich</option>
  <option>Cake</option>
</optgroup>
</select>

<lable>

給表單的說明標題。
將表單元件包在裡面，可增加表單的點擊範圍。
使用 <lable> 的 for 屬性值，值設定為表單元件的id值，可增加表單的點擊範圍。

1 2	<label for="email">Email address: </label> <input type="email" name="user_email" id="email">

Email :

<fieldest> 、 <legend>

<fieldest> 對表單做分組。
<legend> 則是作為分組標題。
屬性:

name 聲明 fieldset 名稱。

disable 設定為禁用的狀態。

<form>
  <fieldset>
    <legend>基本資料</legend>
    <label for='user_name'>姓名:    </label> <input name="user_name" id='user_name'>
    <label for='user_age'>年齡:    </label> <input type="number" name="user_age" id='user_age'>
  </fieldset>

  <fieldset>
    <legend>聯絡資訊</legend>
    <label for="user_email">Email:   </label><input type="email" name="user_email" id="user_email">
    <label for="user_phone">電話:    </label> <input type="number" name="phone" id='user_phone'>
  </fieldset>
</form>

<datalist>

和 <input> 欄位結合使用，建立一組資料清單，出現下拉式選單，提供給使用者可以直接選擇一個值。

建立的方式：
1.在 <input> 標籤上設定一個 list屬性 = datalist 的 id
2.在 <datalist> 標籤上設定一個 id
3. 用 <option> 標籤在 <datalist> 裡面建立資料選項

<label>今天來點什麼咖啡:
<input list="coffee" name="coffee"></label>
<datalist id="coffee">
  <option value="Americano">
  <option value="Coffee Latte">
  <option value="Cappuccino">
  <option value="Caramel Macchiato">
  <option value="Macchiato">
</datalist>

今天來點什麼咖啡:

<output>

用來顯示計算或操作表單的結果。
屬性:

for 值是關聯欄位的id，用空白分隔，指定此結果內容跟哪些欄位的值有關聯。
form 預設值是父層 form 元素的id。

name 表單欄位的名稱。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b">100</output>
</form>

HTML - 表單標籤

https://github.com/LeeU-1230/leeu-1230.github.io.git/2020/12/25/HTML/表單標籤/

作者

LeeU

發表於

2020-12-25

更新於

2024-04-04

許可協議

#HTML

HTML - 表單標籤

<form>

<input>

type 屬性

<textarea>

<select> 、 <option> 、 <optgroup>

<lable>

<fieldest> 、 <legend>

<datalist>

<output>

作者

發表於

更新於

許可協議

分類

最新文章

彙整

標籤

訂閱 Email

follow.it