Layout del modulo tramite CSS

Sono consapevole che ci sono già un sacco di domande sul layout del modulo utilizzando CSS contro tabelle. Nel complesso, penso che il CSS sia la strada da percorrere, ma tutte le soluzioni CSS che ho visto hanno lo svantaggio di "hard coding" della larghezza delle etichette e/o dei campi di input.Layout del modulo tramite CSS

Il risultato è che una o due regole personalizzate devono essere aggiunte per ogni modulo, assumendo che la larghezza massima delle etichette sia diversa in ciascun caso.

Esiste un modo per formattare le forme, in modo da allineare automagicamente le etichette e gli input indipendentemente dalla lunghezza delle etichette?

fonte

2010-02-01 Dónal

+1: Questo sempre bug me pure. Finora ho dovuto hardcode le dimensioni ogni volta. –

Se si crea un layout veramente tabulare, non c'è niente di sbagliato usando '

'. – kennytm

@KennyTM - un layout tabulare o meno. Le tabelle dovrebbero essere utilizzate per i dati tablari, non per il layout. L'autore della domanda lo riconosce persino. – Finglas

risposta

-1

Non c'è niente di sbagliato nell'avere regole per quella pagina specifica inclusa nell'intestazione della pagina, invece di avere file diversi per tutto.

Se i moduli sono così diversi che si dicono di essere, allora non c'è altro modo per farlo che fare regole personalizzate per ogni ...

O se non si vuole mettere tutti gli stili di forma in un file enorme o semplicemente includere nell'intestazione della pagina quelli rilevanti, dipende dal numero di moduli a cui gli utenti accedono in una visita media. Alcune forme per visita; metterli nell'intestazione. Un sacco di moduli per visita media; metterli tutti in un file separato in modo che possa essere memorizzato nella cache dall'utente.

fonte

2010-02-01 04:31:39

Dai un'occhiata al modulo sul lato sinistro al seguente URL http://www.blueprintcss.org/tests/parts/forms.html

Se si posiziona l'etichetta su 1 linea e la casella di input su un'altra linea, allora non c'è bisogno di preoccuparsi per l'allineamento delle etichette . Stile un po 'di più si avrà un web2.0 pulito e piacevole come forma

enter image description here

Acclamazioni

fonte

2010-02-01 05:15:28 Phradion

+1 per questo. Se avrai un'etichetta molto lunga in un campo, uno corto nell'altro, quindi renderlo 2 sarà brutto, anche se usi la tabella. Crea 2 linee, etichetta nella riga 1, campo modulo nella riga 2. Non dovrai più preoccuparti della lunghezza dell'etichetta. –

Nessuno di questi layout è comparabile. – Greg

Bene il soggetto di collocare un'etichetta sopra o adiacente all'ingresso è un discorso a parte (I consiglio di leggere il libro di Luke Wroblewski sull'argomento: http://www.lukew.com/resources/articles/web_forms.html)

Lo stile dei moduli web è piuttosto banale. Prima di tutto, assicurati di contrassegnare i moduli in modo semanticamente appropriato. Questo è uno dei principali vantaggi consentiti ora che stai usando CSS per il layout invece delle tabelle. Per ulteriori informazioni su questo vedi l'eccellente ListAld Article sul tema: http://www.alistapart.com/articles/prettyaccessibleforms/

Ora nell'articolo citato l'autore utilizza una proprietà di visualizzazione chiamata blocco in linea. Questo è un modo piuttosto semplice per ottenere l'effetto. Basta applicare:

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

E le etichette avranno una lunghezza fissa con l'ingresso adiacente ad esse. Tuttavia, se non si specifica la larghezza e basta usare:

label, input { 
    display: inline-block; 
}

Poi le etichette e gli ingressi saranno entrambi in fila inline 'automagically' come dici tu. Il problema qui non è un problema tecnico, ma piuttosto un problema di progettazione. Se gli input non sono allineati verticalmente, renderà più difficile per un utente completare il modulo. Questa è un'altra considerazione da tenere presente poiché è più semplice posizionare l'etichetta e l'input in questo modo piuttosto che adattarsi a larghezze fisse.

Un altro problema è che il blocco in linea non funziona bene in alcuni browser. Inline-block non è affidabile nelle versioni precedenti di Firefox o IE.Quindi tendo ad usare un metodo alternativo. Diciamo che marchi i tuoi moduli in modo semanticamente appropriato usando un elenco. Bene in questo caso si potrebbe avere qualcosa di simile:

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

In questo caso possiamo utilizzare una larghezza fissa e il posizionamento assoluto per allineare i nostri elementi adiacenti:

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

l'etichetta sia posizionata rispetto al voce dell'elenco e l'input viene spostato sul lato con un margine sinistro. C'è un problema con questo metodo però. Questo metodo funziona solo con una larghezza hardcoded. Ancora più importante, un'etichetta multilinea non si cancellerà correttamente. Quindi in questa situazione possiamo adottare un approccio simile, ma usare float e overflow. Così abbiamo potuto usare questo CSS alternativo sullo stesso codice HTML ho mostrato in precedenza:

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

Ora, con questo metodo l'etichetta viene flottato a sinistra dell'ingresso. Se non si specifica una larghezza, l'etichetta sarà larga quanto il contenuto che vi risiede (fino al punto della larghezza del nodo principale nel documento HTML). Impostando l'overflow su hidden sull'oggetto parent non è necessario cancellare l'elemento. Questa tecnica funzionerà con una larghezza hardcoded o il default ereditato che è width: auto.

Ultimo ma non meno importante se si desidera utilizzare l'approccio alla forma più efficiente (etichette sopra gli input), che ha dimostrato di essere lo stile di forma che gli utenti possono completare più velocemente, l'unico css necessario per per raggiungere questo obiettivo è:

label, input { 
    display: block; 
}

Un'altra nota - con marcatura del codice HTML, come tale si potrebbe chiedere su tutti quegli elementi della lista che creano punti elenco ecc si dovrebbe optare per l'inclusione di un reset CSS nel documento di garantire coerenza tra i browser. Vi consiglio di Eric Meyer:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

fonte

2010-02-01 06:10:21

La domanda richiede in particolare soluzioni in cui le etichette abbiano una lunghezza arbitraria. Questo non affronta in alcun modo questa preoccupazione. –

Ah capisco. Farò alcune modifiche per correggere questo. –

I metodi vengono pubblicati anche se si fa ciò che la domanda chiede se si omette la regola per la larghezza. Ora ho spiegato questo nella soluzione, fornendo anche tutti e tre i metodi più diffusi per ottenere questo stile di layout con CSS e HTML. Inoltre, le considerazioni sui punti di risposta che il progettista dovrebbe prendere quando progettano i moduli in questo modo. Inoltre, fa riferimento ai metodi appropriati per contrassegnare i moduli Web in HTML semanticamente appropriato, in quanto la domanda menzionata sta passando da layout basati su tabelle. –

Opinione personale: utilizzare una tabella.

Ogni volta che si scrive qualcosa di simile

label { 
    width: 150px; /* or whatever width */ 
}

allora si sono contenuto e la presentazione impasto, in quanto il valore del marchio può essere calcolato solo se si sa che cosa conterrà, che va contro i principi di i puristi semantici-CSS.

fonte

2010-02-01 13:28:51

Che è completamente errato. Quando usi una tabella, stai mescolando il contenuto con la presentazione. L'intero motivo per cui abbiamo CSS è quello di separare questo. Quindi il layout è controllato specificando la larghezza nel file CSS. Se usi un tavolo. Il layout è controllato dall'elemento tabella ora incorporato nel tuo contenuto. –

Non ho detto che non è così. Ho detto che * anche * con un tag etichetta stilizzato stai mescolando contenuti con la presentazione. Le definizioni CSS non dovrebbero dipendere da cosa contiene un campo, ma lo fanno in questo caso. Quindi potresti anche usare una tabella che funziona in modo affidabile in tutti i browser, fa quello che l'OP vuole e solo in poche righe di codice. Le tabelle potrebbero essere abbandonate se i CSS offrissero alternative per * tutti * ha bisogno di funzionare in tutti i browser senza hack stupidi. –

È possibile gestirlo facendo fluttuare le etichette e posizionandole in un elemento di blocco mobile, e allo stesso modo per i campi di input. Questo creerà un layout a due colonne che si ridimensionerà automaticamente in base ai contenuti. Ecco il codice HTML:

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

Ed ecco le regole CSS:

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

EDIT: Se si desidera creare una connessione semantica tra le etichette e gli ingressi, si può formalmente etichettare ogni etichetta come un'etichetta html quindi utilizzare lo per gli attributi e id per collegarli.Ad esempio, ecco una definizione di etichetta:

<div><label for='name'>Name: </div>

e qui è corrispondente campo di inserimento:

<div><input id='name' type="text"></div>

fonte

2010-02-01 19:42:41 jdigital

+1: un po 'prolisso, ma funziona come un incantesimo! –

Mi dispiace ma questo non mantiene alcuna connessione tra le etichette e i loro valori. Sono divs completamente separati e il loro unico collegamento è visivo se vi capita di metterli fianco a fianco. Non esiste una connessione "semantica" e il significato del contenuto dipende strettamente dalla sua presentazione. Allinearli è banale, il punto è allinearli in modo significativo. –

Questo è facilmente risolvibile e ho modificato la risposta di conseguenza. – jdigital

Problemi correlati