表單小結

1、表單元素選擇器

• 表單元素沒有僞元素

• input[type=checkbox] 選中多選框；

• input:focus 選擇得到焦點的元素；

• form:focus-within 選擇子元素得到焦點的元素；

• input:checked （僅用於單選按鈕和複選框）選擇器匹配選中的元素；

• input:read-only 選擇器匹配只讀元素；

• input::-webkit-input-placeholder 選擇輸入框內默認文字提示。

• input::placeholder-shown 在 <input> 或 <textarea> 元素顯示 placeholder text 時生效

2、表單元素屬性

　　1. input屬性

<input name="mobile" type="text" disabled readonly placeholder="請輸入信息" value="1774444XXXX" />

• name="mobile" : 用於表單提交，只有加了name屬性的標籤元素纔會提交到服務器；

• disabled : 禁用屬性。用戶不能更改，表單中的禁用域不會被提交到服務器；

• readonly : 只讀屬性。用戶不能更改，表單中的域會提交到服務器；

• type="hidden" : 隱藏屬性。用戶不可見，表單中的域會提交到服務器；

• placeholder : 默認提示信息；

• value : 表單的值
• 注：<textarea></textarea> 標籤沒有value屬性，而textarea對象有value屬性

　　

　　2. select 選框屬性

<select>
    <option value="" disabled selected style="display:none">我是placeholder</option>
    <option value="option1"></option>
    <option value="option2"></option>
    <option value="option3"></option>
</select>

• value 是在option中定義的
• 默認是第一個option的值，更改默認值，給option加selected屬性
• placeholder 若要在下拉選框中顯示的話，去掉 display: none 便可

　　3. form 表單屬性

<form action="www.cnblogs/Kuro-P" method="POST"></form>

• action : 表單數據提交的地址。若是action中的值爲空，那麼這個請求將由當前頁面的路徑來處理。
• method : 規定頁面數據以何種方式提交到服務器。
• enctype : 規定在發送到服務器以前應該如何對錶單數據進行編碼。默認是 application/x-www-form-urlencoded ，即對全部字符進行編碼。