HTML fornisce tag utilizzati per la creazione di forme, che comprendono le caselle di testo, caselle di controllo, pulsanti di opzione e caselle di selezione. I progettisti utilizzati per utilizzare le tabelle per allineare gli elementi del modulo, mettendoli in colonne e righe. Dal momento che il passaggio a uno stile CSS, un problema di fronte ai progettisti è come allineare gli elementi del modulo senza l'utilizzo di tabelle. Il miglior modo per allineare le caselle di testo con le etichette è di usare il tag <label> in combinazione con un tag <span> per ogni casella di testo e la sua etichetta. Utilizzare tecniche galleggiante per allineare tutte le etichette su un lato e tutte le caselle di testo sull'altro lato.

istruzione

1 Aprire il file HTML in un editor di codice e aggiungi le caselle di testo con le loro etichette come così:

Nome: <input type = "text" name = "nome" id = "nome" />

E-Mail: <input type = "text" name = "e-mail" id = "email" />

Le righe di codice di cui sopra vanno tra i tag <form>. Se il codice HTML non ha queste, aggiungerli. Mettere l'apertura <form> prima del primo campo di modulo e quindi aggiungere la chiusura </ form> tag da qualche parte sotto l'ultimo bottone modulo.

2 Avvolgere ogni coppia etichetta e casella di testo in un tag <label>. Anche se <label> è pensato per essere utilizzato con qualsiasi testo etichettare un campo modulo, avvolgendolo attorno sia il testo e il campo rende le cose più facili da stile in CSS e fornisce l'usabilità aggiunti dai rendendo il cliccabile testo. Quando un utente fa clic sul testo, il browser posizionare il cursore nella casella di testo. Ecco il codice:

<Label for = "nome"> Nome: <input type = "text" name = "nome" id = "nome" /> </ label>

Far corrispondere il valore del "per" l'attributo al valore dell'attributo "nome" all'interno del tag <input>.

3 Avvolgere il testo etichettatura casella di testo nei tag <span> in modo da poter indirizzare solo il testo all'interno del codice CSS. Ecco il risultato:

<Label for = "nome"> <span> Nome: </ span> <input type = "text" name = "nome" id = "nome" /> </ label>

4 Scorrere fino alla parte superiore del file HTML, cercare un tag <link> con un attributo "rel" impostato su "stylesheet" e quindi aprire il file fa riferimento. Se non si trova questo, quindi cercare i tag <style> o aggiungere voi stessi. Aggiungere il codice CSS per il foglio di stile o tra i tag <style>.

5 Impostare l'attributo "display" sia per l'ampiezza e etichetta tag di "blocco". Assegnare una larghezza sia il "nome" e campi "e-mail", selezionandoli dai loro ID. Impostare "Display" a "blocco" per le due caselle di testo pure. Impostare "float" a sinistra per il tag <span> e impostare entrambe le caselle di testo a "galleggiare" sulla destra. Assegnare una larghezza complessiva al tag <label>. Ecco il codice CSS:

label {display: block; width: 300px;}

arco {display: block; float: left;}

nome, #email {display: block; width: 150px; float: right;}

Consigli e avvertenze

• Evitare di assegnare "display: block" al tag <input> in genere perché influirà anche il pulsante "Invia". Ecco perché è necessario selezionare le caselle di testo con i loro nomi di ID.
• Eseguire sempre il backup dei file HTML e CSS prima di modificarli.