Comment passer de la table à la div pour la mise en page FORM?

J'ai remarqué la plupart des gens parlent à l'aide de balises div et CSS pour
label, textbox paires. Comment convertir un tableau tel que:

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

De l'aide d'une table en dire un div en CSS, un échantillon serait utile! Actuellement, j'ai été en utilisant un tableau pour une telle chose, imaginez-dire un site qui affiche des informations d'utilisateur. Comment puis-je afficher les paires (l'étiquette, la zone de texte) à l'aide de DIVs plutôt que de format de tableau?

Assumer les étiquettes /zone de texte sont ASP.net des étiquettes et des zones de texte.

source d'informationauteur JonH | 2009-11-19

css forms html html-table

14

Considérer cet article à Woork intitulé Propre et Pur CSS Conception de Formulaire

J'ai mis en place ce style, y compris la fieldset et tordu tous les styles de manière appropriée pour le look/sens que c'était nécessaire.

Envisager d'utiliser <label runat="server"> pour hériter le style de l'étiquette via CSS au lieu de asp:label. Vous pouvez aussi placer votre asp:label dans label balises. Depuis asp:label émet <span>ce serait tout simplement le résultat d'un ensemble de <label><span></span></label>.

8

Considérer cet article intitulé Tableless formes à l'aide de CSS de CssDrive.

Un peu de style aide vraiment. J'ai été refactoring/remplacement de tout mon tableau avais formes avec la tendance observée dans l'article ci-dessus.

Avec le code suivant:

asp:textbox fonctionne parfaitement, n'a pas besoin de modification pour tous les types de zones de texte
asp:button fonctionne parfaitement, n'a pas besoin de modification
asp:case serait probablement besoin de modification, peut-être enveloppés dans une autre div avec un style spécial

Comment passer de la table à la div pour la mise en page FORM?

Voici l'exemple de base présenté:

Le 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>

Le code 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>

1

Extrait de mon 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>

avec le code css suivant:

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;
}

1

J'ai utilisé essentiellement la même idée pour la création d'un tableless mise en page du formulaire. Mais, j'utilise une liste non ordonnée de tenir mes étiquettes et des intrants. Par exemple:

<form>
    <fieldset>
        <ul class="formFields">
            <li>
                <label for="user">
                    Name</label><input type="text" name="user" value="" /></li>
            <li>
                <label for="emailaddress">
                    Email Address:</label><input type="text" name="emailaddress" value="" /></li>
            <li>
                <label for="comments">
                    Comments:</label><textarea name="comments"></textarea></li>
            <li>
                <label for="terms">
                    Agree to Terms?</label><input type="checkbox" name="terms" class="boxes" /></li>
        </ul>
        <p>
            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></p>
    </fieldset>
</form>

Les styles CSS peut être juste la même chose que ce pcampbell a utilisé dans son exemple. La seule différence pour le mien serait l'ajout d'un style pour l'UL tels que:

ul {list-style: none; margin: 0; padding: 0;}

1

Basé sur @p.campbell réponse et la mise en œuvre avec les cssj'ai écrit ce code dans asp.net pour une connexion contextuel de l'écran:

css

.flotante-login {
border:solid 2px #b7ddf2;
border-radius: 5px;
padding: 15px;
background:#ebf4fb;
}
.loginBox {
margin: 0 auto;
width: 400px;
padding: 10px;
}
#login{
}
#login h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
#login p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#login label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#login .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#login input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#login a{
clear:both;
width:125px;
padding: 10px;
background-color: #E2B66B;
color:#FFFFFF;
text-align:center;
text-decoration: none !important;
line-height:30px;
font-weight:bold;
color: #FFF !important;
border-radius: 5px;
}

page aspx:

<div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contraseña:
<span class="small">Ingresa tu contraseña</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>

La résultat est:
Comment passer de la table à la div pour la mise en page FORM?

Vous devez vous connecter pour publier un commentaire.