Come fare i campi del modulo della Stessa larghezza Con i CSS

August 28

I campi del modulo sul modulo sito web forniscono aree per il visitatore di inserire le informazioni le chiedi per, e questi campi vengono automaticamente formattati in una particolare larghezza. Se si desidera modificare questa misura, si ha la possibilità di farlo utilizzando fogli di stile CSS. CSS permette di creare una regola che gestisce questi campi. Usa il tuo editor di testo per applicare il CSS che rende la forma campi la stessa larghezza.

istruzione

1 Portate il vostro editor di testo e aprire il documento sito web che ha i campi del modulo che si desidera regolare.

2 Posizionare il cursore prima del tag di chiusura </ head> e digitare il codice CSS:
<Style type = "text / css">
.input {}
</ Style>

La regola di classe d'ingresso gestisce i campi sul modulo sito web.

3 Tipo "width:;" tra parentesi graffe della regola di ingresso e immettere un numero di pixel per rendere la forma campi la larghezza che si preferisce. Illustrare:
.input {width: 300px; }

4 Inserire "display: block;" dopo la dichiarazione di larghezza per presentare il vostro campo di modulo e l'etichetta associata come un blocco in modo che l'etichetta non inavvertitamente rendere i campi differenti larghezze sul modulo. Il tuo codice CSS completo ora è simile al seguente:
<Style type = "text / css">
.input {width: 300px; blocco di visualizzazione; }
</ Style>

5 Posizionare il cursore nel tag input HTML, tipo "class =" e inserire "input" dopo il segno di uguale. Per esempio:
<Input type = "text" name = "prima" class = "input" />

Ripetere questo processo in tutti i campi del modulo che si desidera applicare la regola CSS per.

6 Salvare il file. Visualizzare l'anteprima del documento in un browser Web per vedere i nuovi campi del modulo.

Consigli e avvertenze

  • Anche se gli elementi HTML, come l'ingresso, non hanno bisogno di essere una classe o di identificazione per essere una regola CSS valida, la creazione di una classe di fuori del vostro tag input assicura che solo le larghezze campi del form sono regolati e non altri elementi di input, come la pulsante di invio.