1. 首页
  2. 问答
  3. 带CSS的HTML表单布局

带CSS的HTML表单布局

2009-04-10 50 views
15

我需要为数据输入构建一个表单，比如说FirstName和LastName。我知道如何用桌子做到这一点。在第一个<td>中，我会放置一个标签标签，在第二个标签中，我会使用带有type="text"属性的输入标签。这样标签和文本框会排成两列。带CSS的HTML表单布局

有没有办法用CSS做到这一点？

来源

2009-04-10 user80603

回答

13

Here's a tutorial for this.

来源

2009-04-10 00:27:08

+2

请注意 - 该教程已BR标签在HTML，这就是不好 – 2012-09-21 18:00:35

+0

@OlegMikheev可以为了避免使用`
`，将每一行表单放在`

`中。 – 2013-09-03 10:18:59

1

CSS将正常工作 - 如果你是好与进入的东西像素宽度但是，当你需要本地化的字符串，发现标签不符合黯然失败。对于地址输入表单，我会坚持使用表格，因为他们在所有浏览器上都做了正确的重新调整大小和打包行为，并且无需工作即可解决问题。

编辑：我有点怀疑是否有任何倒票选民检查了这些S.O.的布局。页面

来源

2009-04-10 00:36:43

+1

有点，我同意。 CSS在理论上很好，如果它运行良好，它会很棒，但每次我尝试使用它进行布局时，我都会花费数小时的时间进行测试和调试，以便在几分钟内完成表格所能做的事情。然后，一旦我得到它的工作，它在另一个浏览器看起来不正确！ – PTBNL 2009-04-11 01:27:00

0

自己做这件事的一个很好的方法是在firefox上安装firebug，然后检查实现这个功能的网站上的元素。

有一个伟大的smashing maagzine on sign up forms。可以看到CSS中的几种方法，有一些非常棒的例子。

来源

2009-04-10 21:32:05

8

你不需要表格来制作出色的HTML表单。事实上，你不想要他们！在家里试试这个代码，看看你的想法..

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Contact info</title> 

<LINK href="main2.css" type="text/css" rel="stylesheet"> 

<!--[if IE]> 
<style> 
    fieldset.nested 
    { 
     position: relative; 
     margin-top: 15px;   
    } 

    fieldset.nested legend 
    { 
     position: absolute; top: -8px; left: 1em; 
    } 
</style> 
<![endif]--> 

</head> 

<body> 

<div>  
    <form> 

    <fieldset class="main"> 
     <legend>Contact info</legend> 

     <fieldset class="nested"> 
      <legend>Name</legend>  
      <ol> 
       <li> 
        <label for="textboxName">Name</label> 
        <input id="textboxName" name="textboxName" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxName" >Title</label> 
        <input id="textboxName" name="textboxTitle" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxCompany">Company</label> 
        <input id="textboxCompany" name="textboxCompany" type="text" style="width: 15em;"/> 
       </li> 
      </ol> 
     </fieldset>   

     <fieldset class="nested"> 
      <legend>Address</legend>  
      <ol> 
       <li> 
        <label for="textboxAddress1" >Street address</label> 
        <input id="textboxAddress1" name="textboxAddress1" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxAddress2" >Street address</label> 
        <input id="textboxAddress2" name="textboxAddress2" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxCity" >City</label> 
        <input id="textboxCity" name="textboxCity" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxRegion" >City/Region</label> 
        <input id="textboxRegion" name="textboxRegion" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxPostalCode" >Postal code</label> 
        <input id="textboxPostalCode" name="textboxPostalCode" type="text" style="width: 15em;"/> 
       </li> 
       <li> 
        <label for="textboxCountry" >Country</label> 
        <input id="textboxCountry" name="textboxCountry" type="text" style="width: 15em;"/> 
       </li> 
      </ol> 
     </fieldset>   

     <fieldset class="nested"> 
      <legend>Phone numbers</legend> 
      <ol> 
       <li style="display:none"> 
        <label for="textboxName" >Name</label> 
        <input id="text1" name="textboxName" type="text" style="width: 15em;"/> 
       </li> 
       <li style="display:none"> 
        <label for="textboxAddress1" >Address</label> 
        <input id="text2" name="textboxAddress1" type="text" style="width: 15em;" /> 
       </li> 
       <li> 
        <label for="textboxAddress2" >Phone</label> 
        <input id="text3" name="textboxAddress2" type="text" style="width: 15em;"/> 
       </li> 
      </ol>  
     </fieldset>   

     <div class="buttonsContainer"> 
      <input class="button" type="submit" value="OK" /> 
      <input class="button" type="button" value="Cancel" /> 
     </div> 

    </fieldset> 

    </form> 
</div>  


</body> 

</html>

CSS：

body 
{ 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Tahoma, Arial, sans-serif; 
} 

fieldset.main 
{ 
    margin: 1.5em 0 0 1.5em; 
    padding: 1em 0 0 0; 
    width: 400px; 
    font-size: .9em;  
} 

fieldset.main legend 
{ 
    margin-left: 1em; 
    color: #000000; 
    font-weight: bold;  
} 

fieldset.main ol 
{ 
    padding: 1em 1em 0 1em; 
    list-style: none; 
} 

fieldset.main li 
{ 
    padding-bottom: .5em; 
} 

fieldset.main ol li label 
{ 
    float: left; 
    width: 10em;   
    margin-right: 1em; 
} 

/* ----------------------------------------- */ 

fieldset.nested 
{ 
    margin: 0 0 1em 1em; 
    padding: 0; 
    width: 93%; 
    font-size: .8em; 
    border: 1px solid gray; 
    background: #B0C4DE;  

} 

fieldset.nested legend 
{ 
    margin-left: 1em;  
    font-weight: normal; 
    font-size: .9em; 
    color: black; 
    background-color: white; 
    padding: 0 1em 0 1em; 
    border: 1px solid black; 
} 

fieldset.nested ol 
{ 
    padding: 0 1em 0 1em; 
    list-style: none; 
} 

fieldset.nested li 
{ 
    /* Control leading between rows. */ 
    padding-bottom: .7em; 
} 

fieldset.nested ol li label 
{ 
    float: left; 
    width: 10em;   
    margin-right: 1em; 
} 

/* ----------------------------------------- */ 

input.button 
{         
    /* border-style: none; */ 
    width: 6em; 
    height: 2.5em; 
} 

div.buttonsContainer 
{ 
    float: right; 
    margin: 1em 1em 1em 0; 
}

来源

2009-04-11 00:53:18

相关问题

 相关问题