Usando gli stili CSS puoi modificare la dimensione del carattere, il tipo di carattere, il colore e altre proprietà del testo, nonché aggiungere bordi, colore di sfondo e immagine di sfondo . La larghezza del campo è impostata proprietà della larghezza .
Tabella 3. Attributi dei tag Attributo
Significato/Descrizione
accettare
Determina il tipo di file che può essere inviato al server. Indicato solo per Valori possibili :estensione specificata , ad esempio, accetta=".gif" , accetta=".pdf" , accetta=".doc"
alt
Definisce testo alternativo
completamento automatico
Responsabile di ricordare i valori immessi nel campo di testo e di sostituirli automaticamente la prossima volta che li inserisci:
messa a fuoco automatica
Ti permette di assicurarti che nel modulo caricato uno o un altro campo di input sia già attivo (sia stato selezionato), essendo pronto per inserire un valore.
controllato
L'attributo controlla se la casella di controllo predefinita è selezionata al caricamento della pagina per campi come type="checkbox" e type="radio" .
disabilitato
modulo
Il valore dell'attributo deve essere uguale all'attributo id dell'elemento
formazione
Specifica l'URL del file che elaborerà i dati immessi nei campi al momento dell'invio del modulo. Impostato solo per i campi type="submit" e type="image" . L'attributo sovrascrive il valore dell'attributo action del modulo stesso.
formantype
Determina la modalità in cui verranno codificati i dati del campo modulo quando inviati al server. Sostituisce il valore dell'attributo enctype del modulo. Impostato solo per i campi type="submit" e type="image" . Opzioni:
metodo
L'attributo specifica il metodo che il browser utilizzerà per inviare i dati del modulo al server. Impostato solo per i campi type="submit" e type="image" . Sostituisce il valore dell'attributo del metodo del modulo. Opzioni:
formnovalidate
Specifica che i dati del campo modulo non devono essere convalidati quando il modulo viene inviato. Sostituisce il valore dell'attributo novalidate del modulo. Può essere utilizzato senza specificare un valore di attributo.
formtarget
Determina dove visualizzare la risposta ricevuta dopo l'invio del modulo. Impostato solo per i campi type="submit" e type="image" . Sostituisce il valore attributo di destinazione forme.
altezza
Il valore dell'attributo contiene il numero di pixel senza specificare un'unità di misura. Imposta l'altezza di un campo modulo di tipo type="image" , ad esempio,
lista
È un riferimento a un elemento , contiene il suo id . Permette di fornire all'utente diverse opzioni tra cui scegliere quando inizia a inserire un valore nel campo corrispondente.
massimo
Consente di limitare l'immissione di dati numerici accettabili valore massimo , il valore dell'attributo può contenere un numero intero o numero frazionario . Si consiglia di utilizzare questo attributo insieme all'attributo min. Funziona con i seguenti tipi di campo: numero, intervallo, data, data/ora, data/ora locale, mese, ora e settimana.
lunghezza massima
L'attributo specifica il numero massimo di caratteri immessi nel campo. Il valore predefinito è 524288 caratteri.
min
Consente di limitare l'input numerico consentito a un valore minimo.
multiplo
Consente all'utente di inserire più valori di attributo, separati da una virgola. Si applica a file e indirizzi e-mail. Specificato senza valore dell'attributo.
nome
Specifica il nome che verrà utilizzato per accedere all'elemento
modello
Consente di determinare l'utilizzo espressione regolare
parentesi quadre imposta l'intervallo di caratteri validi, in in questo caso - Qualunque lettere minuscole , il numero tra parentesi graffe indica che sono necessarie tre lettere minuscole, seguite da un trattino, quindi tre numeri compresi tra 0 e 9.
segnaposto
Contiene il testo che viene visualizzato nel campo di input prima che venga compilato (molto spesso si tratta di una descrizione comando).
sola lettura
Non consente all'utente di modificare i valori degli elementi del modulo; è comunque possibile selezionare e copiare il testo. Specificato senza valore dell'attributo.
necessario
Visualizza un messaggio che indica che questo campo è obbligatorio. Se l'utente tenta di inviare il modulo senza inserire il valore richiesto in questo campo, sullo schermo verrà visualizzato un messaggio di avviso. Specificato senza valore dell'attributo.
misurare
Imposta la larghezza visibile del campo in caratteri. Il valore predefinito è 20. Funziona con i seguenti tipi di campo: testo, ricerca, telefono, URL, email e password.
src
Specifica l'URL dell'immagine utilizzata come pulsante di invio del modulo. Indicato solo per il campo
fare un passo
Utilizzato per elementi che richiedono l'immissione di valori numerici, indica la quantità di cui i valori vengono aumentati o diminuiti durante il processo di regolazione dell'intervallo (step).
tipo
pulsante: crea un pulsante.
casella di controllo: trasforma un campo di input in una casella di controllo che può essere selezionata o deselezionata, ad es.
colore: genera tavolozze di colori nei browser che supportano, consentendo agli utenti di selezionare i valori di colore in formato esadecimale.
data: consente di inserire una data nel formato gg.mm.aaaa.
datetime-local: consente di inserire una data e un'ora separate da lettere maiuscole Lettera inglese T secondo lo schema gg.mm.aaaa hh:mm.
e-mail: browser che supportano questo attributo , si aspetterà che l'utente inserisca dati che corrispondono alla sintassi degli indirizzi email.
file: consente di scaricare file dal computer dell'utente.
hidden - Nasconde il controllo, che non viene visualizzato dal browser e impedisce all'utente di modificare i valori predefiniti.
immagine: crea un pulsante, consentendoti di inserire un'immagine invece del testo sul pulsante.
mese: consente all'utente di inserire il numero dell'anno e del mese utilizzando lo schema aaaa-mm.
numero - destinato all'immissione di valori interi. Il suo attributi minimi , max e step specificano rispettivamente i limiti superiore, inferiore e il passaggio tra i valori. Questi attributi sono assunti per tutti gli elementi che hanno indicatori numerici. I loro valori predefiniti dipendono dal tipo di elemento.
password: crea campi di testo nel modulo, mentre i caratteri immessi dall'utente vengono sostituiti con asterischi, punti elenco o altro, installato dal browser icone.
radio - crea un interruttore - un controllo a forma di piccolo cerchio che può essere acceso o spento.
range - ti permetterà di creare un elemento dell'interfaccia come uno slider, min / max - ti permetterà di impostare l'intervallo di selezione
ripristina: crea un pulsante che cancella i campi del modulo dai dati immessi dall'utente.
ricerca: denota un campo di ricerca, per impostazione predefinita il campo di input è di forma rettangolare.
inviare - crea pulsante standard , attivato con un clic del mouse. Il pulsante raccoglie informazioni dal modulo e le invia per l'elaborazione.
testo: crea campi di testo su un modulo, generando un campo di testo a riga singola per l'immissione di testo.
ora: consente di inserire l'ora nel formato 24 ore utilizzando il formato hh:mm. Nei browser che supportano appare come un controllo come campo numerico input con un valore modificabile con il mouse e consente l'inserimento solo di valori temporali.
url: il campo è destinato a specificare gli URL.
settimana - Lo strumento puntatore corrispondente consente all'utente di selezionare una settimana dell'anno, dopo la quale fornirà l'immissione dei dati nel formato nn-aaaa. A seconda dell'anno, il numero di settimane può essere 52 o 53.
valore
Determina il testo visualizzato su un pulsante, in un campo o nel testo associato. Non specificato per campi di tipo file.
larghezza
Il valore dell'attributo contiene il numero di pixel. Consente di impostare la larghezza dei campi del modulo.
Tabella 4. Attributi dei tag
Gatto
7. Pulsanti
Elemento ... crea pulsanti cliccabili. A differenza dei pulsanti creati puoi inserire contenuto: testo o immagine.
Per visualizzazione corretta elemento browser diversi è necessario specificare l'attributo type, ad esempio,
I pulsanti consentono agli utenti di inviare dati a un modulo, cancellare il contenuto del modulo o eseguire altre azioni. Puoi creare bordi, modificare lo sfondo e allineare il testo su un pulsante.
Tabella 9. Attributi dei tag
Attributo
Significato/Descrizione
messa a fuoco automatica
Imposta lo stato attivo sul pulsante quando viene caricata la pagina.
disabilitato
Disabilita il pulsante, rendendolo non cliccabile.
modulo
Indica uno o più moduli a cui appartiene questo pulsante. Il valore dell'attributo è l'identificatore del modulo corrispondente.
formazione
Il valore dell'attributo contiene l'URL del gestore dati del modulo inviato quando si fa clic sul pulsante. Solo per il tipo di pulsante type="submit" . Sostituisce il valore dell'attributo action specificato per l'elemento
formantype
Imposta il tipo di codifica dei dati del modulo prima di inviarlo al server quando si fa clic su pulsanti come type="submit". Sostituisce il valore dell'attributo enctype specificato per l'elemento
metodo
L'attributo specifica il metodo che il browser utilizzerà per inviare il modulo. Sostituisce il valore dell'attributo del metodo specificato per l'elemento
formnovalidate
L'attributo specifica che i dati del modulo non devono essere convalidati al momento dell'invio. Specificato solo per i pulsanti di tipo type="submit".
formtarget
L'attributo specifica in quale finestra viene visualizzato il risultato dopo l'invio del modulo. Specificato solo per i pulsanti di tipo type="submit". Sostituisce il valore dell'attributo di destinazione specificato per l'elemento
nome
Imposta il nome del pulsante, il valore dell'attributo è testo. Utilizzato per collegarsi ai dati del modulo dopo che il modulo è stato inviato o per collegarsi a determinati pulsanti in JavaScript.
tipo
Definisce il tipo di pulsante. Valori possibili: significato originale
valore
Imposta il valore predefinito inviato quando si fa clic sul pulsante.
8. Caselle di controllo e pulsanti di opzione nei moduli
Le caselle di controllo nei moduli vengono impostate utilizzando il costrutto
Le caselle di controllo, a differenza dei pulsanti di opzione, possono essere impostate su più caselle in un unico modulo. Se per le caselle di controllo viene specificato l'attributo "checked", al caricamento della pagina le caselle di controllo nei campi del modulo corrispondenti saranno già selezionate.
Elemento utilizzato quando si implementa la selezione utilizzando pulsanti di opzione e caselle di controllo. Puoi scegliere elemento desiderato , semplicemente cliccando sul testo ad esso associato. Per fare questo è necessario posizionare .
Etichetta elementi diversi interfaccia e fornire l'interazione dell'utente. Principalmente
Opzioni
Descrizione dei parametri del tag
Determina come allineare il campo immagine rispetto al testo o ad altri elementi del modulo.
Sintassi
Argomenti
metter il fondo a - Allinea il bordo inferiore dell'immagine con il testo circostanteSinistra - Allinea l'immagine al bordo sinistro della finestramezzo - Allinea il centro dell'immagine alla linea di base della linea corrente.Giusto - Allinea l'immagine al bordo destro della finestra.superiore - Il bordo superiore dell'immagine è allineato all'elemento più alto della riga corrente.Il valore predefinito è inferiore. I browser supportano anche gli argomenti fondo , assurdo , linea di base E texttop , che non sono inclusi nella specifica HTML 4.01.
Parametro ALT
Il parametro alt imposta il testo alternativo per il campo immagine. Questo testo ti permette di ottenere informazioni di testo sul disegno quando il caricamento dell'immagine è disabilitato nel browser. Poiché le immagini vengono caricate dopo che il browser ha ricevuto informazioni su di esse, il testo sostitutivo dell'immagine viene visualizzato prima. E durante il caricamento, il testo verrà sostituito da un'immagine. I browser visualizzano anche il testo alternativo come descrizione comando quando passi il mouse su un'immagine.
Sintassi
Il valore può essere qualsiasi stringa di testo . Deve essere racchiuso tra virgolette doppie o singole.
Parametro BORDO
I browser elaborano le immagini aggiunte tramite il tag
Sintassi
Il valore valido è qualsiasi numero intero numero positivo in pixel. Il valore predefinito è 0.
Parametro CONTROLLATO
Questo parametro determina se un elemento del modulo come una casella di controllo o un pulsante di opzione è preselezionato. In caso di utilizzo dei radiobutton è possibile selezionare solo un elemento del gruppo; per le caselle di controllo è consentito contrassegnare almeno tutti gli elementi.
Sintassi
Parametro DISABILITATO
Blocca l'accesso e la modifica di un campo modulo. In questo caso viene visualizzato in grigio e non può essere attivato dall'utente. Inoltre, un campo di questo tipo non può essere attivato premendo il tasto Tab, utilizzando il mouse o in altro modo. Tuttavia, questo stato del campo può essere modificato utilizzando gli script.
Sintassi
Parametro LUNGHEZZAMAX
Imposta il numero massimo di caratteri che possono essere immessi dall'utente in un campo di testo. Quando viene raggiunto questo numero durante la digitazione, diventa impossibile un ulteriore inserimento.
Sintassi
NOME del parametro
Definisce un nome univoco per un elemento del modulo. In genere, questo nome viene utilizzato quando si inviano dati al server o per accedere ai dati dei campi immessi tramite script.
Sintassi
Il nome è un insieme di caratteri, inclusi numeri e lettere. JavaScript fa distinzione tra maiuscole e minuscole, quindi quando fai riferimento a un elemento per nome, utilizza la stessa forma del parametro name.
Parametro READONLY
Quando taggare nuovo testo o modificarne uno esistente. Inoltre, un campo di questo tipo non può essere attivato premendo il tasto Tab, utilizzando il mouse o in altro modo. Tuttavia, lo stato e il contenuto del campo possono essere modificati utilizzando gli script.
Sintassi
Parametro DIMENSIONE
La larghezza del campo di testo, determinata dal numero di caratteri in un font a spaziatura fissa. In altre parole, la larghezza è determinata dal numero di lettere adiacenti aventi la stessa larghezza orizzontale. Se la dimensione del carattere viene modificata utilizzando gli stili, anche la larghezza cambia di conseguenza.
Sintassi
Il valore valido è qualsiasi numero intero positivo.
Parametro SRC
Indirizzo file grafico , che verrà visualizzato sulla pagina web nel campo immagine.
Sintassi
Il valore viene considerato intero o percorso relativo al fascicolo.
Parametro TIPO
Il parametro di tipo richiesto indica al browser di che tipo è l'elemento del modulo.
Sintassi
Argomenti
pulsante - Pulsante.casella di controllo - Bandiere. Permette di selezionare più di un'opzione tra quelle proposte.file - Campo per inserire il nome del file che viene inviato al server.nascosto - Campo nascosto. Non viene visualizzato in alcun modo sulla pagina web.immagine - Campo con un'immagine. Quando si fa clic sull'immagine, i dati del modulo vengono inviati al server.password - Un campo di testo normale, ma differisce da esso in quanto tutti i caratteri vengono visualizzati come asterischi. Progettato per impedire a chiunque di curiosare sulla password inserita.radio - Interruttori. Vengono utilizzati quando è necessario scegliere un'opzione tra le diverse offerte.reset - Un pulsante per riportare i dati del modulo al loro valore originale.invia - Un pulsante per inviare i dati del modulo al server.testo - Campo testo. Progettato per inserire caratteri utilizzando la tastiera.Il valore predefinito è testo.
Parametro VALORE
Definisce il valore dell'elemento del modulo che verrà inviato al server o ricevuto utilizzando gli script client. Una coppia "nome=valore" viene inviata al server, dove il nome è specificato dal parametro name del tag
A seconda del tipo di elemento, il parametro value svolge il seguente ruolo:
per i pulsanti (input type="button | reset | send") imposta su di essi un'etichetta di testo;
per i campi di testo (input type="password | text") specifica la stringa precedentemente inserita. L'utente può cancellare il testo e inserire i propri caratteri, ma quando viene utilizzato nel modulo Pulsante Reimposta, il testo dell'utente viene cancellato e il valore immesso nel parametro valore viene ripristinato;
per caselle di controllo e pulsanti di opzione (input type="checkbox | radio") definisce in modo univoco ciascun elemento in modo che il client o programma server potrebbe determinare chiaramente quale elemento ha selezionato l'utente.
Ultimo aggiornamento: 04/08/2016
Un campo di testo a riga singola viene creato utilizzando l'elemento input quando il suo attributo type è impostato su text:
Puoi personalizzare il campo di testo utilizzando una serie di attributi aggiuntivi:
dirname: imposta la direzione del testo
lunghezza massima: massimo quantità ammissibile caratteri in un campo di testo
modello: definisce il modello a cui deve corrispondere il testo di input
segnaposto: imposta il testo visualizzato per impostazione predefinita nella casella di testo
readonly: rende il campo di testo di sola lettura
obbligatorio: indica che il campo di testo deve avere un valore
size: imposta la larghezza del campo di testo in caratteri visibili
valore: imposta il valore predefinito nel campo di testo
Applichiamo alcuni attributi:
Campi di testo in HTML5
In questo esempio, la seconda casella di testo imposta immediatamente gli attributi maxlength e size. In questo caso, la dimensione, ovvero il numero di caratteri che rientrano nello spazio visibile del campo, è maggiore del numero di caratteri consentito. Tuttavia, non saremo ancora in grado di inserire più caratteri della lunghezza massima.
In questo caso è importante distinguere anche tra gli attributi valore e segnaposto, sebbene entrambi impostati testo visibile nel campo. Tuttavia, il segnaposto imposta una sorta di suggerimento o richiesta di input, quindi di solito è contrassegnato grigio . Mentre il valore rappresenta il testo predefinito inserito nel campo:
Gli attributi sola lettura e disabilitato rendono il campo di testo inaccessibile, ma sono accompagnati da diversi attributi effetto visivo . In caso di disabilitato, il campo di testo è disattivato:
Tra gli attributi di un campo di testo dovremmo menzionare anche un attributo come list . Contiene un riferimento a un elemento datalist, che definisce un insieme di valori che appaiono come tooltip quando vengono immessi in un campo di testo. Per esempio:
Campi di testo in HTML5
35000
L'attributo list di un campo di testo punta all'id dell'elemento datalist. L'elemento datalist stesso definisce gli elementi dell'elenco utilizzando elementi opzione nidificati. E quando digiti in un campo di testo, questo elenco viene visualizzato come descrizione comando.
Campo di ricerca
Utilizzato per creare campi di ricerca elemento di input con l'attributo type="search". Formalmente è un semplice campo di testo:
Cerca in HTML5
Campo password
Per inserire una password, utilizzare l'elemento input con l'attributo type="password". Il suo caratteristica distintiva è che i caratteri inseriti vengono mascherati da punti:
I migliori articoli sull'argomento
Riso. 1. Moduli Web migliorati con HTML5