Considerando il principale Tag HTML non possiamo non toccarli elemento importante come forme. Spesso le pagine web richiedono feedback. Ad esempio, compilazione di un questionario sul sito, registrazione, autorizzazione, commenti, ecc. In tutti questi casi, l'utente compila apposite aree (campi modulo) della pagina, dopodiché i dati vengono inviati al server. Per creare reazione si usano i moduli. La forma è un frammento documento HTML per l'input dell'utente.
La figura mostra il modulo di registrazione dello studente sul sito web dell'istituto di istruzione.
Il contenitore viene utilizzato per creare il modulo
con l'attributo action, che specifica la pagina del server che tratterà i dati inviati dal form.La struttura della forma più semplice:
elementi del modulo...
Ogni modulo deve inoltre avere un pulsante di invio per inviare i dati dopo che il modulo è stato compilato.
Struttura del pulsante:
Quindi, per registrare quasi tutti gli elementi del modulo, viene utilizzato il tag con l'attributo type. Per creare un pulsante che reimposta tutti i dati dai moduli, viene utilizzata la struttura seguente:
Per creare campo di testo(campo di testo) esiste parametro di testo. A tale scopo vengono utilizzati i seguenti parametri: nome – nome del campo; dimensione - per il campo in simboli; maxlength - il numero massimo possibile di caratteri nel campo; valore - informazioni visualizzate nel modulo per impostazione predefinita
Un esempio di inserimento di un modulo con due campi di testo:
Il risultato del modulo è mostrato in figura.
Se è necessario inserire nel campo di testo un gran numero di informazioni, ad esempio un commento viene utilizzato sotto forma di un'area di testo (textarea), che viene creata utilizzando il tag
Il risultato del codice con l'area di testo è mostrato in figura.
elemento successivo i moduli sono elenchi che consentono di effettuare una scelta dall'insieme di valori presentato. I tag consentono di creare un modulo elenco
Struttura della voce dell'elenco:
Affinché l'elemento venga evidenziato al caricamento della pagina, è necessario nel tag
Un metodo di selezione simile è la casella di controllo e gli elementi del modulo del pulsante di opzione. La differenza tra questi elementi è che la casella di controllo consente di effettuare selezioni multiple e il pulsante di opzione solo singolo.
La struttura della casella di controllo e della voce del pulsante di opzione:
testo
Pulsante di opzione:
testo
Negli elementi specificati nella struttura, l'attributo selezionato viene utilizzato di default per evidenziare la casella di spunta e il pulsante di opzione. Nella figura è mostrato un esempio di utilizzo di una casella di controllo, di un pulsante di opzione e del codice HTML.
Un altro elemento del modulo è un pulsante, che viene specificato utilizzando l'attributo type del tag. con valore pulsante:
Nel codice specificato per la creazione di un pulsante è presente un parametro onclick che, di norma, specifica un codice in un linguaggio di programmazione per eseguire un'azione quando si fa clic su questo pulsante:
Per visualizzare un messaggio in una finestra speciale, viene utilizzato un comando javascript, aler. Il risultato dell'esempio è mostrato nella figura.
Per inserire un'immagine in un pulsante, utilizzare il codice mostrato nell'esempio seguente:
Durante la registrazione e l'accesso ai siti, viene utilizzato un campo con un test nascosto, visualizzato come asterischi. Questo è l'elemento del modulo password:
Spesso la registrazione al sito è suddivisa in più pagine, e ciascuna successiva deve contenere informazioni della precedente. L'elemento modulo nascosto viene utilizzato per nascondere le informazioni inviate:
L'elemento del modulo nascosto sarà invisibile nella finestra del browser.
Per caricare i file sul server, i moduli hanno un elemento file. Di seguito è riportato un codice di esempio per caricare i file sul server:
Quindi, in questo argomento, sono stati presi in considerazione gli elementi del modulo per la creazione di varie pagine HTML che, insieme ai processori di script su un computer o server, consentono di sviluppare applicazioni Web a tutti gli effetti.
Spesso sui siti Web è possibile trovare pagine con moduli HTML inseriti su di esse. I moduli web sono un modo conveniente per ottenere informazioni dai visitatori del tuo sito web. Un esempio di questo è -, - che fornisce feedback ai visitatori e agli sviluppatori del sito. I moduli sono utili anche per gli sviluppatori di siti durante lo sviluppo di un CMS, che consente di mantenere la proprietà principale del sito: la pertinenza. Questo articolo copre le basi creazione di HTML-moduli, la loro elaborazione e come passare i dati dai moduli schermo agli script PHP.
1) Creazione di un modulo semplice
tag e impostare l'inizio e la fine del modulo. Tag di inizio modulo contiene due attributi: azione e metodo. L'attributo action contiene l'URL dello script che deve essere chiamato per elaborare lo script. Attributo metodo indica al browser che tipo di richiesta HTTP utilizzare per inviare il modulo; valori possibili INVIARE e OTTENERE.
Commento
La principale differenza tra i metodi POST e GET è il modo in cui le informazioni vengono trasferite. Nel metodo GET, i parametri vengono passati attraverso la barra degli indirizzi, ad es. infatti, nell'intestazione HTTP della richiesta, mentre nel metodo POST, i parametri vengono passati attraverso il corpo della richiesta HTTP e non si riflettono in alcun modo nella forma della barra degli indirizzi.
Questo modulo html ha un elemento navigare, che apre una finestra di dialogo per la selezione di un file da caricare sul server. Premendo il pulsante "Trasferisci file", il file viene passato allo script del gestore.
Quindi è necessario scrivere un gestore di script azione.php. Prima di scrivere il gestore, devi decidere in quale directory copieremo il file:
if(isset($_FILES [ "myfile" ])) // Se il file esiste
{
$catalogo = "../immagine/" ; // La nostra directory
if (is_dir ($catalog )) // Se esiste una tale directory
{
$miofile = $_FILES [ "miofile" ][ "tmp_name"]; // File temporaneo
$mio_nome_file = $_FILES [ "miofile" ][ "nome"]; // Nome del file
if(! copy ($myfile , $catalog )) echo "Errore durante la copia del file". $mio_nome_file // Se la copia del file non è riuscita
}
else mkdir(../image/"); // Se non esiste una tale directory, la creeremo
}
?>
Commento
Se ti fidi degli utenti per caricare qualsiasi file sul tuo server, devi essere estremamente attento. Gli aggressori possono iniettare codice "cattivo" in un'immagine o in un file e inviarlo al server. In questi casi, è necessario controllare strettamente il download dei file.
Questo esempio mostra la creazione di una directory e la copia di un file in quella directory sul server.
Vorrei anche dimostrare un esempio con un elemento casella di controllo. Questo elemento è leggermente diverso dagli altri elementi in quanto se non uno degli elementi casella di controllo'a non è selezionato, quindi una variabile superglobale $_POST restituirà un valore vuoto:
if (!vuoto($_POST [ "miocolore"])) echo $_POST [ "miocolore"]; // Se è selezionato almeno 1 elemento
eco "Seleziona valore";
?>
26.02.2016
Ciao!
Continuiamo a studiare Nozioni di base sull'HTML. In questa lezione esploreremo che cosaHTML il modulo e come viene creato.
Se hai notato, nessun sito web oggi è completo senza moduli. Questi moduli possono essere diversi, ad esempio un modulo di feedback, un modulo per l'invio di un ordine, un modulo per la registrazione e l'accesso al sito, un modulo per l'invio di commenti, recensioni, un modulo di ricerca e molti altri.
Penso che ora devi mostrare esempi di come appaiono Moduli HTML visivamente.
○ Modulo di ricerca:
○ Modulo di accesso al sito web:
○ Modulo di feedback:
○ Modulo d'ordine:
Penso che tu abbia l'essenza della creazione di moduli HTML. Quindi, nella lezione di oggi ti dirò, come creare un sempliceHTMLmodulo e quali tag possono essere utilizzati per creare diversi campi modulo.
D'ora in poi, chiedo al tuo attenzione speciale perché l'argomento è complesso e importante.
HTMLil moduloè un campo in cui l'utente inserisce alcune informazioni. Ma in qualche modo anche queste informazioni devono essere inviate. Una specie di modulo HTML è come una motocicletta senza benzina, tutto sembra essere lì, ma per qualche motivo non va. Quindi, affinché il modulo funzioni e invii le informazioni immesse dall'utente, è necessario creare un gestore di moduli nel formato . Ma non preoccuparti del conduttore, dal momento che stai solo frequentando il corso per principianti. Esploreremo ulteriormente l'argomento del gestore del modulo nella sezione PHP. Quindi, qualcosa che sto divagando dall'argomento principale.
Imparare a creare moduli HTML
Qualsiasi modulo HTML sarà costituito da un tag principale
. All'interno dell'etichetta vengono inseriti i restanti elementi del modulo che verranno visualizzati nella pagina web.
Il modulo deve essere posizionato tra i tag
.Per etichetta
Elementi della forma
○ Etichettaingresso
Etichettaingresso- questa parte dell'elemento del campo del modulo è destinata all'immissione di testo piccolo, numeri.
Per etichetta
il tag di chiusura non è necessario
.
*attributi per il tag< ingresso >
- nome - nome dell'elemento
- dimensione - dimensione del campo
- obbligatorio – campo obbligatorio
- autofocus - il puntatore del mouse sarà immediatamente nel campo durante il caricamento di una pagina web
- maxlength - questo attributo può essere specificato importo massimo inserendo i caratteri nel campo. Per impostazione predefinita, senza l'attributo maxlength, è possibile inserire un numero illimitato di caratteri nel campo
- segnaposto: un suggerimento per l'utente che verrà visualizzato direttamente all'interno del modulo del campo (utilizzato per utilizzare l'attributo value).
- tipo - tipo di elemento
Esempio di riempimento:
tipo di elemento
Campo di testo
○ Campo di testo "testo":
Risultato:
○ Campo password "password":
Risultato:
○ Campo per l'e-mail "e-mail":
Risultato:
○ Pulsante per selezionare un file dal computer "file":
Risultato:
○ Il campo per inserire il telefono "tel":
Risultato:
○ Campo di ricerca:
Risultato:
○ Campo di selezione del colore "colore":
Risultato:
○ Campo per l'inserimento e la selezione dei numeri "numero":
- min - valore minimo
- max - valore massimo
- passo - passo.
Risultato:
○ Campo data "data":
Risultato:
○ Campo per la selezione di data e ora locale nel formato (05/05/2015 00:00):
Risultato:
○ Visualizza il calendario a discesa.
Campo per la selezione dell'anno e del mese nel formato (luglio 2015).:
Risultato:
○ Campo dell'ora "ora":
Risultato:
○ Dispositivo di scorrimento della gamma:
Risultato:
○ Casella di controllo:
selezionato - Questo attributo specifica quale casella di controllo dovrebbe essere abilitata per impostazione predefinita
Risultato:
○ Interruttore radio "radio":
selezionato - questo attributo specifica quale interruttore radio dovrebbe essere abilitato per impostazione predefinita
Risultato:
Bottoni
○ pulsante:
valore - etichetta sul pulsante
Risultato:
○ Pulsante per l'invio dei dati "invia":
valore - etichetta sul pulsante
Risultato:
○ Pulsante di reset:
valore - etichetta sul pulsante
Risultato:
○ pulsante immagine:
Risultato:
○ Campo nascosto "nascosto"
○ seleziona tag
EtichettaSelezionare- fa parte dell'elemento del modulo, progettato per entrare in un elenco a discesa.
Per etichetta
il tag di chiusura è obbligatorio
.
Etichetta
Per creare voci di elenco a discesa, è presente un tag il tag di chiusura è obbligatorio .
*attributi per il tag
- Nome è il nome dell'intero elenco. Imposta solo per il tag
- multiplo - per la selezione multipla, solo quando si seleziona è necessario tenere premuto il tasto "CTRL". Imposta solo per il tag
- Valore: impostato per ogni elemento dell'elenco per il tag
- disabilitato - disabilita la selezione di un elemento nell'elenco a discesa. Imposta solo per il tag
Risultato:
Corriere Espresso non urgente
O così:
Risultato:
Corriere Espresso non urgente
Ora blocchiamo dalla lista "Urgente"Attributo"disabilitato»:
Risultato:
Corriere Espresso non urgente
○ elenco a discesa per gruppo:
Il tag viene utilizzato per creare un elenco di gruppi
Risultato:
Opzione area di testo
Etichetta Fieldset Legenda
○ per scelta multipla:
In etichetta
Risultato:
Opzione Area di testo Etichetta Fieldset Legenda
Campo di testo multilinea
○ tag area di testo
Etichettaarea di testo- fa parte dell'elemento del campo del modulo, progettato per inserire testo di grandi dimensioni, numeri.
il tag di chiusura è obbligatorio
.
*attributi per il tag< area di testo >
- nome - nome del campo
- cols - larghezza del campo
- righe - altezza del campo
- segnaposto: un suggerimento per l'utente che verrà visualizzato direttamente all'interno del campo del modulo.
Risultato:
O così:
Risultato:
Inserire il testo
O così:
Risultato:
Design "telaio" (fieldset)
○ tag fieldset
tag fieldset- utilizzando questo tag, puoi disegnare una cornice attorno all'oggetto.
Il tag di chiusura è obbligatorio.
Tag aggiuntivi
Risultato:
Questo è tutto ciò di cui volevo parlare sull'argomento "Moduli HTML". Ora riassumiamo e in pratica proviamo a creare forma semplice, utilizzando già le conoscenze apprese da questo articolo.
Ecco il mio modulo:
Risultato:
Messaggio precedente
Prossimo post
Un saluto, cari lettori del sito del blog. Oggi voglio parlare di cose come i 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 vari tag vengono inseriti 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:
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:
- Nome - un nome univoco che devi specificare se il file Html in cui stai facendo qualcosa utilizzerà diversi moduli web
- Azione: un attributo obbligatorio che indica il percorso dello script a cui verranno trasferiti i dati da esso per l'ulteriore elaborazione
- 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:
- campi di testo a riga singola (Tipo="Testo")
- campi password (Tipo="Password")
- caselle di controllo (Tipo="Casella di controllo")
- pulsanti di opzione (Tipo="Radio")
- campi nascosti (Tipo="Nascosto")
- pulsanti normali (Type="Button")
- pulsanti per l'invio dei dati al gestore (Type="Submit")
- pulsanti per riportare il modulo web al suo stato originale (Type="Reset")
- campi per caricare i file sul server (Type="File)
- 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:
- 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.
- 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.
- Maxlength - per impostazione predefinita, il numero di caratteri che possono essere inseriti nel modulo Html non è limitato, ma utilizzando Maxlength è possibile impostare questo limite. Più caratteri di quanti saranno indicati, non potrai inserire nel campo
- Valore - con esso puoi impostare cosa esattamente verrà scritto per impostazione predefinita nel campo o sul pulsante di invio dati
- 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:
(!LANG:Ora diamo un'occhiata alla creazione di un modulo web con pulsanti di opzione (Radio):
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):
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:
I seguenti attributi possono essere utilizzati con Textarea:
- Nome: fornisci un nome per questo elemento del modulo web. Verrà passato al server al programma di gestione dei dati
- Cols: puoi usarlo per impostare la larghezza del campo multilinea generato in caratteri.
- 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.
- Sola lettura: impedisce agli utenti di modificare o aggiungere il proprio testo a questo campo (sola lettura).
- 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 caratteristica 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. Prova tu stesso:
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 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
Considerando i tag HTML di base, non possiamo non toccare un elemento così importante come i moduli. Spesso le pagine web richiedono feedback. Ad esempio, compilazione di un questionario sul sito, registrazione, autorizzazione, commenti, ecc. In tutti questi casi, l'utente compila apposite aree (campi modulo) della pagina, dopodiché i dati vengono inviati al server. I moduli vengono utilizzati per creare feedback. Un modulo è un frammento di un documento HTML destinato all'input dell'utente.
La figura mostra il modulo di registrazione dello studente sul sito web dell'istituto di istruzione.
Il contenitore viene utilizzato per creare il modulo
con l'attributo action, che specifica la pagina del server che tratterà i dati inviati dal form.La struttura della forma più semplice:
elementi del modulo...
Ogni modulo deve inoltre avere un pulsante di invio per inviare i dati dopo che il modulo è stato compilato.
Struttura del pulsante:
Quindi, per registrare quasi tutti gli elementi del modulo, viene utilizzato il tag con l'attributo type. Per creare un pulsante che reimposta tutti i dati dai moduli, viene utilizzata la struttura seguente:
Per creare un campo di testo (campo di testo) esiste un parametro di testo. A tale scopo vengono utilizzati i seguenti parametri: nome – nome del campo; dimensione - per il campo in simboli; maxlength - il numero massimo possibile di caratteri nel campo; valore - informazioni visualizzate nel modulo per impostazione predefinita
Un esempio di inserimento di un modulo con due campi di testo:
Il risultato del modulo è mostrato in figura.
Se è necessario inserire una grande quantità di informazioni in un campo di testo, ad esempio un commento, viene utilizzata la forma di un'area di testo (textarea), che viene creata utilizzando il tag
Il risultato del codice con l'area di testo è mostrato in figura.
L'elemento successivo dei moduli sono gli elenchi che consentono di effettuare una scelta dall'insieme di valori presentato. I tag consentono di creare un modulo elenco
Struttura della voce dell'elenco:
Affinché l'elemento venga evidenziato al caricamento della pagina, è necessario nel tag
Un metodo di selezione simile è la casella di controllo e gli elementi del modulo del pulsante di opzione. La differenza tra questi elementi è che la casella di controllo consente di effettuare selezioni multiple e il pulsante di opzione solo singolo.
La struttura della casella di controllo e della voce del pulsante di opzione:
testo
Pulsante di opzione:
testo
Negli elementi specificati nella struttura, l'attributo selezionato viene utilizzato di default per evidenziare la casella di spunta e il pulsante di opzione. Nella figura è mostrato un esempio di utilizzo di una casella di controllo, di un pulsante di opzione e del codice HTML.
Un altro elemento del modulo è un pulsante, che viene specificato utilizzando l'attributo type del tag. con valore pulsante:
Nel codice specificato per la creazione di un pulsante è presente un parametro onclick che, di norma, specifica un codice in un linguaggio di programmazione per eseguire un'azione quando si fa clic su questo pulsante:
Per visualizzare un messaggio in una finestra speciale, viene utilizzato un comando javascript, aler. Il risultato dell'esempio è mostrato nella figura.
Per inserire un'immagine in un pulsante, utilizzare il codice mostrato nell'esempio seguente:
Durante la registrazione e l'accesso ai siti, viene utilizzato un campo con un test nascosto, visualizzato come asterischi. Questo è l'elemento del modulo password:
Spesso la registrazione al sito è suddivisa in più pagine, e ciascuna successiva deve contenere informazioni della precedente. L'elemento modulo nascosto viene utilizzato per nascondere le informazioni inviate:
L'elemento del modulo nascosto sarà invisibile nella finestra del browser.
Per caricare i file sul server, i moduli hanno un elemento file. Di seguito è riportato un codice di esempio per caricare i file sul server:
Quindi, in questo argomento, sono stati presi in considerazione gli elementi del modulo per la creazione di varie pagine HTML che, insieme ai processori di script su un computer o server, consentono di sviluppare applicazioni Web a tutti gli effetti.
