How to switch from table to div for FORM layout?

I'm noticing most folks are talking about using DIVs and CSS for label, textbox pairs. How would one convert a table such as:

<table>
   <tr>
      <td><some Label1> </td>
      <td><some TextBox1> </td>
   </tr>
   <tr>
      <td><some Label2> </td>
      <td><some TextBox2> </td>
   </tr>
   ...
</table>

From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format?

Assume the labels / textbox's are ASP.net labels and textboxes.

---

Consider this article at Woork titled Clean and Pure CSS Form Design

I've implemented this style, including the fieldset and tweaked all the styles appropriately for the look/feel that was required.

Consider using <label runat="server"> to inherit the style of the label via CSS instead of asp:label . Alternatively you could put your asp:label within label tags. Since asp:label emits <span> , that would simply result in a set of <label><span></span></label> .

---

Consider this article titled Tableless forms using CSS from CssDrive.

A little bit of style really helps. I've been refactoring/replacing all my table'd forms with the pattern found in the article above.

With the following code:

asp:textbox works perfectly, needs no modification for all kinds of textboxes

asp:button works perfectly, needs no modification

asp:checkbox would likely need modification, perhaps wrapped in another div with a special style

Here's the basic example presented:

The CSS:

<style type="text/css">

label{
float: left;
width: 120px;
font-weight: bold;
}

input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

.boxes{
width: 1em;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}

br{
clear: left;
}

</style>

The HTML:

<form>

<label for="user">Name</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>

---

Extract from my code:

<div>
    <label for="Password"> Password:</label>
    <input id="Password" type="password" name="Password"/>
    <label for="ConfirmationPassword"> Confirmation: </label>
    <input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
    <label for="FirstName"> Prénom:</label>
    <input id="FirstName" type="text" value="" name="FirstName"/>
    <label for="LastName"> Nom:</label>
    <input id="LastName" type="text" value="" name="LastName"/>
    <div class="clear"/>
    </div>
</div>

with the following css:

label {
    float:left;
    margin-right:0.5em;
    margin-top:10px;
    padding-left:5px;
    text-align:justify;
    width:200px;
}

input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
    float:left;
    margin-right:10px;
    margin-top:5px;
}

.clear {
    clear:both;
}

链接地址: http://www.djcxy.com/p/88152.html

上一篇: 关于表现Divs Versus表

下一篇: 如何从表格切换到表格布局？