form属性
name
action
method
target:_self _blank _top _parent
autocomplete="on默认/off" 可以使刷新页面后,点输入框显示之前输入的历史并选择,若不想显示,input里也可以使用置为off
enctype:
application/x-www-form-urlencoded(默认) 窗体数据被编码为名称/值对。这是标准的编码格式。在发送前对所有字符进行编码。
multipart/form-data 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分,不对字符编码。当使用有文件上传控件的表单时,该值是必需的。如果表单中有文件要上传,表单中form标签必须设置enctype="multipart/form-data"来确保匿名上传文件的MIME编码。默认情况下,表单的编码格式是 application/x-www-form-urlencoded,不能用于文件上传
text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符,邮件处理中用到,其他地方很少用。将空格转换为 "+" 符号,但不编码特殊字符。抓包可见数据形式。
通用属性
禁用input select textarea
<input disabled="disabled" />
提示文字 input textarea
<input placeholder="请输入..." />
最大输入字符数
<input maxlength="10" />
点击label内的文字 id值等于for值的input将获得焦点
<label for="uname">用户名: </label> "
H5新增
autofocus:规定在页面加载时,域自动地获得焦点 autofocus属性适用于所有<input>标签的类型
<input autofocus="autofocus">
autocomplete
<input autocomplete="off">
require 使用了该属性,则此输入框是必填(或必选)的。
<input type="text" required="required"/>
readonly 设置后input为只读状态 无法修改
<input type="text" readonly="readonly"/>
重置表单元素样式
input {outline:0;一般取消掉 获得焦点后的边框样式 }
textarea{resize:0 ;防止文本域拖拽 outline:0 }
input
type属性值
text 文本域
password 掩码
radio 单选
checkbox 多选
file 文件
image 图像域 图像提交按钮
hidden 隐藏域
submit 提交
button 按钮
reset 重置
H5新增属性
email <!-- 针对手机端出现特殊键盘-->
number <!-- PC端只可输入数字与运算符号,手机端出现特殊键盘-->
url
tel <!-- 针对手机端出现特殊键盘-->
date <!-- 选取日,月,年-->
month <!-- 选取月,年-->
week<!-- IOS不兼容 选取周,年 因为这种不实用-->
time <!-- 选取小时分钟-->
datetime<!-- PC端不兼容选取选取时间,日,月,年(UTC时间) ,IOS10以上版本越不兼容-->
datetime-local <!-- 选取时间,日,月,年(本地时间)-->
range <!--托动杆。可设min/max 最小和最大值-->
search <!--类似于搜索框(尾部有小x)-->
color <!--全色彩选择,可用来在线调整编辑器,文本编辑-->
文本
<label for="uname">用户名: </label> "
//size输入框长度
<input id="uname" type="text" name="username" value="" placeholder="请输入用户名" size="20" maxlength="10" />
密码
<input type="password" name="password" value="" />
单选
<input id="male" type="radio" name="gender"" value="male" checked/><!--checked选中-->
<label for="male">男</label>
<input type="radio" name="gender" value="female" />
多选
<input type="checkbox" name="hobby" value="sing" checked/>唱
<input type="checkbox" name="hobby" value="dance" />跳
<input type="checkbox" name="hobby" value="rap" />rap
文件:
<input type="file" name="avatar" multiple> <!--H5 新增 mutiple多文件上传-->
邮箱
<input type="email" multiple="multiple"/> <!--mutiple多文件上传-->
按钮
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="image" src="./img/image-button.png">
select
select标签属性
name
size 设置列表中可见的项目数
multiple 设置可选择多个选项
option标签属性
selected选中状态
value
optgroup 为option进行分组
label 分组名
<select name="eat" multiple size=5>
<option value="">--请选择--</option>
<optgroup label="水果">
<option value="1" selected>苹果</option>
<option value="1">猕猴桃</option>
<option value="1">杏子</option>
</optgroup>
<optgroup label="蔬菜">
<option value="1">西红柿</option>
<option value="1">白菜</option>
<option value="1">油麦菜</option>
</optgroup>
</select>
textarea
没什么写的 懒得写
datalist
<input type="text" value="输入明星" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>刘德华</option>
<option>刘若英</option>
</datalist>
fieldset
为表单项进行分组
<form>
<fieldset>
<legend>分组名</legend>
<input />
...
</fieldset>
</form>
网友评论