表单:
action、method、enctype、name、target
<input>.type可取的值:text、password、hidden、radio、checkbox、image、submit、reset、button
属性没有太多变化和以前一样
disabled:设置首次加载,禁用(在显示上为禁用效果)
readonly:设为只读,用js改变属性(在显示上与其他元素没有区别,无法进行编辑7)
label:定义标签,可以指定id、class、style等属性,还有onclick等事件属性和h4相同,除此之外还有以下属性:
for:设置关联的表单控件的id属性(隐藏关联)
显示关联是将控件放在lable里
作用:对标签产生的事件将会转移到关联控件上,比如标签获得焦点,其实是标签关联的控件获得的焦点
显示关联IE浏览器不支持
示例:
<label>密码:<input type="text" name="pwd"></label>
<label for="username">用户名:</label>
<p><input type="text" id="username"></p>
新增按钮:
<button>:用做一个按钮,内部可以包括普通文本、文本格式、图像等
不能再button之间放置图片映射
disabled:指定是否禁用此按钮
name:指定按钮名称
type:指定属于那种按钮:button、submit、reset等
value:指定按钮初始值(可不写)
示例:
<button type="button"><b>提交</b></button>
<button type="reset" name="ret"><b>重置</b></button>
<button type="submit" name="sub"><img src="图片路径"></button>
下拉列表:
optgroud:定义列表项或菜单想组
label:该项的标签,必填
dislabel:禁用该列表框
multiple:是否多选
size:同时可以显示几个列表项
option:列表项
selected:是否被选中
value:请求的值
示例:
<select name="city">
<optgroup label="河北省">
<option value="石家庄">石家庄</option>
<option value="唐山">唐山</option>
<option value="秦皇岛">秦皇岛</option>
</optgroup>
<optgroup label="陕西省">
<option value="西安">西安</option>
<option value="榆林">榆林</option>
<option value="汉中">汉中</option>
</optgroup>
</select>
新增表单控价属性:
fromenctype:通过动态按钮改变表单enctype属性
formmethod:通过动态按钮改变表单以get或post提交
formtarget:通过动态按钮改变表单target属性
formaction:通过动态按钮改变表单提交到不同的url
示例:
<form name="form1" action="网址" method="post">
手机号:<input type="tel" name="tel"><br>
短信验证码:<input type="number" name="code"><br>
<inpput type="submit" name="but1" value="登录">
<input type="submit" name="but1" value="注册" formaction="网址" formmethod="get" formtarget="_blank">
</form>
autofocus:浏览器打开该页面时,改组件自动获得焦点
打开页面时只能有一个控件获得焦点
placeholder:当用户还未在单行文本框、多行文本框中输入内容时,单行文本框、多行文本框内就显示对用户的提示信息,一旦用户开始输入,单行文本框、多行文本框内的提示信息会自动消失
示例:
手机号:<input type="tel" placeholder="请输入手机号" name="tel" autofocus>
list:list与datalist结合使用,是datalist的id属性值
datalist:相当于看不见的selsct元素,用于生成一个下拉菜单,datalist所能包含的子元素与select元素完全相同,该元素用于指定了list属性的input结合使用
为了保证list属性具有较好的、一致的行为,建议使用datalist定义下拉菜单时,让每个option元素的文本与value属性值完全相同
示例:
<input type="search" name="search" list="info">
<input type="submit" name="but" value="搜索">
<datalist id="info">
<option>服务器</option>
<option>域名</option>
<option>虚拟机</option>
</datalist>
新增文件上传
file:新增属性
accept:控制允许上传文件类型
该属性有一个或多个mime值,多用.分开
multiple:该属性设置是否选择多个文件
新增客户端校验
使用校验属性执行校验
required:该属性指定表单控件必填
pattern:该属性指定该表单控件的值必须符合指定的正确表达式,该属性必须是一个合法的正则表达式
关联属性:for-id,label-id,list-datalist(id)
通用属性:disabled,raedonly,required,placeholder
formXXX:formaction,formmethod,formarget,formenctype
selest:opgroup,label,datalist