Esempi di input HTML. Tipi di elementi INPUT

< form id = "search" method = "get" >

< label for = "s" >Ricerca< / label >

< input type = "search" id = "s" name = "s" / >

< input type = "submit" value = "Ricerca" / >

< / form >

< label for = "email" >Il mio indirizzo di posta elettronica è< / label >

< input type = "email" id = "email" name = "email" / >

funzione setErrorMessages(formControl) (

var ValidityState_object = formControl . validità;

if (validityState_object . valueMissing ) (

formControl. setCustomValidity( "Imposta un'età (richiesto)") ;

) else if (validityState_object . rangeUnderflow ) (

formControl. setCustomValidity ("Sei troppo giovane");

) else if (validityState_object . rangeOverflow ) (

formControl. setCustomValidity ("Sei troppo vecchio");

) else if (validityState_object . stepMismatch ) (

Specifica

Attributo richiesto

I valori

In tavola. 1 elenca i possibili valori per l'attributo type e l'aspetto risultante del campo modulo.

Nuovi valori sono stati aggiunti a HTML5, come mostrato nella Tabella 1. 2.

Il supporto per questi valori da parte dei browser è mostrato nella tabella. 3.

Valore predefinito

HTML5 IE Cr Op Sa Fx

HTML5 IE Cr Op Sa Fx

Etichetta INGRESSOè uno degli elementi del modulo versatili e consente di creare diversi elementi dell'interfaccia e fornire l'interazione con l'utente. Lo scopo principale di INPUT è creare campi di testo, vari pulsanti, interruttori e caselle di controllo. Sebbene elemento INGRESSO non deve essere inserito all'interno di un contenitore FORM che definisce un modulo, ma se l'input dell'utente deve essere inviato a un server dove viene elaborato da un programma CGI, è necessario FORM. Lo stesso vale nel caso dell'utilizzo del trattamento dei dati applicazioni client come gli script JavaScript.

Parametro principale tag INGRESSO, che definisce il tipo di tipo di elemento . Ti permette di impostare i seguenti elementi moduli: campo di testo ( testo ), campo password ( password ), pulsante di opzione ( checkbox ), checkbox ( pulsante di opzione ), 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) e un pulsante con un'immagine (immagine). Ogni elemento ha un proprio elenco di parametri che ne determinano l'aspetto e le caratteristiche.

Sintassi

Etichetta di chiusura
Non richiesto.

Parametri
align - determina l'allineamento dell'immagine.
alt- testo alternativo per un pulsante con un'immagine.
bordo: lo spessore della cornice attorno all'immagine.
selezionato - pulsante di opzione o casella di controllo precedentemente attivato.
disabilitato - blocca l'accesso e la modifica dell'elemento.
lunghezza massima - importo massimo caratteri ammessi nel testo.
nome - il nome del campo, destinato al gestore del modulo per identificarlo.
readonly - specifica che il campo non può essere modificato dall'utente.
size - la larghezza del campo di testo.
src - valore dell'elemento.

Esempio 1: utilizzo del tag INPUT

Il tuo nome:

Che browser utilizzi principalmente?

Internet Explorer

Netscape

musica lirica

firefox

Mozilla

Un commento

Descrizione dei parametri del tag INPUT

Parametro ALLINEA

Descrizione
Specifica come allineare il campo dell'immagine con il testo o altri elementi del modulo.

Sintassi

Si applica

argomenti
Elenchi della tabella 1 significato possibile allineare parametro e il risultato del suo utilizzo.

Valore predefinito
parte inferiore

Esempio 2. Allineamento di un campo con un'immagine

...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Nota
Sebbene tutti i valori dei parametri di align siano supportati dai browser, gli argomenti absbottom , absmiddle , baseline e texttop non sono definiti dalla specifica HTML 4.

Opzione ALT

Descrizione
Il parametro alt imposta il testo alternativo per il campo immagine. Questo testo te lo permette informazioni di testo sull'immagine durante 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

argomenti
Qualsiasi adatto stringa di testo. Deve essere racchiuso tra virgolette doppie o singole.

Valore predefinito
No.

Esempio 3: aggiungi testo alternativo

...
alt="(!LANG:Invia modulo al server" !}>

Parametro BORDO

Descrizione
I browser trattano le immagini aggiunte tramite il tag INPUT come immagini create con tag img. Includendo intorno all'immagine, puoi aggiungere una cornice, il cui colore corrisponde al colore del testo.

Sintassi

argomenti
Qualsiasi numero intero numero positivo in pixel.

Valore predefinito
0

Esempio 4: aggiunta di una cornice a un'immagine

...

Nota
Questa impostazione è attualmente supportata solo da Netscape, altri browser la ignorano e visualizzano l'immagine senza bordo.

parametro VERIFICATO

Descrizione
Questa impostazione determina se un elemento del modulo come una casella di controllo o un pulsante di opzione è preselezionato. Nel caso di utilizzo dei pulsanti di opzione (checkbox) è possibile contrassegnare un solo elemento del gruppo, per i checkbox (pulsante di opzione) è consentito contrassegnare almeno tutti gli elementi.

Sintassi

argomenti
No.

Valore predefinito

Esempio 5. Etichettare i pulsanti di opzione

Con quale sistemi operativi Vi conoscete?

Windows 95/98

Windows 2000

Sistema X
linux
X3-DOS

Parametro DISABILITATO

Descrizione
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

Si applica
Per tutti gli elementi del modulo.

argomenti
No.

Valore predefinito
Per impostazione predefinita, questa opzione è disabilitata.

parametro LUNGHEZZA MASSIMA

Descrizione
Imposta numero massimo caratteri che possono essere inseriti dall'utente nel campo di testo. Quando viene raggiunto questo numero durante la digitazione, l'ulteriore immissione diventa impossibile.

Sintassi

argomenti
Qualsiasi numero intero positivo nei caratteri.

Valore predefinito
L'immissione dei caratteri non è limitata.

Esempio 7 - Limitazione del numero di caratteri inseriti in un campo

parametro NOME

Descrizione
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

Si applica
Per tutti gli elementi del modulo.

argomenti
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.

Valore predefinito
No.

Esempio 8: utilizzo di un nome di campo

Inserire il testo

parametro SOLO READ

Descrizione
Quando un parametro di sola lettura viene aggiunto a un tag INPUT, il campo di testo non può essere modificato dall'utente, incluso l'inserimento di nuovo testo o la modifica di testo 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

argomenti
No.

Valore predefinito
Per impostazione predefinita, questo valore è disabilitato.

Esempio 9 - Campo di sola lettura

parametro DIMENSIONE

Descrizione
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

argomenti
Qualsiasi numero intero positivo.

Valore predefinito
20

Esempio 10. Larghezza campo

parametro SRC

Descrizione
L'indirizzo file grafico, che verrà visualizzato nella pagina web nel campo con l'immagine. I file più popolari in formato GIF e JPEG.

Sintassi

argomenti
Il valore è il pieno o percorso relativo al file.

Valore predefinito
No.

Esempio 11. Percorso del file grafico

...

parametro TIPO

Descrizione
Indica al browser di che tipo è l'elemento del modulo.

Sintassi

argomenti
La tabella 2 elenca i possibili valori per il parametro tipo e l'aspetto risultante del campo modulo.

VALORE parametro

Descrizione
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 è dato dal parametro name del tag INPUT e il valore è dato dal parametro value.

A seconda del tipo di elemento, il parametro value ha il ruolo seguente:

• per pulsanti ( inputtype=pulsante | ripristinare | Invia) vi appone un'iscrizione di testo;
• per i campi di testo (input type=password | text ) specifica una stringa immessa 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 checkbox e pulsanti di opzione (input type=checkbox | radio ) identifica in modo univoco ogni elemento, in modo che lato client o programma server potrebbe determinare in modo inequivocabile quale elemento l'utente aveva selezionato.

Sintassi

Si applica
Per tutti gli elementi del modulo.

argomenti
Qualsiasi stringa di testo.

Valore predefinito
No.

Esempio 13: aggiunta di un valore di campo

Cosa pensi che significhi l'abbreviazione "OS"?

Ufficiali

Sistema operativo

Grandi mosche striate

Nuovi tipi di elementi

Una delle strane caratteristiche dei moduli HTML è l'uso di un singolo elemento con un nome vago. per creare una varietà di controlli, dalle caselle di controllo ai campi di testo e ai pulsanti. L'aspetto specifico del controllo dipende dall'attributo genere elemento .

Se il browser incontra tipo sconosciuto elemento , il browser web lo considera come un normale campo di testo. Ciò significa che i seguenti tre elementi sono trattati esattamente allo stesso modo da tutti i browser:

HTML5 sfrutta questo comportamento. Vale a dire, nell'elemento sono stati aggiunti diversi nuovi tipi e se un browser non li supporta, li tratterà normalmente campi di testo. Ad esempio, per inserire un indirizzo email, puoi creare un campo nuovo tipo e-mail:

Se visualizzi la pagina con questo codice in un browser che non supporta il tipo di email per l'elemento (ad esempio, Internet Explorer), questo campo verrà visualizzato come un normale campo di testo. Ma i browser che supportano i moduli HTML5 sono un po' più intelligenti e possono fare quanto segue:

Offri servizi di editing. Ad esempio, un browser intelligente potrebbe fornire un modo per selezionare un indirizzo e-mail da rubrica e incollalo nel campo dell'indirizzo.

prevenire possibili errori. Ad esempio, il browser potrebbe non accettare lettere quando si inserisce un campo numerico, o non accettare date non valide, o costringere l'utente a selezionare del tutto date da un mini-calendario, il che è più semplice e sicuro.

Eseguire la verifica. I browser possono fare di più controlli complessi dopo che l'utente ha fatto clic sul pulsante per inviare i dati.

La specifica HTML5 non fornisce agli sviluppatori di browser alcuna guida sul primo punto. I browser sono liberi di controllare la visualizzazione e la modifica tipi diversi dati in modo significativo, e browser diversi può aggiungere vari piccoli servizi.

Ma più importanti sono la capacità di controllare ed eliminare gli errori. Come minimo assoluto, un browser abilitato ai moduli HTML5 dovrebbe impedire l'invio di un modulo contenente dati che violano le regole del tipo di dati. Pertanto, se il browser non è in grado di prevenire errori direttamente in input (secondo il secondo elemento dell'elenco sopra), dovrebbe verificarli quando l'utente tenta di inviare il modulo (secondo il terzo elemento).

Sfortunatamente, non tutti browser moderni soddisfare questi requisiti. Alcuni riconoscono nuovi tipi di dati e forniscono alcune funzionalità di modifica, ma nessuna convalida. Molti browser comprendono un tipo di dati ma non l'altro. I browser mobili sono particolarmente problematici a questo proposito: forniscono alcune comodità di modifica, ma nessuna funzionalità di convalida.

La tabella seguente mostra i nuovi tipi di dati e il livello di pieno supporto nei principali browser. Supporto totale significa che se il tipo di dati viene violato, il modulo non viene inviato.

Supporto per nuovi tipi di dati da parte dei principali browser

Tipo di dati	CIOÈ	Firefox	Cromo	safari	musica lirica	Safari iOS	Androide
e-mail	-	4	10	5	10.6	-	-
url	-	4	10	5	10.6	-	-
ricerca(nessun controllo)
tel(nessun controllo)
numero	-	-	10	5	-	-	-
allineare	-	-	6	5	11	-	-
datetime, data, mese, settimana, ora	-	-	10	-	11	-	-
colore	-	-	-	-	11	-	-

Sebbene i browser mobili Safari per iOS e Android non supportino la convalida, è una grande comodità che questi browser forniscano tastiere specializzate, quindi dovresti utilizzare tipi di dati speciali nelle applicazioni per questi browser web.

Indirizzi email

Tipo dati di posta elettronica utilizzato per i campi per l'inserimento di indirizzi email. In generale, un indirizzo email è costituito da una stringa di caratteri (alcuni caratteri non sono consentiti). Un indirizzo valido deve contenere il simbolo @ e un punto, con almeno un carattere tra di loro e almeno due caratteri dopo il punto:

Il tipo di email supporta l'attributo multiplo, che consente di inserire più indirizzi in un campo. Ma questi indirizzi multipli sembrano ancora una riga di testo, separata solo da virgole.

Non dimenticare quello valori vuoti vengono testati. Per evitare un campo indirizzo vuoto, l'attributo richiesto deve essere inserito nel suo elemento.

URL

Tipo url si applica ai campi di input dell'URL. La questione di quale sia un URL valido continua ad essere oggetto di accesi dibattiti. Ma la maggior parte dei browser utilizza un algoritmo di convalida relativamente debole. L'indirizzo deve contenere un prefisso (che può essere reale, come http://, o fittizio, come bonk//) e consente spazi e la maggior parte personaggi speciali, fatta eccezione per i due punti.

Alcuni browser offrono anche suggerimenti URL in un elenco a discesa, che di solito sono presi dalla cronologia del browser delle pagine visitate di recente.

Campi di ricerca

Tipo ricerca applicato ai campi di ricerca. Di solito sono pensati per essere inseriti parole chiave, su cui viene quindi eseguita una sorta di ricerca. Può trattarsi di una ricerca sull'intero Internet (come in Google), di una ricerca su una singola pagina o di una procedura di ricerca speciale che esplora un catalogo di informazioni. In entrambi i casi, il campo di ricerca appare e si comporta quasi esattamente come un normale campo di testo.

In alcuni browser, come Safari, il campo di ricerca ha un aspetto leggermente diverso e ha angoli arrotondati. Inoltre, quando l'utente inizia a inserire i dati nel campo di ricerca in browser Safari o Chrome, con lato destro campo visualizza una piccola icona X su cui è possibile fare clic per cancellare il campo.

A parte queste piccole differenze, la casella di ricerca non è altro che una normale casella di testo. La differenza principale è nella semantica. In altre parole, il tipo di dati di ricerca viene utilizzato per rendere il nome del campo chiaro ai browser e programmi ausiliari per utenti con handicappato. Possono indirizzare i visitatori alla posizione desiderata sulla pagina o fornire altri servizi più intelligenti, forse in futuro.

Numeri di telefono

Tipo di dati tel utilizzato per designare i campi di input numeri di telefono, che può essere rappresentato nella maggior parte dei casi formati diversi. In alcuni casi vengono utilizzati solo numeri, in altri spazi, trattini, segno più e parentesi tonde. Forse questa mancanza di un formato uniforme è il motivo per cui lo standard HTML5 non richiede ai browser di eseguire la convalida del numero di telefono. Tuttavia, non è chiaro perché un campo di tipo tel non rifiuti almeno le lettere.

Attualmente, l'unico vantaggio dell'utilizzo di un campo di tipo tel è quello di fornire servizi specializzati tastiera virtuale per inserire i numeri di telefono browser mobili A che contiene numeri ma non lettere.

Numeri

HTML5 definisce due tipi di dati numerici. Tipo numero destinato ai numeri ordinari.

Questo tipo di dati ha un potenziale evidente. I normali campi di testo accettano letteralmente tutto: numeri, lettere, spazi, segni di punteggiatura, ecc. Per questo motivo, una delle attività di convalida più comuni consiste nell'assicurarsi che un valore sia un numero all'interno di un determinato intervallo. Ma quando si immettono dati in un campo di tipo numero, il browser ignora automaticamente tutti i caratteri tranne i numeri. Di seguito è riportato un codice di esempio per la creazione di un campo di questo tipo:

Età *

Naturalmente, ci sono molti numeri che non sono adatti a tutti i tipi di dati numerici. Ad esempio, il markup sopra consente un'età come 43.000 o -6 anni, il che è alquanto irrealistico. Questo problema viene risolto con l'aiuto degli attributi min e max. Il codice seguente fornisce un esempio di limitazione dell'età a un intervallo ragionevole:

In genere, i campi di tipo numero accettano solo numeri interi e non sono consentite frazioni come 30,5. (Inoltre, alcuni browser non ti consentono nemmeno di inserire un punto decimale.) Ma questo comportamento può anche essere modificato con l'attributo fare un passo, che indica la fase di modifica del numero (su o giù). Ad esempio, impostando il valore del passaggio su 0,1, puoi inserire valori come 0,1, 0,2, 0,3 e così via, ma prova a inviare il modulo con un valore di 0,15 e otterrai il familiare popup di errore. Il valore del passo predefinito è 1.

L'attributo step influisce anche sul funzionamento dei pulsanti di campo con uno spinner:

cursori

Un altro tipo numerico HTML5 è allineare. Come il tipo numerico, questo tipo può rappresentare valori interi e frazionari. Supporta anche attributi minimi e max per impostare l'intervallo di valori. Di seguito è riportato un codice di esempio per la creazione di un campo di questo tipo:

Età *

La differenza sta nel modo in cui il campo dell'intervallo rappresenta le sue informazioni. Invece di un contatore, come per un campo di tipo numero, i browser intelligenti mostrano uno slider:

Per impostare un valore di tipo intervallo, devi solo trascinare il cursore nella posizione richiesta tra il minimo e valori massimi. Ma i browser che supportano questo tipo di campo non forniscono alcun feedback in merito valore impostato. Per ottenere queste informazioni, è necessario aggiungere una procedura JavaScript al markup che reagisca ai cambiamenti nella posizione dello slider (magari gestendo l'evento onChange), quindi visualizzare questa formazione accanto al campo.

data e ora

HTML5 definisce diversi tipi di dati relativi al tempo. I browser che supportano i tipi di data possono visualizzare un comodo calendario a discesa in cui l'utente può selezionare la data e/o l'ora richiesta. Questo non solo rimuove l'incertezza sul formato della data corretto, ma impedisce anche di impostare accidentalmente (o di proposito) una data che non esiste. Browser intelligenti può fare ancora di più, come supportare l'integrazione con un calendario personale.

Quello che segue è un esempio di utilizzo delle date:

Data di nascita *

La tabella seguente elenca i sei nuovi formati di data e ora HTML5 con una breve descrizione:

I browser che supportano i tipi di dati per date e orari supportano anche gli attributi min e max per essi, consentendoti di impostare date minime e massime purché utilizzi il formato data corretto. Questo è mostrato nell'esempio sopra.

Colore

Il tipo di dati colore viene utilizzato per i campi che accettano il colore. Il tipo di dati colore è una caratteristica secondaria interessante, anche se usata raramente, che consente al visitatore di una pagina Web di selezionare un colore da una tavolozza a discesa simile a una tavolozza. editore grafico:

Scegli il tuo colore preferito

Colore

Diversi attributi di elementi insoliti

Lo standard HTML5 riconosce alcuni attributi in più che vengono utilizzati per controllare il browser durante la compilazione dei moduli. Non tutti questi attributi sono supportati da tutti i browser. Tuttavia, è bene sperimentarli:

attributo di controllo ortografico

Alcuni browser tentano di colmare le lacune nella conoscenza dell'ortografia dell'utente controllando l'ortografia del testo inserito. Problema evidente con questo servizio è che non tutto il testo è composto da parole reali e scrivere sottolineature rosse ondulate può dare sui nervi all'utente molto rapidamente. Per impedire al browser di controllare l'ortografia del testo nel campo, impostare l'attributo di controllo ortografico su false e su true per il controllo.

Per impostazione predefinita, browser diversi si comportano in modo diverso per quanto riguarda il controllo ortografico e l'impostazione dell'attributo controllo ortografico determina un comportamento uniforme.

attributo di completamento automatico

Alcuni browser cercano di far risparmiare tempo all'utente suggerendo, quando si inseriscono informazioni in un campo, i valori che erano stati precedentemente inseriti in questo campo. Questo comportamento non è sempre auspicabile - come affermato nelle specifiche HTML5, alcune informazioni possono essere mantenute private (come i codici per il lancio di missili nucleari;) o rimanere rilevanti solo per un breve periodo (come password monouso ingresso a sistema bancario self service). Per tali campi, impostare il valore dell'attributo di completamento automatico su off in modo che il browser non lo richieda opzioni completamento del testo inserito nel campo. E per completare automaticamente un campo particolare, imposta il suo attributo di completamento automatico su on.

attributi di correzione automatica e capitalizzazione automatica

Questi attributi vengono utilizzati per gestire le capacità correzione automatica e capitalizzazione su alcuni browser mobili, in particolare in versioni di Safari per iPad e iPhone

attributo multiplo

Gli sviluppatori Web hanno utilizzato l'attributo multiple con un elemento per la creazione di liste multiselezione da tempo immemorabile. Ma ora possono usare questo attributo con alcuni tipi elemento , incluso il tipo di file (per il caricamento dei file) e l'e-mail. In un browser che supporta questo attributo, l'utente può selezionare più caricamenti del server contemporaneamente o inserire più indirizzi e-mail in un unico campo.

Un saluto, cari lettori del sito del blog. Oggi voglio parlare di qualcosa del genere Moduli HTML. Qualunque sia il motore del tuo sito (cms), utilizzerà sicuramente i form creati utilizzando i tag Form e Input, oltre agli attributi e parametri Button, Checked, Value, Checkbox, Radio, Checkbox, Invia.

Bene, puoi anche aggiungere elementi a questo per creare elenchi a discesa e campi di testo: Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda.

Perché sono necessari i moduli e come funzionano sui siti moderni

La stessa stringa di ricerca del sito () viene creata utilizzando questi tag e la ricerca di quella sul tuo progetto sarà obbligatoria. Pertanto, capire come sono organizzati e come funzionano non ti danneggerà affatto. lavoro di successo sul design, e autopromozione e la promozione non sarà superflua.

Quindi, con la motivazione della necessità di studiare questi elementi, penso che non dovrebbero esserci più domande, quindi è tempo di procedere direttamente allo studio delle loro possibili opzioni.

Sì, voglio anche ricordarti che siamo già riusciti a prendere in considerazione molti materiali sull'argomento del linguaggio di markup dell'ipertesto, ad esempio tre ) e .

Al centro, i moduli sono costituiti da elementi, per creare i quali vengono inseriti vari tag dai tag Form all'interno del contenitore principale: Checked, Value, Checkbox, Radio, Checkbox, Submit, ecc. Dobbiamo solo posizionare il suo codice in qualsiasi posto conveniente per questo modello di sito, specificando come dovrebbe apparire con l'aiuto dei tag e dei loro attributi.

Potrebbe trattarsi di un campo di testo con un pulsante di invio per la richiesta immessa, opzioni di pulsanti di opzione (in cui è possibile lasciare premuto solo uno dei pulsanti forniti), più campi di testo con un pulsante di invio () e altro ancora.

Ad esempio, nel caso di "cerca", utilizzando l'attributo Valore, è possibile specificare cosa esattamente verrà scritto sul pulsante posto accanto al campo per l'inserimento di una query. I dati inseriti nei moduli devono essere ulteriormente elaborati in qualche modo.

Ad esempio, in caso di feedback, l'utente, dopo aver compilato il campo con il suo nome, aver inserito la sua E-mail e il testo del messaggio, e quindi aver cliccato sul pulsante invia, avrà il diritto di sperare di inviare i dati dal modulo all'e-mail dell'autore del sito. Ma per implementarlo utilizzando un solo linguaggio di markup ipertestuale (), sfortunatamente non è possibile.

Per questi scopi, sarà necessario programma speciale un gestore che, dopo che l'utente ha cliccato sul pulsante di invio, prenderà tutti i dati dai campi di feedback e li invierà all'e-mail del proprietario della risorsa. Quale programma lo farà, devi specificarti usando l'attributo Action.

In genere, il programma di elaborazione è uno script scritto linguaggio PHP. Pertanto, nel Attributo di azione tag Form dovrai registrare il percorso del file di questo script, che si trova sul server del tuo hosting. Darò come esempio un abbonamento a RSS Feed il mio blog via e-mail:

"nome="titolo">

Un po' poco chiaro, probabilmente, all'inizio sembra, ma penso che tutto diventerà più chiaro man mano che la storia va avanti.

Form e tag di input per la creazione di pulsanti, caselle di controllo e pulsanti di opzione

Qualsiasi modulo deve essere racchiuso tra tag di apertura e chiusura Modulo. Questa è una specie di contenitore per la loro creazione. Questo tag ha una serie di attributi obbligatori e facoltativi:

1. Nome - un nome univoco che devi specificare se il file Html in cui stai facendo qualcosa utilizzerà diversi moduli web
2. Azione: un attributo obbligatorio che indica il percorso dello script a cui verranno trasferiti i dati da esso per l'ulteriore elaborazione
3. Metodo: utilizzandolo è possibile modificare il metodo di passaggio dei dati da questo modulo Web allo script del file del gestore. Se non lo specifichi, di default verrà utilizzato il metodo Get, che, infatti, è destinato principalmente a variabili e messaggi brevi, e passa anche i dati in modo aperto attraverso la barra degli indirizzi del browser. Per passare i dati del modulo allo script del gestore, è ancora meglio utilizzare metodo POST, studiato appositamente per il trasferimento di sms in maniera chiusa

Diamo un'occhiata al resto dei tag che ti consentono di creare una varietà di moduli web. Il più versatile è Ingresso. Al suo interno deve essere scritto l'attributo Type, che determina come sarà esattamente il form HTML creato utilizzando questo tag.

Con Input e Type , puoi creare i seguenti elementi:

1. campi di testo a riga singola (Tipo="Testo")
2. campi password (Tipo="Password")
3. caselle di controllo (Tipo="Casella di controllo")
4. pulsanti di opzione (Tipo="Radio")
5. campi nascosti (Tipo="Nascosto")
6. pulsanti normali (Tipo="pulsante")
7. pulsanti per l'invio dei dati al gestore (Type="Submit")
8. pulsanti per riportare il modulo web al suo stato originale (Type="Reset")
9. campi per caricare i file sul server (Type="File)
10. pulsanti immagine (Tipo="Immagine")

L'ingresso non ha un tag di chiusura. Quale sarà esattamente il modulo web creato con esso dipende interamente dal parametro specificato nell'attributo Type. Se Tipo non è specificato, verrà creato un campo di testo per impostazione predefinita.

Esempi di moduli creati su Input con valori diversi per Tipo

Altri attributi del tag Input ed esempi del loro utilizzo

Considera a cosa servono gli altri attributi:

1. Nome: se i dati devono essere inviati allo script del programma del gestore, è necessario specificare un parametro per l'attributo Nome. Sotto questo nome, i dati inviati dal modulo appariranno nel programma di gestione delle informazioni.
2. Dimensioni: con l'aiuto di esso viene impostata la dimensione del campo del modulo Web creato. Il valore è specificato nel numero di caratteri che possono rientrare in questo campo. Se la dimensione non è specificata, la larghezza sarà predefinita a 24 caratteri.
3. Maxlength - per impostazione predefinita, il numero di caratteri che possono essere inseriti nel modulo Html non è limitato, ma utilizzando Maxlength puoi impostare questo limite. Più caratteri di quanti saranno indicati, non potrai inserire nel campo
4. Valore - con esso puoi impostare cosa esattamente verrà scritto per impostazione predefinita nel campo o sul pulsante di invio dati
5. Selezionato è un attributo flag che può essere inserito nell'Ingresso per pulsanti radio (radio) o per checkbox (checkbox). In questo caso, questo pulsante di opzione o checkbox sarà attivo al caricamento della pagina con il modulo web (saranno già contrassegnati da un segno di spunta)

Ora diamo un'occhiata a tutto esempi di moduli con Input. L'aspetto del campo di testo è simile all'aspetto del campo della password, quindi considereremo solo l'opzione di creare il testo, ad esempio per inserire un indirizzo email:

Inserisci la tua email:

(!LANG:Ora diamo un'occhiata alla creazione di un modulo web con pulsanti di opzione (Radio):

Ti piace la risorsa KtoNanNovenkogo.ru?

Sì?
Non?

Tieni presente che questo modulo utilizza il tag Input due volte, una per creare ciascuno dei due pulsanti di opzione. Inoltre, ognuno di essi ha l'attributo Nome con lo stesso valore (risultato) e il valore Valore è diverso (SI e NO).

Ciò significa che durante l'elaborazione, se viene selezionato uno qualsiasi dei pulsanti di opzione, verrà inviata una variabile il cui nome è scritto in Nome, ma il valore di questa variabile dipenderà dal pulsante di opzione selezionato.

Considera l'esempio di creazione di un modulo Web con caselle di controllo (Casella di controllo):

Quale/i motore/i sito/i preferisci?

WordPress
Joomla
SMF

Le caselle di controllo differiscono dai pulsanti di opzione per la possibilità di selezionare più opzioni contemporaneamente. Il nome viene utilizzato per determinare nel file del gestore in quale casella di controllo sono impostate le caselle di controllo e Valore specifica il valore che verrà inviato al gestore (se Valore non è impostato, il testo che si trova accanto a questa casella di controllo verrà inviato al gestore ).

Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda: elenchi a discesa, aree di testo e altri elementi del modulo Web

Per cominciare, voglio ricordarti un po' cosa sono, in effetti, i moduli web e perché sono necessari nelle pagine del sito. Sono progettati principalmente per ripetere gli elementi disponibili in qualsiasi sistema operativo in modo intuitivo: pulsanti, campi di immissione di testo, elenchi a discesa, caselle di controllo, opzioni e simili.

Tutti gli utenti, senza alcuna spiegazione aggiuntiva, comprendono lo scopo di questi elementi e, se vedono un pulsante di un modulo Html, capiscono che devono fare clic su di esso.

Inoltre, tutti i suoi elementi costitutivi (come Select, Option, Textarea, Label, Fieldset, Legend) sono spazi già finiti (contenitori), per l'inserimento dei quali basterà utilizzare il tag desiderato con gli attributi ei parametri necessari.

I browser stessi sanno come visualizzare un particolare elemento del modulo web. È vero, le opzioni di visualizzazione per lo stesso elemento in browser diversi possono differire leggermente l'una dall'altra, ma, di regola, non in modo significativo.

Quella. si scopre che i moduli Web in HTML sono un tentativo di trasferire la chiave elementi utilizzati in qualsiasi sistema operativo, alle pagine del sito web. Ma perché potrebbero essere necessari nelle pagine del sito?

In linea di principio, per lo stesso scopo per cui vengono utilizzati elementi simili nei sistemi operativi: il trasferimento di dati dall'utente. Nel caso dei moduli, i dati dell'utente vengono trasferiti al server, dove vengono elaborati da un apposito programma (il linguaggio di markup ipertestuale, purtroppo, non consente l'elaborazione dei dati).

Tuttavia, i dati possono essere inviati non solo al server, ma anche, ad esempio, tramite e-mail all'indirizzo specificato nell'attributo Action del tag Form. Quando si inviano dati da Html alla posta elettronica, l'utente che compila i campi, dopo aver cliccato sul pulsante invia dati, avvierà il programma di posta utilizzato sul proprio computer per impostazione predefinita.

Il tag di apertura del modulo dovrebbe quindi assomigliare a questo:

Seleziona e Opzione sono tag a discesa

Tutti gli elementi del modulo web che creano campi con elenchi a discesa sono formati allo stesso modo. Innanzitutto, il contenitore della casella combinata viene definito utilizzando i tag Html Select di apertura e chiusura. E quindi, all'interno di questo contenitore, vengono creati contenitori separati con elementi (elementi) di questo elenco. Questo viene fatto con l'apertura e la chiusura dei tag Option.

Si scopre qualcosa del genere:

Ma questo è un design semplificato, perché Seleziona e Opzione hanno un numero di attributi, che definiscono le proprietà e l'aspetto della casella combinata generata.

1. Nome: è necessario fornire un nome univoco per questo elemento del modulo Web creato utilizzando Seleziona. Questo nome verrà passato al server nel programma del gestore dati come nome per la variabile. Il valore dell'attributo Valore (impostato in Opzione per ogni elemento) dell'elemento dell'elenco a discesa selezionato dall'utente verrà passato come valore di questa variabile.
2. Dimensioni: con esso puoi impostare il numero di articoli visualizzati. In altre parole, tramite Dimensione, è possibile impostare l'altezza della lista, misurata nel numero di righe visualizzate. Se non specifichi esplicitamente il valore Dimensione nel tag Seleziona, verrà utilizzata l'altezza predefinita dell'elenco a discesa e sarà diversa se l'attributo Multiplo è assente o presente in Seleziona:
   1. Se Multiplo è presente in Seleziona, l'altezza dell'elenco a discesa nel modulo Web sarà per impostazione predefinita uguale al numero dei suoi elementi. Quelli. verranno visualizzati tutti gli elementi nell'elenco a discesa a selezione multipla. Vedere l'esempio plurale di seguito. Se l'attributo Dimensione in Seleziona è impostato su un numero inferiore al numero di elementi, verrà visualizzata una barra di scorrimento sulla destra.
   2. Se non è presente alcun Multiplo in Seleziona, l'altezza dell'elenco a discesa nel modulo Web sarà predefinita su una riga. Quelli. sarà visibile solo una riga e gli elementi rimanenti saranno disponibili solo premendo il pulsante dell'ascensore (a destra). Vedi esempio sotto
3. Multiplo: l'assegnazione di questo attributo al tag Seleziona ti consentirà di creare un elenco a discesa con la possibilità di selezionare più elementi contemporaneamente. Leggi di più su questo attributo di seguito.

I moduli con elenchi a discesa possono essere suddivisi in due opzioni. Nella prima opzione è possibile selezionare un solo elemento (riga) del campo con un elenco a discesa, nella seconda opzione, tenendo premuto Ctrl o Maiusc, è possibile selezionare più elementi disponibili contemporaneamente.

In questo caso, nella seconda opzione, i dati su tutti i punti selezionati verranno inviati al server. L'elenco a discesa che verrà creato è determinato dalla presenza o dall'assenza dell'attributo Multiplo nel tag Seleziona.

Multiplo è specificato in Seleziona senza un parametro, perché è scritto semplicemente Multiplo e basta. Se è presente, verrà creato un modulo web con elenco a discesa con opzione di selezione multipla (tenendo premuto Ctrl o Maiusc).

Una variante del campo con un elenco a discesa, in cui ci sarà scelta multipla possibile, sarà simile a questo:

Sulla destra c'è un esempio di un modulo web a discesa multi-selezione basato sul codice sopra. Come puoi vedere, tenendo premuto Ctrl o Maiusc puoi selezionare più elementi contemporaneamente.

Se non è presente alcun attributo Multiplo nel tag Seleziona, è possibile selezionare solo un elemento di questo elenco a discesa (riga).

Un esempio in cui è possibile selezionare un solo elemento può essere visto qui:

Etichetta Selezionare Legenda sito web selezionata

Attributi del tag opzione

Nell'elenco a discesa creato (usando Seleziona e Opzione), puoi aggiungere qualcosa come separatori con l'intestazione del gruppo, che differirà dal resto delle voci di menu nello stile del carattere.

Per creare un gruppo di voci di elenco a tendina, è necessario racchiuderle nei tag di apertura e chiusura del modulo Optgroup, e nel tag di apertura Optgroup, specificare l'attributo Label, come parametro di cui sarà necessario inserire il nome del gruppo desiderato.

Ad esempio in questo modo:

Etichetta Seleziona
Legenda del sito Web selezionata

Textarea - creazione di un campo di testo in un modulo

C'è un altro elemento del modulo web che non abbiamo considerato: Textarea (un campo con la possibilità di inserire testo multilinea). Viene creato utilizzando un tag Textarea HTML accoppiato. Inoltre, è possibile trasferire il testo su una nuova riga al suo interno e verrà trasmesso al server, tenendo conto dei trasferimenti effettuati.

Quindi, per creare un campo di testo su più righe, è necessario scrivere un'area di testo di apertura e chiusura, e tra di esse è possibile aggiungere del testo che sarà visibile al caricamento della pagina con il modulo web. L'utente può quindi cancellare questo testo e scrivere il proprio.

Cosa puoi dire di te?

I seguenti attributi possono essere utilizzati con Textarea:

1. Nome: fornisci un nome per questo elemento del modulo web. Verrà passato al server al programma di gestione dei dati
2. Cols: puoi usarlo per impostare la larghezza del campo multilinea generato in caratteri.
3. Righe: imposta l'altezza del campo multilinea creato (in righe). Se le righe di testo immesse dall'utente sono maggiori dell'altezza del campo di testo multiriga, verrà visualizzata una barra di scorrimento a destra del campo nel modulo Web.
4. Sola lettura: impedisce agli utenti di modificare o aggiungere il proprio testo a questo campo (sola lettura).
5. Disabilitato - l'utente, come nel caso dell'attributo Sola lettura, non potrà modificare il contenuto del campo di testo nel modulo web, ma cambierà il suo colore in grigio, indicando la sua inattività.

Etichetta: a cosa serve questo tag HTML nel modulo?

Il tag Html Label consente di implementare una funzionalità molto interessante nei moduli che è disponibile nei sistemi operativi. Lì, se ricordi, per attivare qualsiasi elemento, non è necessario fare clic su di esso, puoi anche fare clic sul nome di questo elemento: sarà comunque attivato.

Ciò non accade nei moduli Web per impostazione predefinita: è necessario fare clic sull'elemento HTML del modulo stesso per attivarlo. Ad esempio, è necessario fare clic su una casella di controllo per inserirvi un segno di spunta. Cliccando sul testo accanto alla casella di controllo non si otterrà alcun risultato. Provate voi stessi:

etichetta
Selezionare
Selezionato

Come puoi vedere, fare clic sul testo per attivare questo elemento è inutile: devi fare clic su di esso tu stesso. Questo è esattamente lo stato delle cose che il tag Label è progettato per correggere. Ti consente di rendere cliccabile il testo accanto all'elemento del modulo web, il che è senza dubbio migliorare l'usabilità.

Ma come collegare l'elemento HTML e il testo del modulo? Per fare ciò, è necessario aggiungere un ID con un parametro univoco all'attributo e il testo deve essere circondato da tag Label di apertura e chiusura. E non è tutto. Nel tag di apertura Label è necessario scrivere l'attributo For, il cui parametro deve essere esattamente lo stesso dell'attributo ID nel tag Html dell'elemento del form. Si scopre qualcosa del genere:

Come puoi vedere, ora, grazie all'utilizzo di Label, gli elementi del modulo web possono essere attivati ​​non solo cliccando su di esso, ma anche cliccando sul testo che si trova accanto ad esso.

Fieldset e Legend: suddivisione del modulo in parti

Probabilmente hai visto spesso che i moduli di grandi dimensioni in Html sono divisi in gruppi (Fieldset), che sono cerchiati in una cornice, e ciascuno di questi gruppi ha la propria intestazione (Legend). Questo viene implementato utilizzando solo due tag: Fieldset e Legend. Sono accoppiati, cioè devono necessariamente avere un'apertura e una chiusura.

Quindi, per creare un gruppo di parti componenti, è necessario racchiudere tutte queste parti nei tag Fieldset di apertura e chiusura. E per impostare un titolo (Legend) per questo gruppo, è necessario scrivere subito dopo l'apertura Fieldset una costruzione dalla Legenda di apertura e chiusura, tra cui è necessario inserire il testo del titolo del gruppo.

Ecco un esempio di creazione di gruppi utilizzando Fieldset e Legend:

Buona fortuna a te! A presto sul sito delle pagine del blog

Puoi guardare altri video andando su

");">

Potresti essere interessato

Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda - Tag HTML del modulo dell'elenco a discesa e del campo di testo
Elenchi in codice HTML - tag UL, OL, LI e DL
MailTo - che cos'è e come creare un collegamento e-mail in Html
Come vengono impostati i colori nel codice Html e CSS, selezione delle sfumature RGB nelle tabelle, risultati Yandex e altri programmi

Articoli correlati in alto

Informazioni sul premio mus-tv Votazioni per i candidati mus tv

Premio "Per il contributo allo sviluppo dell'industria musicale"

Come funziona il virus dell'influenza: perché ci ammaliamo?

Categorie:

• Programmi
• Sicurezza
• Windows 10
• Ferro
• Windows 8
• In contatto con
• Errori

© 2022 bumotors.ru. Come configurare smartphone e PC. Portale informativo.