zoukankan      html  css  js  c++  java
  • 亲和表单【转】

     

      

    导航和成文的内容是一种情况,而表单域和信息输入的跳跃又是另一回事儿。因此,为表单增加更多元素,使得表单更易用和更具亲和力未尝不是一个是好注意。

    标记

    每一个表单域都应该有一个自己的标记label标签挑选出来,跟for属性一起与一个表单元素关联。

    <form> <label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" /> ... 

    标记为可视化浏览器处理本身使得标记自己可点击增加好处,使相关表单域获得焦点。

    注意:nameid两者都是必须的──name为表单处理该表单域,id为标记关联到表单。

    分组与图例说明

    你可以为表单域分组,比如名字(姓,名,头衔等)或者地址(第一行,第二行,县,地区,邮编,国家等)。使用fieldset标签。

    在表单域的分组内,你可以使用legend标签产生图例说明

    注意:可视化浏览器倾向于用围绕在表单组周围的边框来显示,而图例说明打破左上方的边框而显示。

    <form> 
    <fieldset>
     <legend>Name</legend> 
    <p>First name <input type="text" name="firstName" /></p>
     <p>Last name <input type="text" name="lastName" /></p> 
    </fieldset>
     <fieldset> 
    <legend>Address</legend> 
    <p>Address <textarea name="address" ></textarea></p> 
    <p>Postal code <input type="text" name="postcode" /></p> </fieldset> ... 

    选项分组

    optgroup标签用于在一个层叠式选择菜单为选项分类,label属性是必须的,在可视化浏览器中,它的值将会是一个不可选的伪标题,为下拉列表分组。

    <select name="country"> 
    <optgroup label="Africa"> 
    <option value="gam">Gambia</option> 
    <option value="mad">Madagascar</option> 
    <option value="nam">Namibia</option> 
    </optgroup> 
     
    <optgroup label="Europe"> 
    <option value="fra">France</option> 
    <option value="rus">Russia</option> 
    <option value="uk">UK</option> 
    </optgroup>
     
     <optgroup label="North America">
     <option value="can">Canada</option>
     <option value="mex">Mexico</option> 
    <option value="usa">USA</option>
     </optgroup> 
    </select> 

    导航域

    像连接,表单域(和表单分组)需要为没有指点设备(比如鼠标)的用户导航。与连接相同的方法也可以用在表单元素上,使得任务更容易──tab逗留快捷键

    可以为inputlegend等独立表单标签设置accesskeytabindex属性。

    <input type="text" name="firstName" accesskey="f" tabindex="1" />
  • 相关阅读:
    【Python爬虫学习笔记10】多线程中的生产者消费者模式
    【Python爬虫学习笔记9】threading多线程
    【Python爬虫学习笔记8-2】MongoDB数据库操作详解
    【Python爬虫学习笔记8-1】MySQL数据库和MongoDB数据库存储概述
    【Python爬虫学习笔记7】CSV文件存储
    好书一起读(85):算法笔记
    好书一起读(82):电脑的原理
    写个shell脚本
    Scala基础语法
    初识函数式编程的一点漫谈
  • 原文地址:https://www.cnblogs.com/MSIKRUBY/p/1635950.html
Copyright © 2011-2022 走看看