表单属性总结
<!-- 清除默认样式 -->
input{
border: none; <!-- 去边框 -->
outline: none; <!-- 去除选中边框 -->
background-color: rgba(0,0,0,0); <!-- 去除背景样式 -->
}
表单
<form
{action="(输入一个服务器地址,以http://开头)"
method="(发送表单数据的方法,get:明文;post:密文)"
target="(打开的方式,1 _blank:新的页面;2 _self:自身页面)"
novalidate:(让表单所有元素检测无效)
type=""}>
</form>
**input:**
type 的属性:{
-button (定义按钮,多数用于JS脚本启动)
-file (定义输入字段“浏览”按钮,供文件上传,multiple属性可供多个上传)
-image (图像形式提交按钮,配合src+alt使用)
-subimt (提交按钮,将表单数据发送到服务器)
-password(密码字段)
-radio(单选按钮) 【设置相同name关联,checked属性默认选中】
-checkbox(多选按钮)【设置相同name关联,checked属性默认选中】
-reset (定义重置按钮)
-text (定义单行输入字段)
-hidden(定义隐藏字段)
*h5新增
-url (包含url的输入域,检测http://)
-email (检测是否有@符号)
-search(定义一个搜索域)
-number(定义包含数值的输入域,max,min,step)
-range (定义一个滑动条,max,min,step)
-color (选取颜色)
-date (选择日期)
}
placeholder属性:
{一个占位符,使用 input::placeholder 状态选择器改变默认颜色丶字体(IE不支持该选择器)}
autofocus属性:
{页面加载时字动获得焦点,使用 E:focus 状态选择器改变选中状态时元素的属性}
autocomplete属性:
{on(开启)丶off(关闭);配合name记录表单提交过的内容,下次在输入框中有提交记录,}
checked属性:
{元素被选中;使用E:checked 状态选择器改变元素被选中时属性}
focus属性:
{使用E:focus 状态选择器选择获取焦点的input元素}
required属性:
{规定必须在提交之前填写(不能为空!)}
pattern属性
{正则表达式,验证input域,例如:pattern="[0-9]*"只能出现数字,一次或多次 }
form属性
{使用form="表单的ID" 将表单(form)外的input与表单关联}
multiple属性
{规定输入域可选择多个值,一般用于"file"与"email"类型的输入域}
list属性
{
配合datalist元素,实现一个列表下拉效果:
*注意:datalist的id==list,才能关联起来
例如:
<input type="text" list="major" name="mj">
<datalist id="major">
<option value="JS">Javascript</option>
<option value="HTML">超文本标记语言</option>
<option value="CSS">层叠样式表</option>
</datalist>
}
其他属性
下拉列表select{
例如:
<select name="" form="">
<option value=""> css </option>
<option value=""> html </option>
<option value=""> js </option>
</select>
}
多行文本输入textarea{
例如:
<textarea rows="" cols=""></textarea>
}
label属性{使用label属性for与表单元素ID关联,点击区域关联在一起;
label for=input id
例如:
<label for="yourName">你的名字</label>
<input type="text" name="" id="yourName" value="" />
}
input剩余属性:
formaction{修改当前元素提交的地址}
formtarget{修改当前元素的打开方式}
formmethod{修改当前元素的传输方式}
formnovalidate{修改当前元素是否检测}