《编写高质量代码》笔记--语义化的表单

 

<form action="" method="">
    <fieldset><!--域集-->
        <legend>登录表单</legend><!--域集名(表单用途)-->
        <p>
            <label for="username">用户名:</label><!--表单项说明-->
            <input type="text" name="username" id="username" value="" /><!-- 表单项-->
        </p>
        <p>
            <label for="pwd">密　码:</label>
            <input type="text" name="pwd" id="pwd" value="" />
        </p>
        <p>
            <input type="submit" value="登录" />
        </p>
    </fieldset>
</form>

 

效果: 

登录表单

用户名:

密　码:

  

　因为fieldset默认有边框，而legend也有默认的样式。

　为满足设计需求，可将fieldset的"border"设为"none"，将legend的"display"设为"none"，以此来兼顾语义和设计两方面的要求。