Come passare dalla tabella al div per il layout FORM?

Question

Sto notando che la maggior parte della gente parla di utilizzare DIV e CSS per l'etichetta , coppie di textbox. Come si potrebbe convertire una tabella come ad esempio:

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

Da utilizzando una tabella in diciamo un div con i CSS, un campione sarebbe utile! Attualmente stavo usando un tavolo per una cosa del genere, immagina di dire un sito che mostra solo alcune informazioni dell'utente. Come posso visualizzare le coppie (l'etichetta, la casella di testo) utilizzando i DIV anziché il formato tabella?

Si supponga che le etichette/caselle di testo siano etichette e caselle di testo ASP.net.

Answer 1

Considerate questo articolo a Woork intitolato Clean and Pure CSS Form Design

ho implementato questo stile, incluso lo fieldset e ottimizzato tutti gli stili in modo appropriato per il look/feel richiesto.

Considerare l'utilizzo di <label runat="server"> per ereditare lo stile dell'etichetta tramite CSS anziché asp:label. In alternativa puoi inserire il tuo asp:label nei tag label. Poiché asp:label emette <span>, ciò comporterebbe semplicemente un set di <label><span></span></label>.

Answer 2

Considerare questo articolo Tableless forms using CSS da CssDrive.

Un po 'di stile aiuta davvero. Ho effettuato il refactoring/sostituzione di tutti i miei moduli da tavolo con lo schema trovato nell'articolo sopra.

Con il seguente codice:

• asp: textbox funziona perfettamente, ha bisogno di nessuna modifica per tutti i tipi di caselle di testo
• asp: tasto funziona perfettamente, ha bisogno di nessuna modifica
• asp: casella di controllo avrebbe probabilmente bisogno modifica, forse avvolta in un altro div con uno stile speciale

Ecco l'esempio di base presentato:

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

Il codice 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> 

Answer 3

estratto dal mio codice:

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

con il seguente 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; 
} 

Answer 4

ho usato praticamente la stessa idea per la creazione di un layout modulo tableless. Ma, io uso una lista non ordinata per contenere le mie etichette e input.Per esempio:

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

Gli stili CSS possono essere proprio lo stesso di quello pcampbell ha utilizzato nel suo esempio. L'unica differenza per la mia sarebbe l'aggiunta di uno stile per la UL come ad esempio:

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

Answer 5

Sulla base @p.cambell answer e the implementation with css, ho scritto questo codice in asp.net per una schermata di login a comparsa:

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

aspx pagina:

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

Il risultato è: