Il tag < input > è un componente di un modulo HTML. È possibile definire un numero di oggetti, tra cui i pulsanti di opzione, presentazione pulsanti, caselle di controllo e campi di testo. Un campo di testo è una casella modificabile che consente a un visitatore di inserire i dati prima di inviare il modulo. Unstyled, tutto il testo di input predefinito di contenitori per un insieme di caratteristiche simili.
Caratteristiche predefinite
Senza alcuna formattazione applicata, una casella di testo utilizzando il tag di input saranno circa 20 pixel di altezza e 175 pixel di larghezza. Lo sfondo dell'area di testo sarà bianco con testo nero in un font sans-serif circa 12 pixel di altezza. Questo può variare a seconda del browser; Se il browser è impostato per utilizzare una dimensione diversa o stile che utilizzerà al posto del comportamento generale. L'unico modo per ignorare l'impostazione predefinita è di impostare il proprio stile utilizzando i CSS.
Opzioni relative alle dimensioni del carattere
Utilizzare i CSS per modificare la dimensione del carattere per la casella di input, aggiungendo una voce al foglio di stile o aggiungendo l'attributo di "stile" al tag < input >. Il CSS per modificare la dimensione del testo è "font-size", e si può aumentare o diminuire il tipo di carattere in diversi modi. È possibile impostare la larghezza in percentuale, ad esempio 150 per cento per scrivere i caratteri quel grado più grande del carattere di base o il 50% per renderlo metà della la dimensione normale. È possibile impostare il tipo di carattere con un numero statico, ad esempio "20px" rendere il font 20 pixel di altezza. Le altre opzioni sono la "xx-small" attraverso i valori "xx-large". Con il valore predefinito come "mezzo", si può andare su e giù da lì per uno dei due estremi.
Modifica di testo di Input tutte le
Se si desidera che ogni zona di testo impostato con la funzione di input per lo stesso aspetto, è possibile aggiungere l'opzione "input" al foglio di stile. Per esempio, se si desidera che ogni area di testo grigio 20 pixel di altezza testo, è necessario aggiungere quanto segue al foglio di stile:
input () {
dimensione del carattere: 20px;
colore: #A8A8A8;}
È possibile modificare praticamente nulla della zona di testo utilizzando i CSS, tra cui il tipo di carattere, la dimensione della casella di testo, i bordi e il colore di sfondo. Ad esempio, per impostare il carattere di ogni area di testo in Times New Roman, la dimensione di 15 pixel, con uno sfondo nero e testo bianco si utilizzerà:
input () {
font-family: volte nuovo romano;
dimensione del carattere: 15px;
sfondo: #000000;
colore: #FFFFFF;}
Modifica di una singola casella di Input
Dire che non volete modificare ogni area di testo, quelli proprio speciale. Ad esempio, se offrite un form che dispone di opzioni per di un visitatore nome, indirizzo email, sito Web e messaggio e si desidera chiarire che l'indirizzo email è obbligatorio, che si potrebbe stile con testo di colore rosso più grande, grassetto. Invece di utilizzare "ingresso" nel tuo foglio di stile per ogni area di testo unico di stile, è possibile creare una classe chiamata qualcosa come "richiesto", quali:
annegamento {
font-weight: bold;
colore: #FF0000;
font-size: 110%;}
Il periodo prima che il nome della classe definisce come una classe. Per applicarlo alla tua casella di testo, è sufficiente aggiungere classe = "required" come in: < tipo input = "valore"text = "Indirizzo E-Mail" class = "required" / >. Classi possono essere utilizzate per più di un oggetto. È inoltre possibile aggiungere questo utilizzando l'attributo di "stile", che aggiunge CSS modifica di un singolo tag. È più sudicio ma funziona se non hai accesso al foglio di stile di una pagina. Lo stesso effetto si sarebbe incontrato con:
< tipo input = "valore"text = "Indirizzo E-Mail" style = "font-weight: bold; color: #FF0000; font-size: 110%;" / >