Le pagine Web HTML possono contenere forme di catturare l'input dell'utente. Questo ingresso può includere testo, con testo-campi e testo-aree che consentono agli utenti di siti web di digitare le informazioni e lo presenta attraverso una forma. Gli sviluppatori possono impostare le dimensioni e le proprietà di stile per gli elementi di testo di input in vari modi, l'attuazione della larghezza dei campi utilizzando una combinazione di codice markup HTML e, opzionalmente, dichiarazioni CSS.

Dimensione del testo di input

L'elemento di input HTML di tipo testo può consentire agli utenti di inserire un determinato numero di caratteri, che determina la larghezza dell'elemento. La seguente sintassi di esempio markup dimostra la creazione di un campo di testo con un attributo size:

<Input type = "text" name = "cognome" size = "30" />

Questo elemento permette all'utente di digitare un massimo di 30 caratteri nel campo. La larghezza del campo come appare all'interno del browser Web dipende in parte dalla dimensione della sezione elemento o pagina font.

Colonne text-area

L'elemento HTML text-area permette forme di contenere le aree di immissione di testo con il potenziale per più linee. Quando pagina HTML markup dichiara una text-area indica le dimensioni degli elementi in termini di righe e colonne. Il codice di esempio riportato di seguito illustra tra cui un elemento text-area all'interno di una pagina:

<Textarea righe = "5" cols = "25">

Ecco il testo di default.

</ Textarea>

Questo codice crea un'area rettangolare per l'inserimento del testo, che è larga 25 colonne, il che significa che la larghezza è lunga 25 caratteri con la dimensione del carattere corrente per l'area della pagina che contiene l'elemento. L'altezza è in parte determinata dal numero di righe nello stesso modo.

Larghezza di ingresso

Ogni elemento HTML può indicare dichiarazioni di stile, tra cui elementi di input di testo. Il seguente codice di esempio illustra un elemento di input del testo-campo con una dichiarazione di stile in-line in codice CSS:

<Input type = "text" name = stile "cognome" = "width: 150px" />

Questo codice specifica la larghezza di un numero fisso di pixel. In alternativa, un elemento di input può specificare la larghezza utilizzando un valore relativo come segue:

<Input type = "text" name = stile "cognome" = "width: 90%" />

Questo codice specifica che il browser dovrebbe rendere il testo-campo con una larghezza che è il 90 per cento della larghezza dell'elemento genitore. Ad esempio, se l'elemento che tiene il testo-campo ha una larghezza di 100 pixel, il campo di testo occupa 90 pixel quando un utente visualizza la pagina.

CSS selettori

codice CSS all'interno di aree dedicate può anche far rispettare le proprietà di larghezza e altri di stile su elementi di input come testo-campi. CSS inclusi o sono legati al all'interno della sezione head della pagina può applicare lo stile facendo riferimento ad attributo class o l'ID di un elemento. Ad esempio, il seguente elemento input ha un attributo di classe:

<Input type = "text" name = "cognome" class = "mainText" />

codice CSS potrebbe imporre una larghezza fissa su questo elemento come segue:

.maintext {

width: 200px;

}

Il seguente elemento di input HTML ha un attributo ID:

<Input type = "text" name = "cognome" id = "nametext" />

codice CSS potrebbe lo stile di questo elemento come segue:

nametext {

width: 150px;

}

Questo tipo di codice CSS può anche usare relative e non valori fissi.