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請求體的一部分向后臺傳遞隱秘資料
- 此方式發送資訊的數量沒有限制
- 一般用于從后臺獲取隱秘資訊和修改服務器上的資料
- get
③ 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 = "https://www.cnblogs.com/songofsongs/p/文本框的默認值"
- placeholder = "文本框內淺字顯示的提示文本"
② password
- 密碼域
- 也是文本域，前臺文本框密碼被
***替代，用于安全保護隱私
③ file
- 檔案域
- 上傳檔案
④ radio
- 單選域
- 此模式下，
<input />相應屬性：- 此模式下，同一組的name屬性值一定要相同，給使用者做可識別標識(后臺服務器)
- value = "https://www.cnblogs.com/songofsongs/p/一般是選項的標識資料，提供給使用者(后臺服務器)"
- checked屬性，默認此項為初始選中項
⑤ checkbox
- 復選域
- 此模式下，
<input />相應屬性：- 此模式下，同一組的name屬性值建議相同，給使用者做可識別標識(后臺服務器)
- value = "https://www.cnblogs.com/songofsongs/p/一般是選項的標識資料，提供給使用者(后臺服務器)"
- checked屬性，默認此項為初始選中項
⑥ button
- 普通按鈕
- 此模式下，
<input />相應屬性：- name = "按鈕名稱，給使用者做可識別標識(后臺服務器)"
- value = "https://www.cnblogs.com/songofsongs/p/前臺按鈕上顯示的文本"
⑦ submit
- 提交按鈕
- 此模式下，
<input />相應屬性：- name = "按鈕名稱，給使用者做可識別標識(后臺服務器)"
- value = "https://www.cnblogs.com/songofsongs/p/前臺按鈕上顯示的文本"
⑧ image
- 影像域，影像提交按鈕
- 此模式下，
<input />相應屬性：- name = "影像提交按鈕名稱，給使用者做可識別標識(后臺服務器)"
- src = "https://www.cnblogs.com/songofsongs/p/圖片地址或鏈接"
⑨ reset
- 重置按鈕
- 此模式下，
<input />相應屬性：- name = "按鈕名稱，給使用者做可識別標識(后臺服務器)"
- value = "https://www.cnblogs.com/songofsongs/p/前臺按鈕上顯示的文本"
⑩ hidden
- 隱藏域
- 此模式下，
<input />相應屬性：- name = "名稱，給使用者做可識別標識(后臺服務器)"
- value = "https://www.cnblogs.com/songofsongs/p/提供給使用者的資料(后臺服務器)"
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 = "https://www.cnblogs.com/songofsongs/p/提供給使用者的資料(后臺服務器)"
5. <textarea></textarea>標簽
(1) 屬性
① name
- name = "多行文本域的名稱"
② placeholder
- placeholder = 文本區的預期內容簡短描述提示
③ rows
- rows = "文本區內的可見行數"
④ cols
- cols = "文本區內的可見寬度"
我是弦歌，
一個渴望成長的前端小白，
歡迎您的留言，
更期待您的不吝指正，
若我的內容能幫助到您，歡迎關注我 ?
記得點贊收藏哦 ?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/545599.html
標籤：Html/Css