<table> <tr> <td>name:</td> <td><input type="text" /></td> <td ID="nameError">*</td> </tr> <tr> <td>Phone:</td> <td><input type="text" /></td> <td ID="PhoneError">*</td> </tr> <tr> <td>Birthday:</td> <td><input type="text" /></td> <td ID="BirthdayError">*</td> </tr></table>
这似乎不是很好的CSS,但我不知道如何使用面向CSS的布局来使这项工作正常.
什么是最佳做法?
解决方法 我不知道你们,但我没有使用太多的标记来进行表单布局.这是一个简单登录表单的标记(没有布局标记,即div,表等)
<form method="post"> <label>Username</label> <input type="text" name="username" /> <label>Password</label> <input type="password" name="password" /> <input type="submit" name="Log In" /></form>
这是表单的CSS
label,input{float:left}label,input[type="submit"]{clear:left}
这是结果
令人惊奇的是:
>缺乏加价
>缺乏CSS
>灵活性
如果查看CSS,标签元素将被清除(并向左浮动).这意味着标签将与其他输入一起浮动,但每个标签都是一个新行.
这使得添加额外输入变得非常容易.甚至输入后的验证消息
以此表格为例
<form method="post"> <label>name</label> <input type="text" name="username" /> <label>Password</label> <input type="password" name="password" /> <label><abbr title="Date of Birth">D.O.B.</abbr></label> <input type="text" name="dob_day" /> <input type="text" name="dob_month" /> <input type="text" name="dob_year" /> <input type="submit" name="Log In" /></form>
有了这个CSS
label,input[type="submit"]{clear:left}input[name^="dob_"]{wIDth:44px;margin:2px}label{wIDth:70px}
我们明白了
真的很简单:)
使用这个概念,您可以创建大量的可能性,您将永远不必再使用表格进行布局!
总结以上是内存溢出为你收集整理的在html – 表格或流程中进行表单布局的最佳实践?全部内容,希望文章能够帮你解决在html – 表格或流程中进行表单布局的最佳实践?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)