HTML fornisce Tag utilizzati per la creazione di forme, che includono caselle di testo, caselle di controllo, pulsanti di opzione e caselle di selezione. Designer utilizzato per utilizzare le tabelle per allineare gli elementi form, mettendoli in colonne e righe. Poiché lo spostamento di stile CSS, una faccia di progettisti di problema è come allineare gli elementi del form senza utilizzare tabelle. Il modo migliore per allineare le caselle di testo con etichette consiste nell'utilizzare il tag < label > in combinazione con un tag < span > per ogni casella di testo e la relativa etichetta. Utilizzare tecniche di galleggiante di allineare tutte le etichette su un lato e tutte le caselle di testo su altro lato.

Istruzioni

1

Apri il tuo HTML del file in un editor di codice e aggiungere le caselle di testo insieme a loro etichette in questo modo:

Nome: < input type = "testo" nome = "nome" id = "nome" / >

E-Mail: < input type = "testo" nome = "e-mail" id = "email" / >

Righe di codice precedente andare tra tag < form >. Se questi non dispone di codice HTML, è necessario aggiungerli. Mettere l'apertura < forma > prima del primo campo modulo e quindi aggiungere la chiusura < / form > tag da qualche parte sotto l'ultimo pulsante di forma.

2

Avvolgere ogni coppia di casella di testo ed etichetta in un tag < label >. Se < label > è pensata per l'uso con qualsiasi testo in un campo modulo di etichettatura, avvolgendola intorno sia il testo e il campo rende le cose più facile di stile in CSS e fornisce usabilità aggiunto rendendo il testo cliccabile. Quando un utente fa clic sul testo, il browser sarà posizionare il cursore nella casella di testo. Ecco il codice:

< etichetta per = "nome" > Nome: < input type = "testo" nome = "nome" id = "nome" / >< / etichetta >

Corrispondere al valore dell'attributo "for" al valore dell'attributo "name" all'interno del tag < input >.

3

Avvolgere il testo casella di testo nel tag < span > di etichettatura, così puoi scegliere come target solo il testo all'interno del codice CSS. Ecco il risultato:

< etichetta per = "nome" >< span > Nome: < / span >< tipo input = "text" name = "nome" id = "nome" / >< / etichetta >

4

Scorrere fino all'inizio del file HTML, senti per un tag < link > con un set di attributi "rel" a "stylesheet" e quindi aprire il file che fa riferimento. Se non trovate questo, quindi cercare il tag < style > o aggiungerli voi stessi. Aggiungere il codice CSS per il foglio di stile o tra i tag < style >.

5

Impostare l'attributo di "display" per la durata e l'etichetta tag per "bloccare". Assegnare una larghezza ai campi "nome" e "email", selezionandoli dai relativi ID. Impostare l'opzione "visualizzare" al "blocco" per due caselle di testo anche. Impostare "galleggiare" a sinistra per il tag < span > ed entrambe le caselle di testo a "galleggiare" a destra. Assegnare una larghezza complessiva per il tag < label >. Ecco il codice CSS:

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

span {display: block; float: sinistra;}

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

Consigli & Avvertenze

• Evitare di assegnare "visualizzare: blocco" < input > tag generalmente perché influenzerà anche il pulsante "Invia". Ecco perché è necessario selezionare le caselle di testo con i loro nomi di ID.
• Eseguire sempre il backup i file HTML e CSS prima di modificarli.