很好地布置表格答案

【问题标题】：Laying out form nicely很好地布置表格
【发布时间】：2015-05-06 08:08:38
【问题描述】：

有人可以给我一个提示，告诉我应该如何将这个表单布局得漂亮整洁。我尝试过使用列表、表格和 div，但不知道哪个是最好的。

Contact Information:
    <div class="formsubmit"><label>Name:</label><input type="name"  name="name" placeholder="John Doe" required />
	<label>Email:</label><input type="email" name="email" placeholder="john_doe@example.com" required /><span class="form_hint">Proper format "name@something.com"</span>
	<label>Telephone:</label><input  type="tel" name="telephone" placeholder="##########" required pattern="[0-9]{10}"/>
      <span class="form_hint">Proper format "##########"</span>

      

	Type:
    <input type="checkbox" name="Type" value="condo" id="condo"><label>Condo</label>
    <input type="checkbox" name="Type" value="house" id="house"><label>House</label>


<input type="checkbox" name="title" value="freehold" id="freehold"><label>Freehold</label>
<input type="checkbox" name="title" value="leasehold" id="leasehold"><label>Leasehold</label>
<input type="checkbox" name="title" value="coop" id="coop"><label>Co-op:</label><a class="footnote">Check all that apply</a>

【问题讨论】：

您列出的所有类型都可以完成这项工作并且看起来不错。这只是样式问题。与每一个混在一起，找到最适合你的。桌子可能不是这里最好的，因为它会限制你一点，但任何人都可以完成这项工作。看看Codepen 给你一些想法。
你应该把编程问题带到这里来。没有按预期工作或按您预期工作的代码。在这种情况下，您的问题不是编程问题。你要找的是设计师。
好像是在做表格，那你得用label
正如@Andrei 所说... stackoverflow 专门用于询问有关特定技术问题的问题。这个问题不适合那个，并且会导致个人意见而不是一个独特的解决方案。请尝试在ux.stackexchange.com 上提问

标签： html css forms

【解决方案1】：

看来您正在制作HTML form，那么您必须编写正确的语义代码。使用form 标签和fieldset legend 并使用标签for ="ID"

检查Demo。

label, input{float:left; display:block;}
div{clear:left; padding:5px 0}
label{text-align:left; width:30%;}

 <form action=" " method="post">
     <fieldset>
    <legend>Contact Information: </legend>
    
   <div> <label for="f_name">First Name </label>
     <input type="text" id="f_name" /></div>
    <div> <label for="l_name">Last Name </label>
      <input type="text"  id="l_name" /></div>
     </fieldset>
  </form>

【讨论】：

如果您的问题解决了，那么您可以通过接受答案来关闭此答案。