zoukankan      html  css  js  c++  java
  • html5新增表单元素

    1.验证

    <form>

    <input type="email"></input>    验证邮箱

    <input type="url"></input>        验证网址

    <input type="tel"></input>        验证电话

    <input type="number" min="1" max="10" step=“1”></input>        验证数字

    <input type="range" min="1" max="10"></input>     设置进度条

    <input type="color"></input>    调出颜色面板

    <input type="date"></input>    年月日

    <input type="month"></input>   年月

    <input type="week"></input>  选择第几周

    <input type="submit"></input>

    </form>

    2.autocompelate设置自动匹配

    <form autocompelate="on">

    <input type="text" list="taglist"></input> 

    <datalist id="taglist">

         <option>wuhan</option>

         <option>beijing</option>

         <option>guangzhou</option>

         <option>guangxi</option>

    </datalist>

    </form>

    3.自动获取焦点

    <input type="text" autofocus="autofocus"></input> 

    4.提交页面(如何在form外面进行提交表单元素)

    <form action="index.aspx" method="post"   id="from1">

     <input type="text" name="username"></input>

    <input type="submit"></input>

    </form>

    <input type="password" form="from1"></input>

    5.设置表单提交的时候,密码提交到另外页面当中

    <form action="index.aspx" method="post"   id="from1">

     <input type="text" name="username"></input>

    <input type="password" name="pwd" formaction="index1.aspx" ></input>

    <input type="submit"></input>

    </form>

    6.上传控件

    <input type="file" multiple="multiple"></input>   上传控件

    7.验证文本

    <form>

    <input type="text" pattern="{0-9}{6}"  title="请输入邮编"></input> 

    <input type="submit" ></input> 

    </form>

    8.

    <input type="text"  placeholder="请输入用户名"></input>  提示输入内容

    <input type="text"  required="required"></input>   输入内容不能为空

    9.可以编辑段落数据

    <p contenteditable="true">sddddd</p>

    10.隐藏段落信息

    <p hidden="hidden">sddsdsds</p>

    11.设置tab的顺序

    <a href="#" tabindex="2">dsdsdsds</a>

    <a href="#" tabindex="1">dsdsdsds</a>

    <a href="#" tabindex="3">dsdsdsds</a>

    <a href="#" tabindex="4">dsdsdsds</a>

  • 相关阅读:
    Java知多少(81)框架窗口基础
    Java知多少(80)图形界面设计基础
    Java知多少(79)哈希表及其应用
    Java知多少(78)Java向量(Vector)及其应用
    Java知多少(中)
    Java知多少(77)日期和时间类
    Java知多少(76)语言包(java.lang)简介
    Java知多少(75)Object类
    Java知多少(74)基础类库
    Java知多少(73)文件的压缩处理
  • 原文地址:https://www.cnblogs.com/wlming/p/7597400.html
Copyright © 2011-2022 走看看