Etichetta (dall'inglese. ingresso- Entrata)è uno degli elementi del modulo versatili e consente di creare parti diverse dell'interfaccia e fornire l'interazione con l'utente.
Principalmente è progettato per creare campi di testo, vari pulsanti, interruttori e caselle di controllo.
attributo principale , che definisce il tipo di tipo di elemento . Ti permette di impostare i seguenti elementi moduli: campo di testo (testo), campo password (password), interruttore (radio), casella di controllo (casella di controllo), campo nascosto (nascosto), pulsante (pulsante), pulsante per inviare il modulo (invia), pulsante per cancellare il modulo ( reset ), un campo per l'invio di un file (file), un pulsante con un'immagine (immagine), ecc. Ogni elemento ha un proprio elenco di attributi che ne determinano l'aspetto e le caratteristiche. Inoltre, oltre una dozzina di nuovi attributi sono stati aggiunti a HTML5.
Sintassi
Il tag di chiusura non è richiesto.
WA ARIA
Non valori di ruolo predefinito.
Valori di ruolo validi:
- pulsante
- casella di controllo
- combo box
- collegamento
- elemento del menu
- casella di controllo della voce di menu
- voce del menu
- opzione
- Radio
- casella di ricerca
- cursore
- pulsante di rotazione
- interruttore
- casella di testo
Attributi
- accetta - Imposta un filtro per i tipi di file che puoi inviare tramite la casella di caricamento file.
- alt - Testo alternativo per il pulsante dell'immagine.
- completamento automatico - Abilita o disabilita il completamento automatico.
- autofocus - Imposta lo stato attivo su un campo modulo.
- selezionato - Un pulsante di opzione o casella di controllo precedentemente attivato.
- dirname - Un parametro che invia la direzione del testo al server.
- disabilitato - Blocca l'accesso e la modifica dell'elemento.
- form: associa un campo a un modulo tramite il relativo id.
- formazione - Specifica l'indirizzo del gestore del modulo.
- formenctype - Imposta come vengono codificati i dati del modulo quando vengono inviati al server.
- formmethod - Indica al browser quale metodo inviare i dati del modulo al server.
- formnovalidate - Annulla la convalida dei dati incorporata.
- formtarget: specifica la finestra o il frame in cui verrà caricato il risultato restituito dal gestore del modulo.
- elenco - Indica un elenco di opzioni che possono essere selezionate durante l'immissione di testo.
- max - Il valore superiore per inserire un numero o una data.
- lunghezza massima - Importo massimo caratteri ammessi nel testo.
- min - Il valore più basso per inserire un numero o una data.
- minlength - Il numero minimo di caratteri consentiti nel testo.
- multiple: consente di caricare più file contemporaneamente.
- nome - Il nome del campo, destinato all'elaboratore di moduli per identificarlo.
- pattern - Imposta il pattern di input.
- segnaposto - Visualizza il testo suggestivo.
- readonly - Specifica che il campo non può essere modificato dall'utente.
- obbligatorio - Campo obbligatorio.
- taglia - Larghezza campo di testo.
- src - Indirizzo file grafico per il campo immagine.
- step - Passaggio di incremento per i campi numerici.
- type - Indica al browser di che tipo è l'elemento del modulo.
- valore - Il valore dell'elemento.
accettare
Imposta un filtro sui tipi di file che puoi inviare tramite il campo di caricamento file. Il tipo di file è specificato come tipo MIME, con più valori sono elencati separati da virgole. Se un file non corrisponde al filtro impostato, non viene visualizzato nella finestra di selezione del file.
Si applica al campo di caricamento file ( ).
Supporto del browser
Valore predefinito
alt
L'attributo alt viene impostato testo alternativo per il campo immagine. Questo testo te lo permette informazioni di testo sull'immagine durante il caricamento delle immagini è disabilitato nel browser ed è destinato anche ai motori di ricerca.
Sintassi
I valori
Qualsiasi adatto stringa di testo.
Valore predefinito
completamento automatico
Questo attributo aiuta a popolare i campi del modulo con il testo che è stato inserito in precedenza. I valori vengono salvati e sostituiti dal browser, ma il completamento automatico può essere disabilitato dall'utente nelle impostazioni del browser per motivi di sicurezza e non può quindi essere controllato dall'attributo di completamento automatico.
Quando inserisci le prime lettere del testo, viene visualizzato un elenco di valori precedentemente salvati, dal quale puoi selezionare quello che ti serve.
Il completamento automatico di un particolare campo del modulo è legato al relativo attributo del nome e viene perso quando il valore cambia.
Sintassi
I valori
- on - Attiva il completamento automatico del testo.
- off - Disabilita il completamento automatico. Questo valore viene solitamente utilizzato per impedire la memorizzazione nel browser di dati importanti (password, numeri di telefono). carte bancarie), nonché dati univoci o inseriti raramente (captcha).
Valore predefinito
Dipende dalle impostazioni del browser.
messa a fuoco automatica
Imposta automaticamente lo stato attivo su un campo modulo. In tale campo è possibile digitare immediatamente il testo senza fare clic su di esso in modo esplicito con il cursore del mouse.
Sintassi
I valori
Valore predefinito
Per impostazione predefinita, l'attributo di messa a fuoco automatica non è impostato.
controllato
Questo attributo specifica se un elemento del modulo come una casella di controllo o un pulsante di opzione è preselezionato. Nel caso di utilizzo dei pulsanti radio è possibile selezionare un solo elemento del gruppo, per le caselle di controllo è possibile selezionare almeno tutti gli elementi.
Sintassi
I valori
Valore predefinito
dirname
Se è presente l'attributo dirname, una coppia nome/valore viene inviata al server, dove il nome è dato dall'attributo dirname, e il valore viene sostituito dal browser. Per il testo da sinistra a destra, il valore sarà ltr e per il testo da destra a sinistra (in ebraico, ad esempio), il valore sarà rtl .
Sintassi
I valori
Una stringa di testo arbitraria che funge da nome del parametro. Per indicare che questa opzione specifica la direzione del testo, di solito viene aggiunto un .dir alla fine della riga.
Valore predefinito
Disabilitato
Blocca l'accesso e la modifica del campo del modulo. In questo caso viene visualizzato in grigio e non può essere attivato dall'utente. Inoltre, un campo di questo tipo non può ricevere lo stato attivo premendo il tasto Tab, il mouse o in altro modo. Tuttavia, questo stato del campo può essere modificato utilizzando gli script. Il valore bloccato nel campo non viene inviato al server.
Sintassi
I valori
Valore predefinito
Per impostazione predefinita, questo attributo è disabilitato.
modulo
Associa un campo a un modulo tramite il suo ID. Tale connessione è necessaria quando il campo si trova all'esterno
I valori
Identificatore del modulo (il valore dell'attributo id dell'elemento
Parametri
Descrizione dei parametri dei tag
Parametro ALLINEA
Specifica come allineare il campo dell'immagine con il testo o altri elementi del modulo.
Sintassi
argomenti
- parte inferiore- Allinea il bordo inferiore dell'immagine al testo circostante
- sinistra- Allinea l'immagine al bordo sinistro della finestra
- mezzo- 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 con l'elemento più alto della linea corrente.
Il valore predefinito è inferiore. Anche i browser supportano gli argomenti absbottom, addominali, linea di base e testo in alto, che non sono inclusi nella specifica HTML 4.01.
Opzione ALT
Il parametro alt imposta il testo alternativo per il campo immagine. Tale testo consente di ottenere informazioni testuali sull'immagine quando il caricamento delle immagini è disabilitato nel browser. Poiché le immagini vengono caricate dopo che il browser ha ricevuto informazioni su di esse, il testo sostitutivo per l'immagine viene visualizzato prima. E durante il caricamento, il testo verrà sostituito da un'immagine. I browser visualizzano anche testo alternativo come suggerimento che appare quando si passa il mouse sopra un'immagine.
Sintassi
Il valore può essere qualsiasi stringa di testo adatta. Deve essere racchiuso tra virgolette doppie o singole.
Parametro BORDO
I browser elaborano le immagini aggiunte tramite un tag , simile alle immagini create con il tag . Includendo intorno all'immagine, puoi aggiungere una cornice, il cui colore corrisponde al colore del testo.
Sintassi
Il valore valido è qualsiasi numero intero positivo in pixel. Il valore predefinito è 0.
parametro VERIFICATO
Questa impostazione determina se un elemento del modulo come una casella di controllo o un pulsante di opzione è preselezionato. Nel caso di utilizzo dei radiobutton è possibile spuntare un solo elemento del gruppo, per le checkbox è consentito spuntare almeno tutti gli elementi.
Sintassi
Parametro DISABILITATO
Blocca l'accesso e la modifica del campo del modulo. In questo caso viene visualizzato in grigio e non può essere attivato dall'utente. Inoltre, un campo di questo tipo non può ricevere lo stato attivo premendo il tasto Tab, il mouse o in altro modo. Tuttavia, questo stato del campo può essere modificato utilizzando gli script.
Sintassi
parametro LUNGHEZZA MASSIMA
Imposta il numero massimo di caratteri che un utente può inserire in un campo di testo. Quando viene raggiunto questo numero durante la digitazione, l'ulteriore immissione diventa impossibile.
Sintassi
parametro NOME
Specifica un nome univoco per l'elemento del modulo. In genere, questo nome viene utilizzato quando si inviano dati al server o si accede ai dati del campo immessi tramite script.
Sintassi
Il nome è un insieme di caratteri, inclusi numeri e lettere. JavaScript fa distinzione tra maiuscole e minuscole, quindi quando si fa riferimento a un elemento per nome, utilizzare la stessa ortografia del parametro name.
parametro SOLO READ
Quando taggare viene aggiunto il parametro readonly, il campo di testo non può essere modificato dall'utente, incluso l'inserimento di nuovo testo o la modifica di uno esistente. Inoltre, un campo di questo tipo non può ricevere lo stato attivo premendo il tasto Tab, 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 nel carattere a spaziatura fissa. In altre parole, la larghezza è data dal numero di lettere adiacenti della 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
L'indirizzo del file grafico che verrà visualizzato nella pagina web nel campo immagine.
Sintassi
Il valore accetta il percorso completo o relativo del file.
parametro TIPO
Il parametro di tipo richiesto indica al browser di che tipo è l'elemento del modulo.
Sintassi
argomenti
- pulsante- Pulsante.
- casella di controllo- Caselle di controllo. Consente di selezionare più di un'opzione dalle opzioni.
- file- Campo per inserire il nome del file che viene inviato al server.
- nascosto- Campo nascosto. Non compare in alcun modo sulla pagina web.
- Immagine- Campo con un'immagine. Quando si fa clic su un'immagine, i dati del modulo vengono inviati al server.
- parola d'ordine- Un normale campo di testo, ma si differenzia da esso in quanto tutti i caratteri sono visualizzati come asterischi. Ha lo scopo di garantire che nessuno sbircia nella password inserita.
- Radio- Interruttori. Usato quando devi scegliere un'opzione tra diverse opzioni.
- Ripristina- Pulsante per riportare i dati del modulo al valore originale.
- Invia- Pulsante per inviare i dati del modulo al server.
- testo- Campo di testo. Progettato per inserire caratteri utilizzando la tastiera.
Il valore predefinito è testo.
VALORE parametro
Specifica il valore dell'elemento del modulo che verrà inviato al server o recuperato utilizzando gli script client. Una coppia “nome=valore” viene inviata al server, dove il nome è specificato dal parametro name del tag e il valore è il parametro del valore.
A seconda del tipo di elemento, il parametro value ha il ruolo seguente:
- per i pulsanti (input type="button | reset | submit") imposta l'etichetta di testo su di essi;
- per i campi di testo (input type="password | testo") specifica una stringa inserita in precedenza. L'utente può cancellare il testo e inserire i propri caratteri, ma quando viene utilizzato sul pulsante Reimposta del modulo, il testo dell'utente viene cancellato e viene ripristinato il valore inserito nel parametro valore;
- per caselle di controllo e pulsanti di opzione (input type="checkbox | radio") identifica in modo univoco ogni elemento in modo che un programma client o server possa determinare in modo univoco quale elemento è stato selezionato dall'utente.
Penso che molti tipografi (e non solo) dovessero comporre campi di testo ( ), assegnando loro dimensioni arbitrarie. Ma come fare dato elemento gomma e soddisfare le condizioni:
- Possibilità di installare qualsiasi orizzontale e rientri verticali al testo;
- Un elemento deve occupare l'intero contenitore in cui è posizionato;
- Facendo clic in un punto qualsiasi del campo di testo si posiziona il cursore al suo interno.
La risposta è abbastanza semplice ed è risolta con il seguente metodo:
Innanzitutto, devi capire cosa succede a un elemento di input quando ne imposti la larghezza al 100% e aggiungi il riempimento a sinistra ea destra del testo.Secondo gli standard CSS (e in questo caso tutti i browser li supportano), larghezza risultante elemento di input, in assenza di confini ( frontiera) e margini di margine ( margine), sarà uguale a:
larghezza = larghezza + riempimento-sinistra + riempimento-destra
Quelli. sarà maggiore della quantità di rientri orizzontali interni e l'elemento risultante sporgerà oltre l'area ad esso assegnata.
Per rendere la larghezza finale pari al 100%, puoi utilizzare un sistema di due contenitori:
Ogni contenitore ha il suo ruolo:
- larghezza di ingresso– questo contenitore imposta la larghezza risultante del campo di testo;
- setter di larghezza- questo contenitore imposta la larghezza dell'elemento di input meno il riempimento orizzontale.
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter ( height:23px; margin:0 9px; ) .width-setter input ( width:100%; height:14px ; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 nessuno; background:#9C6; )
Esempio 1
Dagli stili risulta che l'elemento larghezza di ingresso specifica la larghezza che avrebbe dovuto prendere il campo di testo. Elemento setter di larghezza imposta la larghezza dell'elemento di input in modo che sia inferiore a quella orizzontale imbottitura. Vale la pena notare che il suo riempimento del margine esterno ( margine) deve essere uguale riempimento a sinistra e imbottitura a destra per l'elemento di input.
Con questa descrizione, l'elemento di input sporgerà da setter di larghezza dalla quantità dei loro trattini orizzontali ( imbottitura), e in IE6 - allunga tutti i "genitori" alla propria dimensione (esempio 1). Anche nei browser IE6-7, l'elemento di input ha un riempimento che non può essere rimosso impostando la proprietà su zero. margine. Per cambiare questa posizione, devi spostare il campo di testo a sinistra, della dimensione del rientro sinistro ( riempimento a sinistra). Puoi farlo tramite position: relative, ma in IE6 rimarrà allungato alla larghezza del testo campi di immissione contenitore setter di larghezza. Per eliminare lo stretching, devi assicurarti che l'elemento non possa influenzare la dimensione del suo genitore impostando, ad esempio, posizione: assoluta.
Descriviamo il set iniziale di contenitori in un modo nuovo:
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter ( height:23px; margin:0 9px; position:relative; ) .width-setter input ( width:100% ; height:14px; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 nessuno; sfondo :#9C6; posizione:assoluta; sinistra:-9px; alto:0; )
Esempio 2
Di conseguenza, quando si applicano tali stili, le attività impostate all'inizio vengono completate. Il campo di testo è risultato con dati trattini gomma e cliccabile in qualsiasi sua posizione.
Per impostare una larghezza specifica per l'elemento finale, devi solo impostare la proprietà larghezza per contenitore larghezza di ingresso.
Nota. Il metodo fornito per implementare un campo di testo in gomma è testato su Doctype: HTML 4.01, XHTML 1.0 e HTML (HTML 5) - ed è compatibile con più browser: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . In assenza di un Doctype, le prestazioni cross-browser del metodo non sono garantite.
Penso che molti tipografi (e non solo) dovessero comporre campi di testo ( ), assegnando loro dimensioni arbitrarie. Ma come rendere questo elemento in gomma e soddisfare le condizioni:
- Possibilità di impostare eventuali rientri orizzontali e verticali per il testo;
- Un elemento deve occupare l'intero contenitore in cui è posizionato;
- Facendo clic in un punto qualsiasi del campo di testo si posiziona il cursore al suo interno.
La risposta è abbastanza semplice ed è risolta con il seguente metodo:
Innanzitutto, devi capire cosa succede a un elemento di input quando ne imposti la larghezza al 100% e aggiungi il riempimento a sinistra ea destra del testo.Secondo gli standard CSS (e in questo caso tutti i browser li supportano), la larghezza risultante dell'elemento di input, senza bordi ( frontiera) e margini di margine ( margine), sarà uguale a:
larghezza = larghezza + riempimento-sinistra + riempimento-destra
Quelli. sarà maggiore della quantità di rientri orizzontali interni e l'elemento risultante sporgerà oltre l'area ad esso assegnata.
Per rendere la larghezza finale pari al 100%, puoi utilizzare un sistema di due contenitori:
Ogni contenitore ha il suo ruolo:
- larghezza di ingresso– questo contenitore imposta la larghezza risultante del campo di testo;
- setter di larghezza- questo contenitore imposta la larghezza dell'elemento di input meno il riempimento orizzontale.
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter ( height:23px; margin:0 9px; ) .width-setter input ( width:100%; height:14px ; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 nessuno; background:#9C6; )
Esempio 1
Dagli stili risulta che l'elemento larghezza di ingresso specifica la larghezza che avrebbe dovuto prendere il campo di testo. Elemento setter di larghezza imposta la larghezza dell'elemento di input inferiore al riempimento orizzontale. Vale la pena notare che il suo riempimento del margine esterno ( margine) deve essere uguale riempimento a sinistra e imbottitura a destra per l'elemento di input.
Con questa descrizione, l'elemento di input sporgerà da setter di larghezza dalla quantità dei loro trattini orizzontali ( imbottitura), e in IE6 - allunga tutti i "genitori" alla propria dimensione (esempio 1). Anche nei browser IE6-7, l'elemento di input ha un riempimento che non può essere rimosso impostando la proprietà su zero. margine. Per cambiare questa posizione, devi spostare il campo di testo a sinistra, della dimensione del rientro sinistro ( riempimento a sinistra). Puoi farlo tramite position:relative, ma in IE6 rimarrà allungato per adattarsi alla larghezza del contenitore di input del campo di testo setter di larghezza. Per eliminare lo stretching, devi assicurarti che l'elemento non possa influenzare la dimensione del suo genitore impostando, ad esempio, posizione: assoluta.
Descriviamo il set iniziale di contenitori in un modo nuovo:
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter ( height:23px; margin:0 9px; position:relative; ) .width-setter input ( width:100% ; height:14px; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 nessuno; sfondo :#9C6; posizione:assoluta; sinistra:-9px; alto:0; )
Esempio 2
Di conseguenza, quando si applicano tali stili, le attività impostate all'inizio vengono completate. Il campo di testo risultava con i rientri forniti in gomma e cliccabile in qualsiasi sua posizione.
Per impostare una larghezza specifica per l'elemento finale, devi solo impostare la proprietà larghezza per contenitore larghezza di ingresso.
Nota. Il metodo fornito per implementare un campo di testo in gomma è testato su Doctype: HTML 4.01, XHTML 1.0 e HTML (HTML 5) - ed è compatibile con più browser: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . In assenza di un Doctype, le prestazioni cross-browser del metodo non sono garantite.
