表单元素

//autofocus 1.自动获取焦点  2.autocomplete:on 打开 off关闭 必须配合name属性(获取提交记录) 3.required 必须填写内容不然不可以提交
4.pattern正则表达式验证 "^(\+86)?1\d{10}$"   5.<form id="#"></form>   <input form="#"> 一起提交  6.<keygen>加密</keygen>
7.<output>显示信息不能修改</output>  8.key 不同的话不会复用 9.disabled 值为false时不可以选中 
(oninput 监听元素内容的改变 ,onkeyup键盘弹起才会触发,oninvalid 验证不通过触发)  设置默认的提示信息 setCustomValidty

//进度条 <progress max="" value="当前的进度"></progress>
  度量器 <meter max="" min="" high="" low="" value=""></meter>  
  填表的外边框 <fieldset><legend>学生档案</legend></filedest>    

一: 1.input 输入框 type=(1.text文本框 2.password密码框 2.5 number(step="增加的数字")数字框 3.date日期选择框 4.search搜索框 5.range滑块 
6.color颜色选择框  7.checkbox多选框 8.radio单选框 9.file 选择资源上传 10.email 电子邮件 multiple多个邮箱 11.tel 电话 12.url 网址 13.tiem 时间 
14.datetime-local 日期时间 15.week 周  16.file 选择文件 multiple) 
##type值为 1.reset 2.button 3.submit  按钮
value(输入的值) placeholder(文本没有内容时 提示内容)

二:select元素  通常和option配合使用
1.下拉列表 <select>
             <option selected默认选中>成都</option>
          </select>
2.下拉列表分组<select>
           <outgroup label分组="">
             <option>成都</option>
           </outgroup>
            <outgroup label分组="">
             <option>志勋</option>
           </outgroup>
      </select>
3.多选<select multiple>
           <outgroup label分组="">
             <option>成都</option>
           </outgroup>
            <outgroup label分组="">
             <option>志勋</option>
           </outgroup>

三:textarea  行盒
文本域,多行文本框
1.<textarea cols="30"行 rows="10"列></textarea>

四:按钮元素
1.button <button type="button">文字 图片</button>

五:配合表单元素的其他元素
1.lablel
2.for 让label元素关联一个表单元素 for属性对应id属性  这是显式关联  隐式关联是label 里面放input
请选择性别
<input id="radMale" name="gender" type="radio">
<label for="radMale">男</label>
<input id="radFemale" name="gender" type="radio">
<!-- <label for="radFemale">女</label>   点文字也可以选中 -->

六:datalist
数据列表  该元素不会显示到页面 配合普通文本框使用
<input list="userAgent" type="text">
<datalist id="userAgent">
    <option value="Chrome" label="辅助说明的作用">谷歌</option>
    <option value="IE">IE</option>
    <option value="Safari">苹果</option>
    <option value="Fire fox">火狐</option>
</datalist>

七:form
通常,会将整个表单元素放置form元素的内部,当提交表单时,会将form元素内部的内容以合适的方式提交到服务器

八:
<fieldset>
    分组<legend>分组姓名</legend>
</fieldset>
#表单状态
1.readonly 布尔属性 是否只读 不会改变表单显示样式
2.disableed 布尔属性 是否禁用 ,会改变表单显示样式


##新的伪类
1.focus
元素聚焦时的样式
tabindex="n" 按住tab健切换的顺序 
outline外边框 <outline-offset:0;偏移量>

2.checked 单选或者多选被选中的样式
input:checked{  }

##常见用法
1.重置单元表样式
2.设置textarea是否允许调整尺寸  resize:both默认值 none不能调整尺寸 horizontal:水平 vertical垂直
3.文本框边缘到内容的距离padding text-intent
4.控制单选和多选的样式