Un modulo HTML è una parte di un documento che consente all'utente di inserire informazioni di interesse, che possono successivamente essere accettate ed elaborate lato server. In altre parole, i moduli vengono utilizzati per raccogliere le informazioni immesse dagli utenti.

Tag accoppiato sintatticamente

definisce un modulo in un documento HTML. Elemento

nel complesso, è semplicemente un contenitore all'interno del quale è possibile posizionare varie etichette, controlli e tipi di elementi di input, caselle di controllo, pulsanti di opzione, pulsanti di invio e altri elementi HTML.

Il compito principale del modulo è accettare le informazioni in arrivo dall'utente e trasferirle per l'ulteriore elaborazione sul lato server.

L'elemento ha la seguente sintassi:

elementi del modulo Elemento È elemento principale del modulo e definisce un campo personalizzato per l'inserimento delle informazioni. Il campo di input accetta genere diverso

elementi del modulo

, a seconda del valore dell'attributo type applicato a questo elemento.

può contenere uno o più dei seguenti elementi del modulo:

Supporto del browser			Etichetta		Opera	Explorer
	Bordo	Bordo	Bordo	Bordo	Bordo	Bordo

SÌ

Attributi	Attributo	Senso
Descrizione	accettare	tipo_file Non supportato in HTML5.
Specifica un elenco separato da virgole di tipi di file accettati dal server (che può essere rappresentato tramite caricamenti di file).	accettare-charset	set_di_caratteri Specifica la codifica utilizzata nel modulo inviato (il valore predefinito è stringa riservata"sconosciuto" ).
, che indica che la codifica corrisponde alla codifica del documento contenente l'elemento	azione	URL
Definisce l'indirizzo a cui viene inviato il modulo (per impostazione predefinita l'azione è impostata sulla pagina corrente).	completamento automatico SU	spento
Specifica se il browser può compilare automaticamente gli elementi del modulo (abilitato per impostazione predefinita). Questo attributo aiuta a riempire i campi del modulo con il testo precedentemente inserito al loro interno (a meno che non sia disabilitato dalle impostazioni del browser).	entipo application/x-www-form-urlencoded multipart/form-data	testo/semplice Determina la modalità di codifica dei dati del modulo al momento dell'invio. Valore predefinito.
application/x-www-form-urlencoded	metodo Ottenere	inviare L'attributo determina quale metodo HTTP (get o post) viene utilizzato durante l'invio del modulo.
Il metodo get è quello predefinito.	nome	Definisce il nome del modulo, utilizzato per l'identificazione (specifica il nome del modulo).
novalidate	novalidate	Indica che non viene verificata la correttezza dei dati immessi nel modulo dall'utente.
bersaglio	_vuoto _se stesso _genitore _superiore nomeframe	Utilizzando l'attributo, diciamo al browser dove mostrare la risposta ricevuta dopo aver inviato il modulo (scheda, finestra corrente o frame). Il valore predefinito è _self: visualizza la risposta nella finestra corrente.

Esempio di utilizzo

Nome:
Cognome: "Inserisci il cognome">
Uomo Donna
Su di me:
Sotto i 18 anni
Dalle 18 alle 35
Più di 35
Sposato
C'è un gatto

E quindi, in ordine, cosa abbiamo fatto in questo esempio:

• Pubblicato due campi di testo a riga singola ( ) affinché l'utente possa inserire il proprio nome e cognome. Nomi univoci assegnati a questi campi utilizzando l'attributo name ( per la corretta trasmissione ed elaborazione del modulo, assicurarsi di indicare per ciascun elemento questo attributo). Inoltre, l'attributo value è stato impostato su valori predefiniti per questi campi (durante la compilazione dei campi, il valore di questo attributo corrisponderà all'input dell'utente).
• Pubblicato due pulsanti di opzione ( ) per selezionare una delle opzioni disponibili. Si prega di notare che per i pulsanti di opzione è necessario specificare lo stesso nome in modo che tu possa scegliere una sola opzione tra quelle offerte.
Per Primo pulsanti di opzione abbiamo specificato l'attributo

I moduli in HTML sono l'argomento più complesso ma, d'altro canto, forse il più interessante.

I moduli Web consentono ai visitatori del sito di inserire determinate informazioni in campi speciali e lo sviluppatore le riceve in una forma a lui conveniente.

Un esempio di modulo potrebbe essere un libro degli ospiti, un questionario, prova in linea. I moduli vengono compilati al momento della registrazione sul sito Web, quando si effettuano ordini in un negozio online, ecc.

Utilizzando HTML, puoi creare una struttura del modulo: campi di testo, menu, elenchi, pulsanti, caselle di controllo e pulsanti di opzione. Cioè, quegli elementi con l'aiuto dei quali determinate informazioni vengono inserite nel modulo.

Quindi i dati inseriti nel modulo vengono inviati al server per l'elaborazione. Ma qui l'HTML è impotente: un programma o uno script ad esso collegato sta già lavorando sull'elaborazione del modulo. Tali programmi sono solitamente scritti in linguaggio php o Javascript.

Attributi del modulo: tag

Possono essere presenti diversi moduli in una pagina Web ( quanto serve allo sviluppatore). Ognuno di loro inizia con il tag e termina con un tag di chiusura .

L'attributo action è obbligatorio per qualsiasi modulo: specifica l'indirizzo del file che serve il modulo ( tratta i dati in esso inseriti).

L'attributo metodo specifica come verrà inviato il contenuto del modulo. Esistono due metodi: GET e POST. Ora non ha senso approfondire questi parametri, poiché l'argomento dell'invio di informazioni utilizzando i metodi GET e POST riguarda i linguaggi di elaborazione dati ( ad esempio PHP). Basti sapere che è il metodo di trasferimento dati POST quello utilizzato nella maggior parte dei casi nei form.

Attributo del nome del tag

è facoltativo. Ma se nel documento sono presenti più moduli, ognuno di essi deve essere in qualche modo identificato dal gestore. Pertanto, in questo caso è necessaria la presenza dell'attributo name: specifica il nome univoco del modulo.

È inoltre possibile impostare la codifica per i dati di input: l'attributo Accept-charset è responsabile di ciò e, utilizzando l'attributo target, definire la finestra in cui verrà visualizzato il risultato dell'elaborazione del modulo inviato ( in una finestra nuova o corrente).

Ma l'etichetta stessa non ha senso, perché il modulo trasmette dati che prima devono essere inseriti da qualche parte!

Inserimento dati. Campi modulo - tag

Etichetta Questo è il tag più comune trovato nei moduli. È progettato per creare vari elementi che servono per inserire dati in un modulo: campi di testo, pulsanti, caselle di controllo, pulsanti di opzione.

type è l'attributo principale del tag . Imposta il tipo di campo ( elemento) forme:

Tipo valore attributo="..."	Risultato	Descrizione
		Campo di testo a riga singola per l'immissione di testo. L'attributo size specifica la larghezza del campo in caratteri.
		Campo di testo per l'immissione di una password. L'attributo maxlength viene impostato quantità massima caratteri che possono essere immessi
		Interruttore. Puoi selezionare una sola opzione tra quelle offerte. L'attributo controllato specifica un campo preselezionato.
		Casella di controllo. Ci sono diverse opzioni tra cui scegliere. Attributo controllato definisce un campo preselezionato.
		Pulsante. L'attributo value imposta l'etichetta sul pulsante.
		Pulsante di ripristino. Restituisce i campi del modulo al loro formato originale. Reimposta i dati inseriti.
		Pulsante per l'invio dei dati inseriti.
		Campo in cui inserire il nome del file da inviare.
		Immagine del pulsante. Viene utilizzato anche per inviare dati al server. L'attributo src specifica l'indirizzo del file immagine.
		Campo nascosto: invisibile all'utente.

Menu a discesa - Tag E

Etichetta

uguale all'etichetta serve a raccogliere informazioni: crea una lista da cui è possibile selezionare uno o più elementi. Ogni elemento corrisponde a un valore, che viene inviato al server per l'elaborazione.

Il tipo di lista creata dipende dal valore dell'attributo size: with size= "1" ( valore predefinito) l'elenco sarà a discesa.

Un valore diverso per l'attributo size corrisponderà al numero di elementi dell'elenco visualizzati. Ad esempio, con size="3" saranno visibili tre elementi. Per visualizzare altri elementi dell'elenco ( se ce ne sono) dovresti utilizzare la barra di scorrimento verticale, che viene aggiunta automaticamente.

Per impostazione predefinita, è possibile selezionare solo una voce dell'elenco. Aggiunta dell'attributo multiplo a un tag ti consente di selezionare più elementi dell'elenco utilizzando il mouse e i tasti Ctrl e Maiusc.

Se è presente l'attributo multiple verranno visualizzate tutte o parte delle voci dell'elenco ( a seconda del browser), a meno che l'attributo size non sia impostato su un certo numero di elementi visibili.

L'elemento richiesto dell'elenco a discesa è il tag

. Si trova all'interno dell'etichetta e crea ogni elemento dell'elenco.

Utilizzando l'attributo name del tag all'elenco viene assegnato un nome e viene utilizzato l'attributo value del tag all'elemento della lista viene assegnato un valore. Pertanto, al server viene inviata una coppia "nome=valore": il nome della lista e il valore dell'elemento/i selezionato/i.

Attributo selezionato di un tag

definisce un elemento dell'elenco selezionato in precedenza e l'attributo disabilitato blocca l'elemento dell'elenco: non può essere selezionato.

La direzione cardinale è una delle quattro direzioni principali:

Nord
Sud
Ovest
Est

7 meraviglie del mondo!

Piramide di Cheope
Giardini pensili di Babilonia
Statua di Zeus ad Olimpia
Tempio di Artemide a Efeso
Mausoleo di Alicarnasso
Colosso di Rodi
Faro di Alessandria

Campo di testo multilinea - tag </h3> <p>Etichetta <textarea>crea un campo di testo multilinea. È consentito inserire interruzioni di riga che vengono conservate durante la trasmissione dei dati al gestore.</p> <p>Attributo del nome del tag <textarea>è obbligatorio: utilizzandolo si assegna un nome al campo di testo.</p> <p>L'attributo disabilitato disabilita il campo: il contenuto del campo non può essere modificato e non è accessibile. L'attributo readonly indica che il campo è di sola lettura - l'utente non ha la possibilità di modificare il contenuto, ma è disponibile - può essere selezionato e, ad esempio, copiato.</p> <p>Puoi impostare la larghezza del campo di testo in caratteri e l'altezza del campo in righe utilizzando rispettivamente gli attributi cols e rows.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Se il contenuto del campo supera le sue dimensioni, verrà visualizzato un dispositivo di scorrimento.</span>

Se il contenuto del campo supera le sue dimensioni, verrà visualizzato un dispositivo di scorrimento.

Esempio di utilizzo di un modulo

Ora vediamo come funziona il modulo.

Modulo d'ordine video didattico:

Il tuo nome: *

Il tuo ordine:

Video tutorial sull'HTML
Video tutorial sui CSS
Videotutorial su PHP

Seleziona supporto:

CD

DVD

Flash USB

La tua email: *

Il tuo indirizzo: *

Descrizione

Etichetta

installa un modulo su una pagina web.

Il modulo è destinato allo scambio di dati tra l'utente e il server. L'ambito di applicazione dei moduli non si limita all'invio di dati al server; utilizzando gli script client, puoi accedere a qualsiasi elemento del modulo, modificarlo e applicarlo a tua discrezione.

Un documento può contenere un numero qualsiasi di moduli, ma è possibile inviare al server un solo modulo alla volta. Per questo motivo i dati del modulo devono essere indipendenti l'uno dall'altro.

Per inviare il modulo al server, utilizzare il pulsante Invia, lo stesso può essere ottenuto premendo il tasto Invio all'interno del modulo. Se nel modulo non è presente il pulsante Invia, il tasto Invio ne simula l'utilizzo. Quando il modulo viene inviato al server, il controllo dei dati viene trasferito al programma specificato dall'attributo action del tag .

Il browser prepara innanzitutto le informazioni sotto forma di una coppia “nome=valore”, dove il nome è determinato dall'attributo name del tag

e il valore viene immesso dall'utente o impostato sul campo modulo predefinito.

Se per inviare dati viene utilizzato il metodo GET, la barra degli indirizzi può assumere la forma seguente. http://www..cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

I parametri sono elencati dopo il punto interrogativo specificato dopo l'indirizzo del programma CGI e sono separati da un carattere e commerciale (&). I caratteri non latini vengono convertiti in rappresentazione esadecimale (nella forma %HH, dove HH è il codice esadecimale per il valore del carattere ASCII) e lo spazio viene sostituito da un segno più (+).

...

SÌ

Ammesso all'interno del contenitore

posizionare altri tag, mentre il modulo stesso non viene visualizzato in alcun modo sulla pagina web, sono visibili solo i suoi elementi e i risultati dei tag nidificati.

Sintassi

Imposta la codifica in cui il server può ricevere ed elaborare i dati.

Abilita la compilazione automatica dei campi del modulo.

Metodo del protocollo HTTP.
Sostituisce il controllo integrato dei dati del modulo per la correttezza dell'input.
Etichetta di chiusura

Necessario.

HTML5 IE Cr Op Sa Fx

Buona giornata, appassionati di sviluppo web e coloro che vogliono creare il proprio sito web. Prima di allora, tutte le mie pubblicazioni erano dedicate agli elementi di base del linguaggio, ai modi per creare vari oggetti di contenuto, alla loro formattazione, strutturazione, ecc. Avendo padroneggiato gli argomenti precedenti, puoi già creare un sito web abbastanza buono. Tuttavia, sarebbe incompleto senza l’argomento di oggi: “Creazione di moduli in html”.

Questa sezione della lingua è molto importante. Pertanto, presta particolare attenzione al suo studio, altrimenti la risorsa web che hai creato non verrà rilasciata in produzione. Pertanto, dopo aver letto l'articolo, imparerai perché è necessario utilizzare i moduli, quali tag vengono utilizzati per creare e potrai anche provare esempi specifici nella pratica. Iniziamo!

Cos'è un modulo e come funziona?

Modulo– questo è uno degli oggetti più importanti, destinato allo scambio di dati informativi tra il server e l'utente.

In poche parole, se desideri creare un negozio online con la possibilità di ordinare prodotti sul sito Web, richiedere la registrazione su una risorsa Web e lavorare con gli account o fornire ai clienti feedback dai responsabili dell'azienda, non puoi fare a meno dei moduli.

Il modulo viene specificato utilizzando un elemento speciale del linguaggio html

.

Tieni presente che il documento di codice può contenere diverse dichiarazioni di tag , tuttavia, è possibile inviare una sola richiesta al server per elaborare i dati. Questo è il motivo per cui le informazioni che vengono inserite dall'utente nei campi previsti e si riferiscono a moduli diversi non dovrebbero essere dipendenti. Inoltre, non è consentito annidare i moduli uno dentro l'altro.

Per chi è impaziente e desideroso di dare una rapida occhiata alla rappresentazione del codice, ho allegato un semplice esempio di utilizzo di un pannello con campo testo per password con pulsante:

1 2 3 4 5 6 7 8 9 10 11 12

Potrebbe non essere molto chiaro adesso cosa e come interagisce in questo piccolo programma, ma ti garantisco che dopo aver letto l'intero articolo sarai in grado di creare applicazioni molto più complesse.

Invio dei dati al lato server

Per inviare le informazioni digitate (o selezionate) in una finestra di dialogo, è necessario utilizzare il meccanismo standard: Pulsante Invia.

Il codice per tale metodo è simile al seguente:

Quando esegui la riga presentata, verrà visualizzato un pulsante con la scritta: "Invia".

Un altro modo per inviare dati al lato server è premere il tasto Invio nella finestra di dialogo.

Dopo aver confermato l'invio delle informazioni specificate, queste non arrivano immediatamente al server. Innanzitutto viene elaborato dal browser e risulta nella forma “nome=valore”.

Il parametro dell'attributo è responsabile del nome tipo etichetta e per il valore: i dati immessi dall'utente. Successivamente, la stringa convertita viene passata al gestore, che molto spesso è specificato nell'attributo , che indica che la codifica corrisponde alla codifica del documento contenente l'elemento elemento

.

Il parametro dell'azione in sé non è richiesto e in alcuni casi non lo è affatto. Ad esempio, se la pagina del sito viene scritta utilizzando php o js, ​​l'elaborazione avviene sulla pagina corrente e i collegamenti non sono necessari.

Per una migliore comprensione del quadro complessivo del funzionamento del sito, vorrei aggiungere che sul server i dati vengono elaborati utilizzando altri linguaggi. Pertanto, i linguaggi lato server sono considerati: Python, php, linguaggi simili a C (C#, C, ecc.), Java e altri.

Ora vorrei fermarmi e parlare più approfonditamente dell'elemento . Per spiegarlo in termini semplici, quindi necessario per creare campi di testo, pulsanti di opzione, vari pulsanti, campi nascosti, caselle di controllo e altri oggetti.

Non è necessario associare il tag , tuttavia, se è necessario elaborare i record degli utenti o inserirli, ad esempio, in un database, non è possibile fare a meno di un contenitore.

Gli attributi principali di questo elemento del linguaggio di markup ipertestuale sono:

• Testo– crea un campo di testo;
• Invia– crea un pulsante per l'invio dei dati al server;
• Immagine– è responsabile del pulsante con l'immagine;
• Reset– imposta un pulsante per cancellare il modulo;
• Password– imposta un campo di testo specifico per le password;
• Casella di controllo– responsabile dei campi con caselle di controllo;
• Radio– responsabile dei campi con la selezione di un elemento;
• Pulsante– crea un pulsante;
• Nascosto– utilizzato per i campi nascosti;
• File– imposta il campo responsabile dell'invio dei file.

Metodi di trasmissione delle informazioni

Esistono 2 modi per trasferire i dati dell'utente sul lato server: Ottenere E Inviare. Questi metodi eseguono la stessa azione, ma differiscono significativamente l'uno dall'altro. Pertanto, prima di menzionarli, conosciamo le loro caratteristiche.

	Inviare	Ottenere
Dimensioni dei documenti trasmessi	Limitato al lato server.	Massimo – 4KB.
Come vengono visualizzate le informazioni inviate	Disponibile solo se visualizzato tramite estensioni del browser o altri prodotti software speciali.	Immediatamente disponibile per tutti.
Utilizzo dei segnalibri	Non è possibile aggiungere ai segnalibri, poiché le richieste non vengono ripetute (tutte le pagine si collegano a un indirizzo).	Qualsiasi pagina con una richiesta può essere salvata come segnalibro e ripristinata in seguito.
Memorizzazione nella cache	In base al paragrafo precedente, tutte le richieste si trovano su un'unica pagina.	Ogni pagina può essere memorizzata nella cache separatamente.
Scopo	Utilizzato per inviare file di grandi dimensioni (libri, immagini, video, ecc.), messaggi, commenti.	Ottimo per cercare i valori richiesti su una risorsa web o per inviare brevi messaggi di testo.

Al fine di indicare quale delle due modalità di trasferimento dei dati deve utilizzare il browser, nell'elemento utilizzare il parametro fornito application/x-www-form-urlencoded(Per esempio, metodo="pubblica").

Diamo un'occhiata al secondo esempio. Creiamo un modulo in cui dovrai inserire i tuoi dati personali (nome e cognome, data di nascita) e creare una password. Successivamente inviamo tutto questo al server utilizzando il metodo Inviare.

Inserisci i tuoi dati personali!

Ad esempio, per inserire una data, sono presenti interruttori per il numero di ciascun parametro (giorno, mese e anno), nonché un pannello a discesa con il calendario stesso per comodità.

Creazione di un pannello di registrazione

Sono stati trattati i tag e gli attributi di base. Ecco perché è il momento di creare un modulo di registrazione completo utilizzando il markup in stile CSS e convalidando i dati inseriti. Naturalmente non potremo vedere il server funzionare con loro, ma forniremo il design e i dettagli importanti.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Registrazione sul sito Nome: Cognome: E-mail: Password: Ripeti la password:

Registrazione sul sito

Per un successivo corretto lavoro nel nostro servizio, inserisci i dati corretti!

Nome:

Cognome:

E-mail:

Password:

Ripeti la password:

Ti consiglio di salvare il codice di questo programma in un documento con estensione .html e codifica utf-8, e di aprire quest'ultimo in una finestra del browser. Vedrai un pannello di registrazione in tutto il suo splendore con campi per inserire il tuo nome, cognome, e-mail e password ripetuta. Nota che quando avvii la pagina, il cursore si posiziona immediatamente nel primo campo di testo. Questa tecnica si ottiene attraverso l'attributo messa a fuoco automatica.

Moduli HTML sono controlli utilizzati per raccogliere informazioni dai visitatori del sito web.

I moduli Web sono costituiti da una raccolta di campi di testo, pulsanti, elenchi e altri controlli che vengono attivati ​​con un clic del mouse. Tecnicamente, i moduli trasmettono i dati dall'utente a un server remoto.

Per ricevere ed elaborare dati di moduli, linguaggi di programmazione web come PHP, Perl.

Prima dell'avvento di HTML5, i moduli web erano una raccolta di diversi elementi , terminando con un pulsante . Ci è voluto molto impegno per definire lo stile dei moduli su diversi browser. Inoltre, i moduli richiedevano JavaScript per convalidare l'input e mancavano di tipi di campi di input specifici per specificare informazioni quotidiane come date, indirizzi e-mail e URL.

Moduli HTML5 risolto la maggior parte di questi problemi comuni con la presenza di nuovi attributi, fornendo la possibilità di modificare l'aspetto degli elementi del modulo CSS3.

Riso. 1. Moduli Web migliorati con HTML5

Creazione di un modulo HTML5

1. Elemento

La base di ogni forma è l'elemento .... Non richiede alcun input poiché è un contenitore che tiene insieme tutti i controlli del modulo - campi. Gli attributi di questo elemento contengono informazioni comuni a tutti i campi del modulo, pertanto i campi logicamente combinati devono essere inclusi in un unico modulo.

Tabella 1. Attributi dei tag

Attributi	Significato/Descrizione
accettare-charset	Il valore dell'attributo è separato da uno spazio elenco delle codifiche dei caratteri, che verrà utilizzato per inviare il modulo, ad esempio, .
azione	Attributo obbligatorio, che specifica l'URL del gestore del modulo sul server a cui vengono inviati i dati. È un file (ad esempio action.php) che descrive cosa deve essere fatto con i dati del modulo. Se il valore dell'attributo non è specificato, dopo che la pagina viene ricaricata, gli elementi del modulo assumeranno i loro valori predefiniti. Se tutto il lavoro verrà svolto lato client da script JavaScript, puoi specificare il valore # per l'attributo action. Puoi anche fare in modo che il modulo compilato dal visitatore ti venga inviato via email. Per fare ciò è necessario effettuare la seguente voce:
completamento automatico
entipo	Utilizzato per indicare MIMO-tipo di dati inviati insieme al modulo, ad esempio enctype="multipart/form-data" . Specificato solo nel caso di metodo="post" . application/x-www-form-urlencoded è il tipo di contenuto predefinito, indicando che i dati passati rappresentano un elenco di variabili del modulo con codifica URL. I caratteri spazio (ASCII 32) verranno codificati come + e un carattere speciale come ! sarà codificato in esadecimale come %21 . multipart/form-data - utilizzato per inviare moduli contenenti file, dati non ASCII e dati binari, è costituito da più parti, ciascuna delle quali rappresenta il contenuto di un elemento del modulo separato. text/plain - indica che viene trasmesso testo semplice (non html).
metodo	Specifica come vengono inviati i dati del modulo. Il metodo get passa i dati al server tramite la barra degli indirizzi del browser. Quando si genera una richiesta al server, tutte le variabili e i loro valori formano una sequenza come www.anysite.ru/form.php?var1=1&var2=2 . I nomi e i valori delle variabili vengono aggiunti all'indirizzo del server dopo il segno? e sono separati da &. Tutti i caratteri speciali e le lettere non latine sono codificati nel formato %nn, lo spazio è sostituito da +. Questo metodo dovrebbe essere utilizzato se non si trasferiscono grandi quantità di informazioni. Se devi inviare un file insieme al modulo, questo metodo non funzionerà. Il metodo post viene utilizzato per inviare grandi quantità di dati, nonché informazioni riservate e password. I dati inviati utilizzando questo metodo non sono visibili nell'intestazione dell'URL perché sono contenuti nel corpo del messaggio.
nome	Imposta nome del modulo, che verrà utilizzato per accedere agli elementi del modulo tramite script, come name="opros" .
novalidate	Disabilita la convalida nel pulsante di invio del modulo. L'attributo viene utilizzato senza specificare un valore
bersaglio	Specifica la finestra a cui verranno inviate le informazioni: _blank: nuova finestra _self: lo stesso fotogramma _parent — frame principale (se esiste, in caso contrario, a quello corrente) _top è la finestra di primo livello relativa a questo frame. Se la chiamata non proviene da un frame figlio, allo stesso frame.

2. Raggruppamento degli elementi del modulo

elementi del modulo

...

pensato per raggruppare elementi legati tra loro, dividendo così la forma in frammenti logici.

Ogni gruppo di elementi può essere nominato utilizzando l'elemento

, che viene immediatamente dopo il tag

. Il nome del gruppo appare nel bordo superiore sinistro

. Ad esempio, se in un elemento

Le informazioni di contatto vengono archiviate:

Informazioni sui contatti

Nome *

E-mail

Riso. 2. Raggruppare gli elementi del modulo utilizzando

Tabella 2. Attributi dei tag

Attributi	Significato/Descrizione
disabilitato	Se l'attributo è presente, allora un gruppo di elementi del modulo correlati situati all'interno del contenitore , disabilitato per il riempimento e la modifica. Utilizzato per limitare l'accesso a determinati campi del modulo contenenti dati precedentemente immessi. L'attributo viene utilizzato senza specificare un valore - .
modulo	nello stesso documento. Indica una o più forme a cui appartiene questo gruppo di elementi. L'attributo non è attualmente supportato da nessun browser.
nome	Definisce Nome, che verrà utilizzato per fare riferimento a elementi in JavaScript o per fare riferimento ai dati del modulo dopo che il modulo è stato compilato e inviato. È analogo all'attributo id.

3. Creare campi modulo

elementi del modulo crea la maggior parte dei campi modulo. Gli attributi di un elemento differiscono a seconda del tipo di campo utilizzato per creare l'elemento.

Utilizzando 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 è specificata dalla proprietà width.

Tabella 3. Attributi dei tag

Attributi	Significato/Descrizione
accettare	Determina il tipo di file che può essere inviato al server. Indicato solo per . Valori possibili: file_extension: consente di scaricare file con l'estensione specificata, ad esempio accetta=".gif" , accetta=".pdf" , accetta=".doc" audio/* - consente di scaricare file audio video/* - consente di scaricare file video image/* - consente di caricare le immagini media_type: indica il tipo di supporto dei file scaricati.
alt	Definisce testo alternativo per le immagini, indicato solo per .
completamento automatico	Responsabile di ricordare i valori immessi nel campo di testo e di sostituirli automaticamente la prossima volta che si inserisce: on - significa che il campo non è protetto e il suo valore può essere memorizzato e recuperato, off: disabilita la compilazione automatica per i campi del modulo.
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 nello stesso documento. Identifica uno o più moduli a cui appartiene questo campo modulo.
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.
formanctype	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: application/-x-www-form-urlencoded è il valore predefinito. Tutti i caratteri vengono codificati prima dell'invio (gli spazi vengono sostituiti con il carattere +, i caratteri speciali vengono convertiti in valori ASCII HEX) multipart/form-data: i caratteri non sono codificati testo/semplice: gli spazi vengono sostituiti con il simbolo + e i caratteri speciali non vengono codificati.
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: get è il valore predefinito. I dati del modulo (coppia nome/valore) vengono aggiunti all'URL e inviati al server: URL?nome=valore&nome=valore i dati del modulo post vengono inviati come richiesta http.
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 dell'attributo target del modulo. _parent – ​​carica la risposta nel frame genitore _top: carica la risposta a schermo intero framename – carica la risposta in un frame con il nome specificato.
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, . Si consiglia di impostare contemporaneamente sia l'altezza che la larghezza del campo.
lista	È un riferimento a un elemento
massimo	Consente di limitare l'immissione consentita di dati numerici a un valore massimo; il valore dell'attributo può contenere un numero intero o 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 , ad esempio, nei fogli di stile CSS. È analogo all'attributo id.
modello	Consente di determinare l'utilizzo espressione regolare la sintassi dei dati che devono poter essere inseriti in un particolare campo. Ad esempio, pattern="(3)-(3)" - parentesi quadre imposta l'intervallo di caratteri consentiti, in questo caso - qualsiasi lettera minuscola, il numero tra parentesi graffe indica che sono necessarie tre lettere minuscole, seguite da un trattino, quindi tre cifre comprese 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. Ho una macchina
	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. Compleanno:
	datetime-local: consente di inserire una data e un'ora separate da una lettera inglese maiuscola T utilizzando il modello gg.mm.aaaa hh:mm. Compleanno - giorno e ora:
	email: i browser che supportano questo attributo si aspettano che l'utente inserisca dati che corrispondono alla sintassi degli indirizzi email. E-mail:
	file: consente di scaricare file dal computer dell'utente. Seleziona file:
	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. I suoi attributi min , 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. Indicare la quantità (da 1 a 5):
	password: crea campi di testo nel modulo, mentre i caratteri immessi dall'utente vengono sostituiti con asterischi, punti elenco o altre icone installate dal browser. Inserisci la password:
	radio - crea un interruttore - un controllo a forma di piccolo cerchio che può essere acceso o spento. Vegetariano:
	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. Ricerca:
	invia: crea un pulsante standard che viene 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 campo di input numerico con un valore modificabile con il mouse e consente solo di inserire valori temporali. Specificare l'orario:
	url: il campo è destinato a specificare gli URL. Pagina iniziale:
	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. Specificare la settimana:
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.

4. Campi di immissione testo

elementi del modulo ... usato al posto dell'elemento quando è necessario creare campi di testo di grandi dimensioni. Il testo visualizzato come valore originale viene inserito all'interno del tag. Le dimensioni del campo vengono impostate utilizzando gli attributi cols - dimensioni orizzontali, righe - dimensioni verticali. L'altezza del campo può essere impostata utilizzando la proprietà altezza. Tutte le dimensioni vengono calcolate in base alla dimensione di un carattere in un font a spaziatura fissa.

Tabella 4. Attributi dei tag <tr><th>Attributi</th> <th>Significato/Descrizione</th> </tr><tr><td>messa a fuoco automatica</td> <td>Imposta automaticamente lo stato attivo sul campo di testo iniziale desiderato.</td> </tr><tr><td>col</td> <td>Imposta la larghezza in termini di numero di caratteri. Se l'utente inserisce più testo, viene visualizzata una barra di scorrimento.</td> </tr><tr><td>disabilitato</td> <td>Disabilita la possibilità di modificare e copiare il contenuto del campo.</td> </tr><tr><td>modulo</td> <td>Il valore dell'attributo deve essere uguale al valore dell'attributo id dell'elemento <form>nello stesso documento. Identifica uno o più moduli a cui appartiene questo campo di testo.</td> </tr><tr><td>lunghezza massima</td> <td>Il valore dell'attributo specifica il numero massimo di caratteri da inserire nel campo.</td> </tr><tr><td>nome</td> <td>Specifica il nome del campo di testo.</td> </tr><tr><td>segnaposto</td> <td>Definisce un breve messaggio di testo che descrive il valore di input previsto.</td> </tr><tr><td>sola lettura</td> <td>Disabilita la possibilità di modificare il contenuto del campo.</td> </tr><tr><td>necessario</td> <td>Visualizza un messaggio che indica che questo campo è obbligatorio.</td> </tr><tr><td>righe</td> <td>Specifica un numero che indica quante righe devono essere visualizzate nell'area di testo.</td> </tr><tr><td>avvolgere</td> <td>Determina se il testo deve mantenere le interruzioni di riga quando il modulo viene inviato. Il valore hard preserva il carry, ma il valore soft no. Se viene utilizzato hard, è necessario specificare il valore dell'attributo cols.</td> </tr></table><h3>5. Elenco a discesa</h3> <p>Gli elenchi consentono di organizzare un gran numero di elementi in modo compatto. Gli elenchi a discesa vengono creati utilizzando l'elemento <select>...</select>. Permettono di selezionare uno o più valori dall'insieme proposto. Per impostazione predefinita, una casella di riepilogo visualizza il suo primo elemento.</p> <p>Gli elementi vengono utilizzati per aggiungere elementi all'elenco <option>...</option>, che si trovano all'interno <select> .</p> <p>Per sistematizzare gli elenchi, utilizzare l'elemento <optgroup>...</optgroup>, che crea intestazioni negli elenchi.</p> <p>Per gli elenchi, 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.</p> <table class="t3">Tabella 5. Attributi dei tag <select> <tr><th>Attributi</th> <th>Significato/Descrizione</th> </tr><tr><td>messa a fuoco automatica</td> <td>Imposta il focus automatico su un elemento al caricamento della pagina.</td> </tr><tr><td>disabilitato</td> <td>Disabilita l'elenco a discesa.</td> </tr><tr><td>modulo</td> <td>Determina il modulo a cui appartiene questo elenco. Il valore dell'attributo è l'identificatore del modulo.</td> </tr><tr><td>multiplo</td> <td>Permette di selezionare uno o più elementi; per fare ciò, durante la selezione, è necessario tenere premuto il tasto Ctrl.</td> </tr><tr><td>nome</td> <td>Definisce un nome per l'elenco a discesa. Il valore dell'attributo contiene un nome che riflette l'oggetto dell'elenco.</td> </tr><tr><td>necessario</td> <td>Visualizza un messaggio che indica che l'utente deve selezionare un valore dall'elenco a discesa prima di inviare il modulo.</td> </tr><tr><td>misurare</td> <td>Imposta il numero di elementi dell'elenco visibili contemporaneamente sullo schermo. Se il numero di voci dell'elenco supera il numero specificato, viene visualizzata una barra di scorrimento. Il valore dell'attributo è specificato come numero intero positivo.</td> </tr></table><h3>6. Etichette per i campi del modulo</h3> <p>Le etichette per gli elementi del modulo vengono create utilizzando l'elemento <label>...</label>. Esistono due modi per raggruppare etichette e campi. Se il campo è all'interno di un elemento <label>, non è necessario specificare l'attributo for.</p><p> <!-- с указанием атрибута for --> <label for="comments">Quando è stata l'ultima volta che hai volato su un aereo?</label> <textarea id="comments">

Gatto

7. Pulsanti

elementi del modulo ... crea pulsanti cliccabili. A differenza dei pulsanti creati ( , , , ), all'interno dell'elemento puoi inserire contenuto: testo o immagine.

Per visualizzare correttamente l'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

Attributi	Significato/Descrizione
messa a fuoco automatica	Imposta lo stato attivo sul pulsante quando viene caricata la pagina.
disabilitato	Disabilita il pulsante, rendendolo non selezionabile.
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 .
formanctype	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 . Valori possibili: application/x-www-form-urlencoded è il valore predefinito. Tutti i caratteri verranno codificati prima dell'invio. multipart/form-data: i caratteri non sono codificati. Utilizzato quando i file vengono caricati utilizzando un modulo. testo/semplice: i caratteri non sono codificati e gli spazi vengono sostituiti con il simbolo +.
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 . Specificato solo per i pulsanti di tipo type="submit". Valori possibili: get: i dati dal modulo (coppia nome/valore) vengono aggiunti all'URL e inviati al server. Questo metodo presenta restrizioni sulla dimensione dei dati inviati e non è adatto all'invio di password e informazioni riservate. post: i dati del modulo vengono aggiunti come richiesta http. Il metodo è più affidabile e sicuro di get e non ha limiti di dimensione.
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 visualizzare il risultato dopo aver inviato il modulo. Specificato solo per i pulsanti di tipo type="submit". Sostituisce il valore dell'attributo di destinazione specificato per l'elemento . _blank: carica la risposta in una nuova finestra/scheda _self: carica la risposta nella stessa finestra (impostazione predefinita) _parent: carica la risposta nel frame principale _top: carica la risposta a schermo intero framename: carica la risposta in un frame con il nome specificato.
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: pulsante: pulsante cliccabile reset: pulsante di reset, restituisce il valore originale invia - pulsante per inviare i dati del modulo.
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 e l'interruttore - utilizzando .

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.

elementi del modulo utilizzato quando si implementa la selezione utilizzando pulsanti di opzione e caselle di controllo. Puoi selezionare l'articolo che desideri semplicemente cliccando sul testo ad esso associato. Per fare questo è necessario posizionare all'interno dell'elemento .