• Chapter4 Web表单

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 传统表单翻新

    传统表单:http://www.prosetech.com/html5/Chapter%2004/ZooKeeperForm_Original.html

    翻新表单:http://www.prosetech.com/html5/Chapter%2004/ZooKeeperForm_Revised.html

    占位符显示文本

    <input id="name" placeholder="Jane Smith" autofocus="" required="">

    一般是浅灰色的文本,也叫水印,不支持此属性的浏览器会忽略它,比如IE,可以通过Javascript补丁来使得IE支持(http://tinyurl.com/polyfills

    autofous属性石自动获取焦点,一个表单中只能有一个元素具备这个属性。IE不支持,可以利用第一章中的Modernizr来检测

    为了获取更好的用户体验,可以在文本框获得焦点的时候改变样式

    input:focus {

    1. background-colorlightyellow;

    }

    • 验证

    比如required属性在表单提交时会触发HTML5的验证,如果有元素为空则给出相应的提示

    某些情况下需要关闭验证功能,只在服务器端处理,可以在form表单中添加novalidate属性  <form id="myForm" action="/do?action=test" novalidate></form>

    验证样式挂钩:

    required和optional(选填)
    valid(有效)和invalid(无效)
    in-range和out-of-range:根据空间的min和max属性判断是否超出范围
    这些伪类的作用可以体现在突出显示验证的结果
    input :required :invalid{
        background-color:lightyellow;
    }

    正则表达式

    [A-Z]{3}-[0-9]{3}:表示必须是从A-Z的3个大写字母,一个短横线,从0-9的3个数字拼接而成的字符串
    <input id="name" placeholder="XXX-023" title="3个大写字母-3个数字" pattern="[A-Z]{3}-[0-9]{3}">

    自定义验证

    使用javascript进行表单验证,可以调用setCustomValidity()方法,提供一条错误消息
    function validateComments(input) {
       if (input.value.length < 20) {
         input.setCustomValidity("你需要评论更多内容!");
       }
       else {
         //如果没有错误就清楚错误提示
         input.setCustomValidity("");
       }
    }

    此外,可以调用现成的用于验证表单的javascript类库,比如webforms2(http://github.com/westonruter/webforms2)

    几个特殊的输入属性
    spellcheck检测用户输入的是否是单词,设为true表示进行拼写检查
    autocomplete  自动完成功能
    autocorrect  自动纠错功能,适用于移动设备
    autocapitalize  自动大小写 ,适用于移动设备
    multiple     <input>元素可以添加这个属性,包括用于上传文件的file类型和email类型,在支持的浏览器中可以多个文件一起上传

    • 新的输入控件

    email    <input id="email" type="email" required><br>

    url

    search

    Tel

    number     <input id="age" type="number" min="0" max="120" step="0.1" required><br>

    range   滑动条    <input id="weight" type="range" min="50" max="1000" value="160">

    datetime

    date

    month

    week\time

    color

    • 新元素

    datalist

    <datalist>可以在普通文本框中添加一个下拉建议列表

    <form id="zooKeeperForm" action="#">

      <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>

      <fieldset>

        <legend>What's Your Favorite Animal?</legend>

        <datalist id="animalChoices">

        <span class="Label">Pick an option:</span>

          <select id="favoriteAnimalPreset">              <!--添加select元素在这里面是为了在不支持dalalist的浏览器中也能够正常显示,因为只有少部分浏览器支持这个元素-->

            <option label="Alpaca" value="alpaca">

            <option label="Zebra" value="zebra">

            <option label="Cat" value="cat">

            <option label="Caribou" value="caribou">

            <option label="Caterpillar" value="caterpillar">

            <option label="Anaconda" value="anaconda">

            <option label="Human" value="human">

            <option label="Elephant" value="elephant">

            <option label="Wildebeest" value="wildebeest">

            <option label="Pigeon" value="pigeon">

            <option label="Crab" value="crab">

          </select>

        <br>

        <span class="Label">Or type it in:</span>

        </datalist>

        <input list="animalChoices" id="favoriteAnimal">

      </fieldset>

      <p><input type="submit" value="Submit Application"></p>

    </form>

    progress 和meter 

     进度条和计量条。在不支持的浏览器下显示为后备内容,即元素中的文本内容

    <progress max="100" value="50">50%</progress>

    <meter min="5" max="100" high="70" value="79">79 pounds</meter>

    • 网页中的HTML编辑器

    可以使用contentEditable和designMode两个属将浏览器转变为简单的HTML编辑器

    http://www.prosetech.com/html5/Chapter%2004/ElementEditing.html

    http://www.prosetech.com/html5/Chapter%2004/PageEditing.html

    contentEditable加到任意元素上都可以使得该元素的内容可以编辑。这个功能是可以向用户提供一种简单便捷的编辑HTML内容的方式。但如果需要富文本的话还是使用已经成熟的编辑器吧。(http://ajaxian.com/archives/richtexteditors-compared提供一些可选择的富文本编辑器,学习元用的就是CKEditor)

    designMode属性可以让用户编辑整个页面,把要编辑的文档放到一个iframe元素中,然后在父页面就可以控制编辑过程了。

    • 标签:
    • input
    • 属性
    • 编辑器
    • chapter4
    • 验证
    • 元素
    • id
    • label
    • 表单
    • value
    • option
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部