以前我一直在使用<table>
标签来构造一个表单,以便我们使用一个很好的格式化表单,以便每个标签和字段彼此在线,如下所示:
Email: [############]
Password: [############]
但是这里有一个语义问题,表单并不完全是表数据。因此,在表格适合图形的地方,它不在语义级别上。
构建表单的正确方法是什么,使其在数据类型方面图形上也令人愉悦并且语义上正确?
这篇A List Apart 文章正是这样做的。
它使用语义正确的标签和 CSS 样式来构建具有稳定边距的无表格表单。简而言之,它使用label
标签来显示文本,并赋予它们固定的宽度,以使表单域从相同的水平位置开始。
有关具有灵活尺寸的解决方案,请参阅流体输入元素。
尝试使用<fieldset>
然后自定义您的 CSS 以获得更好的外观。
<fieldset>
<legend>Login</legend>
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
<br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<br />
</fieldset>