新表单元素

1. 增强型表单

1.1. 增强型表单第一组 -- 新的 input type 类型

• <input type=? />
• H5 之前的 input type 类型
  • text, password, radio, checkbox, file, hidden, submit, reset, button, image
• H5 新增的 input type 类型
  • email, number, url, search, tel, range, color, date, month, week

1.2. 增强型表单第二组 -- 新的表单元素

• H5 之前的表单元素

  • input, select / option, textarea, button

• H5 新增的表单元素

  1. datalist: 数据列表, 本身不可见, 用于为其他的 input 提供输入建议列表

     • Ex:

       <datalist id='lunch'>
       	<option value='yxrs'>鱼香肉丝</option>
       	<option value='jjrs'>京酱肉丝</option>
           <option value='qjrs'>青椒肉丝</option>
           <option value='fqcd'>番茄炒蛋</option>
       </datalist>
       您的晚餐: <input type='text' list='lunch' />
       

       • 展示效果:

  2. progress: 进度条

     • <progress></progress>: 左右晃动的进度条
     • <progress value='0.5'></progress>: 具有指定进度百分比的进度条

  3. meter: 刻度尺, 衡量尺; 以 '红黄绿' 三种颜色表示一个值所处的范围: '警告 / 不可接受', '可以接受', '最优范围'

     • <meter min='可能的最小值' max='可能的最大值' low='合理的下限' high='合理的上限' optimum='最优值' value='当前实际值'></meter>

     • 最优值在 low 和 high 之间: 黄 - 绿 - 黄

       • Ex: 0 <= value <= 29 黄色, 30 <= value <= 70 绿色, value > 70 黄色

         <meter min='0' max='100' low='30' optimum='55' high='70' value='0'></meter>
         

     • 最优值在 low 之下: 绿 - 黄 - 红

       • Ex: 0 <= value <= 100 绿色, 101 <= value <= 300 黄色, 301 <= value 红色

         <meter min='0' max='500' low='100' optimum='10' high='300' value='0'></meter>
         

     • 最优值在 hige 之上: 红 - 黄 - 绿

       • Ex: 0 <= value <= 19999 红色, 20000 <= value <= 69999 黄色, 70000 <= value 绿色

         <meter min='0' max='100000' low='20000' optimum='90000' high='70000' value='0'></meter>
         

  4. output: 输出值, 典型的语义标签, 表明其中的内容是其他值经过运算后得到的输出结果, 默认样式与 span 相同

1.3. 增强型表单第三组 -- 表单元素新属性

• H5 之前的表单元素属性

  • id, class, style, title, name, value, type, checked, selected, disabled, readonly

• H5 新增的表单元素属性

  • 普通的表单属性

    1. autofocus: 布尔值, 是否自动获取输入焦点

       • <input autofocus />

    2. placeholder: 字符串, 在输入框中没有提示输入时的占位性质的提示文字, 与 value 不同, 不能用于提交

    • <input placeholder="提示性文字" />

    3. multiple: 布尔值, 是否允许存在多个值, 一般需要和特殊的输入组合使用, Ex: <input type='file' />

    • <input type='file' multiple />

    4. form: 字符串, 用于指定当前输入域( 这里的输入域一般指放在 form 元素之外的表单元素 ) 所属表单

    <form id="formTest"> ......  </form>
    <input form="formTest" />
    

  • 与输入验证相关的表单元素属性

    1. required: 布尔值, 验证表单元素必填项, 不允许为空
       • <input required />
    2. minlength: 限定表单元素输入的最小长度( 在有输入的情况下 )
       • <input minlenght='6' />
    3. maxlength: 限定表单元素输入的最大长度( 在有输入的情况下 )
       • <input maxlength="9" />
    4. min: 限定表单元素输入的数值的最小值
       • <input min="18" />
    5. max: 限定表单元素输入的数值的最大值
       • <input max="60" />
    6. pattern: 正则表达式验证, 可以省略 ^ 和 $
       • <input pattern="1[3578]\d{9}" />

1.4. H5 新增与验证相关的 JS 对象级属性

• input.validity{ // 验证输入框的输入的有效性
    badInput: false, // 无效的输入, Ex: emial 输入无效
    customError: false, // 是否存在自定义错误
    patternMismatch: false. // 不匹配指定的正则表达式
    rangeOverflow: false, // 值 上溢出, 输入的数字值超过 max
    rangUnderflow: false, // 值 下溢出, 输入的数字值小于 min
    stepMismatch: false, // 步长不匹配
    tooLong: false, // 内容太长, 输入的内容超过了 maxlength 限制
    tooShort: false, // 内容太短, 输入的内容不满足 minlength 限制
    typeMismatch: false, // 类型不匹配, Ex: number 中出现字符
    valueMissing: false, // 值缺失, Ex: required 验证失败
    valid: true // 当前输入值有效
  }
  

  • 上述的属性值与 H5 的表单验证相关属性相对应, 若违反了某个验证属性, 上述属性之一就会变成 true -- 使用这些属性可以实现不读取 value, 对输入进行验证

  • 注意:

    1. 最后的 validity.valid 属性, 只有其他属性都为 false ( 没有任何错误 ), valid 的值才为 true; 只要任何一个其他属性的值为 false, valid 的值就为 false
    2. 上述属性的值会随着输入域中值的变化而立即变化, 无需等到表单提交
    3. 使用 input.setCustomValidity('xxx') 可以生成一条自定义错误消息, 使得 validity.customError 属性值为 true, 若执行 input.setCustomValidity('') 可以删除自定义错误消息, 是的 validity.customError 的属性值为 false
    4. 自定义错误消息的优先级高于任何系统自带的错误消息

  • Ex:

    <form>
      登录名称: <input type="text" name="txtUname" id="txtUname" required /></br>
      登录密码: <input type="password" name="pwdUser" id="pwdUser" minlength="6" maxlength="12" /></br>
    	用户年龄: <input type="number" name="numAge" id="numAge" min="18" max="30" />
    	<span class="ageValidText"></span></br>
    	<input type="submit" />
    </form>
    <script type="text/javascript">
    	var uName = document.getElementById('txtUname')
      var numAge = document.getElementById('numAge')
      // 登录名添加验证
      uName.addEventListener('blur', function () {
        // H5 之前的输入验证
        // if (this.value.length === 0) { ...... }
        // H5 中的输入验证
        if (this.validity.valueMissing) {
          var errMsg = '登录名不能为空'
          alert(errMsg)
          this.setCustomValidity(msg)
        } else {
          this.setCustomValidity('') // 清除自定义错误消息
        }
      })
      // 年龄添加验证
      numAge.addEventListener('blur', function () {
        if (this.validity.rangeUnderflow) {
          var msg = '用户的年龄太小了'
        } else if (this.validity.rangeOverflow) {
          var msg = '用户的年龄太大了'
        } else {
          var msg = ''
        }
        this.nextElementSibling.innerHTML = msg
        this.setCustomValidity(msg)
      })
    </script>