html篇之《表單》

一、結構

<form action="url" method="post" name="">

  <label>標註</label><input type="text" />

  <select name="">
    <option value="">選項1</option>
    <option value="">選項2</option>
    <option value="">選項3</option>
  </select>

  <select name="">
    <optgroup label="分組1">
      <option value="">選項1</option>
      <option value="">選項2</option>
      <option value="">選項3</option>
    </optgroup>
    <optgroup label="分組2">
      <option value="">選項1</option>
      <option value="">選項2</option>
      <option value="">選項3</option>
    </optgroup>
  </select>

  <textarea name="" cols="30" rows="10">多行文本域</textarea>

</form>

二、標簽屬性

1. <form name="表單標簽"></form>標簽

(1) 屬性

① action

• 值為url
• 提交表單時，後臺伺服器接收表單數據的後臺URL地址

② method

• 前臺發送數據到後臺伺服器的方式，值為：
  • get
    • 前臺使用action的URL來包含參數向後臺傳遞數據
    • 此方式發送信息的數量有限制
    • 一般用於從後臺獲取非隱秘信息
  • post
    • 前臺把表單數據作為http請求體的一部分向後臺傳遞隱秘數據
    • 此方式發送信息的數量沒有限制
    • 一般用於從後臺獲取隱秘信息和修改伺服器上的數據

③ name

• 表單的名稱

④ target

• 規定在何處打開action URL，值為：
  • _self
  • _blank
  • _top
  • _parent

⑤ enctype

• 規定前臺在向伺服器發送數據之前，對數據進行編碼的方式，一般用於method="post"的情況
• 值為：
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

2. <input name="表單輸入標簽"/>標簽

(1) type屬性，值為：

① text

• 單行文本域
• 此模式下，<input />相應屬性：
  • name = "單行文本域的名稱"
  • maxlength = "文本框內可輸入的最大字元長度"
  • size = "文本框的寬度，以字元個數為單位，預設20個字元"
  • value = "文本框的預設值"
  • placeholder = "文本框內淺字顯示的提示文本"

② password

• 密碼域
• 也是文本域，前臺文本框密碼被***替代，用於安全保護隱私

③ file

• 文件域
• 上傳文件

④ radio

• 單選域
• 此模式下，<input />相應屬性：
  • 此模式下，同一組的name屬性值一定要相同，給使用者做可識別標識(後臺伺服器)
  • value = "一般是選項的標識數據，提供給使用者(後臺伺服器)"
  • checked屬性，預設此項為初始選中項

⑤ checkbox

• 覆選域
• 此模式下，<input />相應屬性：
  • 此模式下，同一組的name屬性值建議相同，給使用者做可識別標識(後臺伺服器)
  • value = "一般是選項的標識數據，提供給使用者(後臺伺服器)"
  • checked屬性，預設此項為初始選中項

⑥ button

• 普通按鈕
• 此模式下，<input />相應屬性：
  • name = "按鈕名稱，給使用者做可識別標識(後臺伺服器)"
  • value = "前臺按鈕上顯示的文本"

⑦ submit

• 提交按鈕
• 此模式下，<input />相應屬性：
  • name = "按鈕名稱，給使用者做可識別標識(後臺伺服器)"
  • value = "前臺按鈕上顯示的文本"

⑧ image

• 圖像域，圖像提交按鈕
• 此模式下，<input />相應屬性：
  • name = "圖像提交按鈕名稱，給使用者做可識別標識(後臺伺服器)"
  • src = "圖片地址或鏈接"

⑨ reset

• 重置按鈕
• 此模式下，<input />相應屬性：
  • name = "按鈕名稱，給使用者做可識別標識(後臺伺服器)"
  • value = "前臺按鈕上顯示的文本"

⑩ hidden

• 隱藏域
• 此模式下，<input />相應屬性：
  • name = "名稱，給使用者做可識別標識(後臺伺服器)"
  • value = "提供給使用者的數據(後臺伺服器)"

3. <select></select>標簽

(1) 屬性

① name

• name = "下拉菜單和列表的名稱"

② multiple

• 可選擇多個選項

③ size

• size = "列表中可見選項的數目"

(2) 標簽配搭使用

① 基本選項標簽

  <select name="">
    <option value="">選項1</option>
    <option value="">選項2</option>
    <option value="">選項3</option>
  </select>

② 分組下拉菜單

  <select name="">
    <optgroup label="分組1">
      <option value="">選項1</option>
      <option value="">選項2</option>
      <option value="">選項3</option>
    </optgroup>
    <optgroup label="分組2">
      <option value="">選項1</option>
      <option value="">選項2</option>
      <option value="">選項3</option>
    </optgroup>
  </select>

4. <option></option>標簽

(1) 屬性

① selected

• 預設此項為初始選中項

② value

• value = "提供給使用者的數據(後臺伺服器)"

5. <textarea></textarea>標簽

(1) 屬性

① name

• name = "多行文本域的名稱"

② placeholder

• placeholder = 文本區的預期內容簡短描述提示

③ rows

• rows = "文本區內的可見行數"

④ cols

• cols = "文本區內的可見寬度"

我是弦歌，
一個渴望成長的前端小白，
歡迎您的留言，
更期待您的不吝指正。

若我的內容能幫助到您，歡迎關註我 ♥
記得點贊收藏哦 ♥