语义化——表单

    技术2022-05-11  60

    语义化——表单

    翻译自htmldog.com

    Labels - 标签

    每个表单的元素都应该有它自己的label。label标签,可以使用for属性连接一个label和表单元素。

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

    标签可以被可视化浏览器渲染成可以点击的,点击后光标会显示在关联的表单元素内。

    效果:

    Your Name

    注:name和id都是需要的,name是由表单处理用,而id是给label做连接用。

    Field sets and legends - 分组信息和标题

    你能够分组不同的元素,比如说基本信息(姓氏、名字、职位等)或者联系信息(地址、城市、邮编、国家等),使用fieldset标签可以实现。

    在一个组内,你可以用legend标签来设置一个标题。

    注:可视化浏览器把fieldset渲染为带边框的,legend一般显示在左上角。

    <form action="somescript.php" ><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>...

    效果:

    NameFirst name Last name AddressAddress Postal code

    Option groups - 选项组

    optgroup标签可以给select元素的options分类。需要使用一个label属性,在可视化浏览器里,它的属性值会在下拉列表(select)里显示为一个不可选的、缩进标题。

    <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>

    效果: GambiaMadagascarNamibia FranceRussiaUK CanadaMexicoUSA

    Navigating fields - 表单内的导航

    和链接一样,在没有光标设备(如鼠标)的情况下,表单元素、组也可以自由导航。对于表单内的导航,也可以使用和链接一样的方法,tab导航和快捷键。

    accesskey和tabindex属性可以添加到每个独立的表单标签上,比如input,甚至是legend标签。

    <input type="text" name="firstName" accesskey="f" tabindex="1" />  

    最新回复(0)