Come allineare i moduli di input in HTML

117

Sono nuovo in HTML e sto cercando di imparare a usare i moduli.

Il problema più grande che sto riscontrando finora è l'allineamento dei moduli. Ecco un esempio del mio file HTML corrente:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Il problema è che la casella del campo dopo "Email" è drasticamente diversa in termini di spaziatura rispetto al nome e al cognome. Qual è il modo "corretto" per fare in modo che si "schierino" essenzialmente?

Sto cercando di praticare una buona forma e sintassi ... molte persone potrebbero farlo con i CSS Non ne sono sicuro, finora ho imparato solo le basi dell'HTML.

html forms alignment

— yoshyosh
fonte

c'è una lotta continua tra quando le tabelle (se non lo sono), le risposte alla tua domanda non sono l'eccezione, il punto centrale è che <tables> è per i dati tabulari, vedi di più qui: stackoverflow.com/questions/83073 /…

— Trufa

Esattamente la stessa domanda, ma la risposta suggerisce di utilizzare tag <table> con la citazione del W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Un altro esempio, questo utilizza CSS, ho semplicemente messo il modulo in un div con la classe contenitore. E ha specificato che gli elementi di input contenuti all'interno devono essere il 100% della larghezza del contenitore e non avere elementi su entrambi i lati.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Espandi lo snippet

— serialk
fonte

2

Perfetto, mi ha solo risparmiato un sacco di guai.

— null

Sta anche espandendo il mio pulsante "invia" alla larghezza del contenitore.

— Saurabh Rana

4

Questa soluzione non sembra funzionare. Gli elementi di input non sono allineati a sinistra. La soluzione della tabella di seguito funziona.

— johny why

1

Non sono un grande fan dell'impostazione di una larghezza esplicita, quando puoi farne a meno (vedi la mia risposta sotto)

— Clément

1

Questo dà risultati strani con i pulsanti di opzione. L'etichetta del pulsante di opzione mostra la riga dopo il pulsante di opzione effettivo.

— parole per l'

134

La risposta accettata (l'impostazione di una larghezza esplicita in pixel) rende difficile apportare modifiche e si interrompe quando gli utenti utilizzano una dimensione del carattere diversa. L'uso delle tabelle CSS, d'altra parte, funziona alla grande:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Espandi lo snippet

Ecco un JSFiddle: http://jsfiddle.net/DaS39/1/

E se hai bisogno delle etichette allineate a destra, aggiungile text-align: rightalle etichette: http://jsfiddle.net/DaS39/

MODIFICA: Ancora una breve nota: le tabelle CSS ti consentono anche di giocare con le colonne: ad esempio, se desideri che i campi di input occupino più spazio possibile, puoi aggiungere quanto segue nel modulo

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

potresti voler aggiungere white-space: nowrapal labelsin quel caso.

— Clemente
fonte

4

Mi piace questa soluzione. Significa che non devo preoccuparmi che le mie colonne cambino inevitabilmente la larghezza mentre la pagina si evolve durante lo sviluppo. +1

— Tom Lord

9

@MuhammadUmer Perché le tabelle confonderanno i lettori dello schermo e molti dispositivi di assistenza, mentre le tabelle CSS separano la presentazione e il contenuto. In questo modo il tuo modulo rimane facilmente analizzabile da uno screen reader o da un assistente di lettura, e tuttavia viene visualizzato correttamente.

— Clément

3

Bene, l'adattamento dell'etichetta in td suggerisce che fa parte di dati tabulari organizzati, come i grafici; questo non è il caso qui. Inoltre, l'utilizzo di tabelle HTML rende più difficile modificare il layout in futuro o adattarlo a schermi di varie dimensioni (si pensi a telefoni cellulari e tablet).

— Clément

4

Ho resistito con forza alla struttura della tabella CSS con lo stesso argomento che stava facendo @MuhammadUmer, fino ad oggi! Ho ceduto e ho deciso di provarlo e finalmente ho visto il valore del passaggio! Inoltre, il suo CSS rende le cose più facili a lungo termine

— BillyNair

2

Come puoi estendere le colonne con questa soluzione? Per centrare allinea il pulsante di invio.

— eugenekr

31

Una soluzione semplice per te se sei nuovo in HTML, è semplicemente usare una tabella per allineare tutto.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

— amonett
fonte

43

Soluzione rapida e semplice. Lascia i dibattiti religiosi CSS per la pausa pranzo e porta a termine il lavoro.

— Emmanuel Bourg

3

@ClarkeyBoy - chi se ne frega finché fa il suo lavoro.

— SolidSnake

1

@ ClarkeyBoy - commento più ignorante? lol .. Non voglio litigare con te qui .. se vuoi farlo nel modo dei div, fallo. se vuoi farlo ai tavoli dipende da te. ma non dare per scontato che tutti i clienti o le persone si preoccupino di questo. la maggior parte di loro si preoccupa di portare a termine il lavoro ..

— SolidSnake

2

@ClarkeyBoy - Leggi questa risposta e il post del W3C: stackoverflow.com/a/4707368/40411

— J. Polfer,

6

@EmmanuelBourg: Non è esattamente a questo che sono destinate le tabelle CSS? Ottenere un layout simile a una tabella senza confondere gli screen reader? Il layout richiesto dall'OP è in realtà abbastanza facile da ottenere usando le tabelle CSS (vedi sotto )

— Clément

17

Trovo molto più semplice cambiare la visualizzazione delle etichette in blocco in linea e impostare una larghezza

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

— Byron
fonte

9

Dovresti usare un tavolo. Per una questione di struttura logica i dati sono tabulari: per questo vuoi che siano allineati, perché vuoi mostrare che le etichette non sono legate solo alle loro caselle di input ma anche tra loro, in una struttura bidimensionale.

[considera cosa faresti se avessi una stringa o valori numerici da visualizzare al posto delle caselle di input.]

— Collin Street
fonte

2

Apprezzo il tuo approccio.

— Jono

2

Per questo, preferisco mantenere una semantica HTML corretta e utilizzare un CSS il più semplice possibile.

Qualcosa del genere farebbe il lavoro:

label{
  display: block;
  float: left;
  width : 120px;    
}

Uno svantaggio tuttavia: potresti dover scegliere la giusta larghezza dell'etichetta per ogni modulo, e questo non è facile se le tue etichette possono essere dinamiche (etichette I18N per esempio).

— Samuel EUSTACHI
fonte

1

Sono un grande fan dell'utilizzo degli elenchi di definizioni.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

Sono facili da modellare usando i CSS ed evitano lo stigma dell'uso delle tabelle per il layout.

— Andrea
fonte

Questo è altrettanto facilmente realizzabile con divs ( dda ha solo un margine sinistro di ~ 40px) ed evita qualsiasi confusione semantica. Inoltre, nessuno di questi allinea le etichette / ingressi sulla stessa linea.

— Hollister

1

utilizzando css

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

questo ti dà qualcosa come:

           label1 |input box             |
    another label |another input box     |

— Gjaa
fonte

Devi anche usare clear per evitare che i moduli si

— accumulino

0

Il metodo tradizionale consiste nell'utilizzare una tabella.

Esempio:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Tuttavia, molti sostengono che le tabelle sono limitanti e preferiscono i CSS. Il vantaggio dell'utilizzo dei CSS è che puoi utilizzare vari elementi. Da div, elenco ordinato e non ordinato, puoi ottenere lo stesso layout.

Alla fine, vorrai usare ciò con cui ti senti più a tuo agio.

Suggerimento: è facile iniziare con le tabelle.

— Soluzioni Web OV
fonte

1

+1 per aver affermato che è facile iniziare con ... ma in realtà gli sviluppatori dovrebbero ricorrere solo a tabelle per i dati (vedere il mio commento su un'altra risposta per il rant completo!)

— ClarkeyBoy

1

Usare le tabelle CSS è altrettanto facile e non presenta i problemi di accessibilità associati. Vedi la mia risposta di seguito.

— Clément

0

Bene, per le basi puoi provare ad allinearle nella tabella. Tuttavia l'uso della tabella è dannoso per il layout poiché la tabella è pensata per i contenuti.

Quello che puoi usare sono le tecniche di floating CSS.

Codice CSS

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Un articolo elaborato che ho scritto può essere trovato rispondendo alla domanda del problema del galleggiante di IE7: problemi del galleggiante di IE7

— Mauris
fonte

grazie per gli esempi, tuttavia il modulo HTML continua a non risolvere il problema. Ad esempio, se cambi "Nome" in uno solo in "Nome", mi

— ritrovo

Ho lavorato con questo da designer ed è un po 'fragile, IME. Per questo layout di base, andrà bene il 98% delle volte. Prova a diventare troppo complesso, ad esempio layout a due colonne o etichette su più righe, e diventa difficile.

— staticsan

1

@staticsan - se comprendi float, clear e div, funzionerai bene con tale layout e in effetti il rendering è più veloce ed è più flessibile rispetto alle tabelle sui browser moderni.

— mauris

Beh, pensavo di aver capito float, clear e div, ma non potevo estendere la forma che mi era stata assegnata senza che si rompesse. Che fosse un difetto nella mia comprensione o nell'implementazione del designer, restava il fatto che era fragile. (È interessante notare che la prossima versione sarà più un design ibrido che utilizza i ultag.)

— staticsan

0

So che è già stata data una risposta, ma ho trovato un nuovo modo per allinearli bene - con un vantaggio extra - vedi http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

fondamentalmente usi l'elemento label attorno all'input e allinei usando quello:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

e poi con css devi semplicemente allineare:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

non è necessario alcun disordine in giro per le interruzioni di riga, il che significa che puoi realizzare rapidamente un layout multi-colonna in modo dinamico
l'intera linea è cliccabile. Soprattutto per le caselle di controllo, questo è di grande aiuto.
Mostrare / nascondere dinamicamente le linee del modulo è facile (basta cercare l'input e nascondere il suo genitore -> l'etichetta)
puoi assegnare classi all'intera etichetta rendendola molto più chiara l'immissione di errori (non solo intorno al campo di input)

— niko
fonte

Bello, ma necessita di una larghezza di etichetta fissa. Il testo dell'etichetta grande ha la precedenza sull'input.

— mauretto

0

La risposta di Clément è di gran lunga la migliore. Ecco una risposta leggermente migliorata, che mostra diversi allineamenti possibili, inclusi i pulsanti allineati a sinistra-centro-destra:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Espandi lo snippet

Ho aggiunto un po 'di imbottitura a destra di tutte le etichette ( padding-right:8px) solo per rendere l'esempio leggermente meno orribile, ma dovrebbe essere fatto con più attenzione in un progetto reale (l'aggiunta di imbottitura a tutti gli altri elementi sarebbe anche una buona idea).

— Cyberknight
fonte

-1

css che ho usato per risolvere questo problema, simile a Gjaa ma con uno stile migliore

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Ecco il mio HTML, usato specificamente per un semplice modulo di registrazione senza codice php

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

È molto semplice, e ho appena iniziato, ma ha funzionato abbastanza bene

— PA_Commons
fonte

-1

Inserisci i tag di input all'interno di elenchi non ordinati, imposta il tipo di stile nessuno. Ecco un esempio.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

Ha funzionato per me!

— Vivek Iyer
fonte

Questo non funzionerebbe mai. ULfarebbe semplicemente rientrare il contenuto lontano dal margine, non allineare nulla. Inserendo le inputs LIsi aggiungerebbe semplicemente un pallino prima di loro (sì, sarebbero allineati, come un elenco, non contro le etichette). Inoltre, "Input2" si attaccherebbe inputall'elemento precedente , perché LInon sono chiusi (non ce ne sono </li>) e non c'è inizio <li>per quella "etichetta", quindi verrà trattato come dovrebbe, testo comune, quindi, concatenato al elemento precedente. Infine, il codice ha un errore, la chiusura <ul/>dovrebbe essere </ul>.

— Cyberknight

-2

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

Nel CSS devi dichiarare sia l'etichetta che l'input come display: inline-block e dare la larghezza in base alle tue esigenze. Spero che questo ti possa aiutare. :)

— KTA
fonte

-4

Aggiungi semplicemente

<form align="center ></from>

Basta inserire allinea nel tag di apertura.

— Zak Gill
fonte

Questo non funzionerebbe, poiché formnon ha alignattributi (e anche se lo avesse, sarebbe deprecato per l'uso di style / CSS). Inoltre, il tag di chiusura è sbagliato, dovrebbe essere </form>. È possibile definire style="text-align:center"all'interno del form, cosa allineerebbe l'intero contenuto del modulo al centro, ma non è questo l'argomento della domanda originale. Questo non allineerebbe mai le etichette con i loro campi di input (sì, ho provato su Firefox 75, giusto per essere sicuro).

— Cyberknight