Pagine HTML Web possono contenere forme per acquisire l'input dell'utente. Questo ingresso può includere testo, con campi di testo e aree di testo che consente agli utenti di sito Web digitare le informazioni e inviarlo tramite un modulo. Gli sviluppatori possono impostare le dimensioni e le proprietà di stile per gli elementi di testo di input in vari modi, la larghezza dei campi utilizzando una combinazione di codice di markup HTML e, facoltativamente, le dichiarazioni CSS di esecuzione.

Dimensione di Input di testo

L'elemento input di tipo testo HTML può consentire agli utenti di immettere un numero di caratteri, che determina la larghezza dell'elemento. La sintassi di markup di esempio riportato di seguito viene illustrata la creazione di un campo di testo con un attributo size:

< input type = "testo" nome = "cognome" size = "30" / >

Questo elemento consente all'utente di digitare un massimo di 30 caratteri nel campo. La larghezza del campo così come appare all'interno del browser Web dipende in parte la dimensione del carattere per la sezione elemento o della pagina.

Area di testo colonne

L'elemento di area di testo HTML consente forme contenere aree per l'input di testo con il potenziale per le linee multiple. Quando il markup della pagina HTML dichiara un'area di testo indica le dimensioni dell'elemento in termini di righe e colonne. Il seguente codice di esempio di seguito viene illustrato l'inclusione di un elemento di area di testo all'interno di una pagina:

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

Ecco il testo predefinito.

< / textarea >

Questo codice crea un'area rettangolare per l'input di testo che è 25 colonne di larghezza, che significa che la larghezza è di 25 caratteri a lungo 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 ingresso

Qualsiasi elemento HTML può indicare le dichiarazioni di stile, inclusi gli elementi di input di testo. Nell'esempio di codice riportato di seguito viene illustrato un elemento di input del campo di testo con una dichiarazione di stile in linea nel codice CSS:

< input type = "testo" nome = "cognome" style = "width: 150px" / >

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

< input type = "testo" nome = "cognome" style = "width: 90%" / >

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

Selettori CSS

Codice CSS all'interno di aree dedicate può anche applicare la larghezza e altre proprietà di stile su elementi quali campi di testo di input. CSS inclusi o collegati all'interno della sezione head della pagina può applicare stile facendo riferimento alla classe di un elemento o un attributo ID. Ad esempio, l'elemento di input seguente dispone di un attributo di classe:

< input type = "testo" nome = "cognome" class = "maintext" / >

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

.mainText () {

Larghezza: 200px;

}

Il seguente elemento di input HTML ha un attributo ID:

< input type = "testo" nome = "cognome" id = "nametext" / >

Codice CSS questo elemento potrebbe di stile come segue:

NameText {

Larghezza: 150px;

}

Questo tipo di codice CSS possa anche utilizzare relativo piuttosto che valori fissi.