html5新增表单控件和表单属性

表单验证

  Invalid事件 : 验证反馈

  input.addEventListener('invalid',fn,false)

  阻止默认验证:ev.preventDefault()

  formnovalidate属性 : 关闭验证

  <form action= "http://www.baidu.com">
    <input type= "text" id= "text" placeholder= "请输入4~16个字符" name= “user" pattern= "\d{1,5}" required />
    <input type= "submit" value= "提交"/>
    <input type= " submit" value= "保存至草稿箱" formaction= http://www.baidu.com formnovalidate/>
  </form>

    新的输入型控件:

      <form>

        <input type="email" />  ·邮箱

        <input type="submit" value="提交"/>

      </form>

      

      -----------------------------------------------------------------------------

      <form>

        <input type="tel" />  ·电话号码

        <input type="submit" value="提交"/>

      </form>

       ------------------------------------------------------------------------------

      <form>

        <input type="url" />  ·网址

        <input type="submit" value="提交"/>

      </form>

      

      ------------------------------------------------------------------------------

      <form>

        <input type="search" />  ·搜索引擎

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------------

       <form>

        <input type="range" step="2" min="0" max="10" value="2"/>  ·特定范围内的数值选择器

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------

      <form>

        <input type="number" />  ·只能包含数字的输入框

        <input type="submit" value="提交"/>

      </form>

      

      -------------------------------------------------------------------------

      <form>

        <input type="color" />  ·颜色选择器

        <input type="submit" value="提交"/>

      </form>

      

      -----------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示日期

        <input type="submit" value="提交"/>

      </form>

      

      ------------------------------------------------------------------------

      <form>

        <input type="time" />  ·显示时间,不含时区

        <input type="submit" value="提交"/>

      </form>  

       

       ------------------------------------------------------------------------

      <form>

        <input type="datetime-local" />  ·显示完整日期 不含时区

        <input type="submit" value="提交"/>

      </form>  

       

      ------------------------------------------------------------------------

      <form>

        <input type="date" />  ·显示周

        <input type="submit" value="提交"/>

      </form>  

      

       ------------------------------------------------------------------------

      <form>

        <input type="month" />  ·显示月

        <input type="submit" value="提交"/>

      </form>  

      

      ------------------------------------------------------------------------

      <form>

        <input placeholder="请输入4~16个字符" />  ·输入框提示信息

        <input type="submit" value="提交"/>

      </form> 

       

      ------------------------------------------------------------------------

      <form>

        <input name="a" autocomplete="off"/>  ·不保存用户输入值

        <input type="submit" value="提交"/>

      </form> 

       

      ------------------------------------------------------------------------

      <form>

        <input autofocus="autofocus" />  ·自动聚焦

        <input type="submit" value="提交"/>

      </form> 

      

      ------------------------------------------------------------------------

      <form>

        <input required="required" />  ·必须填

        <input type="submit" value="提交"/>

      </form> 

       

      ------------------------------------------------------------------------

      <form>

        <input pattern="\d{1,5}" />  ·正则验证,1-5位数字  ----了解

        <input type="submit" value="提交"/>

      </form> 

      

 

posted @ 2019-05-15 11:13  黑太阳-  阅读(662)  评论(0编辑  收藏  举报