表单小结

一、表单元素选择器

• 表单元素没有伪元素

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

• input:focus 选择获得焦点的元素；

• form:focus-within 选择子元素获得焦点的元素；

• input:checked （仅用于单选按钮和复选框）选择器匹配选中的元素；

• input:read-only 选择器匹配只读元素；

• input::-webkit-input-placeholder 选择输入框内默认文字提示。

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

二、表单元素属性

　　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 ，即对所有字符进行编码。