Considerando l'essenziale Tag HTML non possiamo fare a meno di toccare questo argomento elemento importante come le forme. Il feedback è spesso necessario sulle pagine web. Ad esempio, compilazione di un modulo sul sito, registrazione, autorizzazione, commenti, ecc. In tutti questi casi l'utente compila apposite aree (campi form) della pagina, dopodiché i dati vengono inviati al server. Per creare feedback vengono utilizzati i moduli. La forma è un frammento Documento HTML destinato all'input dell'utente.
La figura mostra un modulo di registrazione degli studenti sul sito web di un istituto scolastico.
Un contenitore viene utilizzato per creare un modulo
Con attributo di azione, che specifica la pagina sul server che elaborerà i dati inviati dal modulo.Struttura nella sua forma più semplice:
elementi del modulo...
Ogni modulo deve anche avere pulsanti di invio, progettato per inviare dati dopo aver compilato il modulo.
Struttura dei pulsanti:
Quindi, per registrare quasi tutti gli elementi del modulo, viene utilizzato il tag Con attributo tipo. Per creare un pulsante che reimposta tutti i dati dai moduli, viene utilizzata la seguente struttura:
Per creare campo di testo(campo testo) c'è un parametro di testo. 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
Esempio di immissione di un modulo con due campi di testo:
Il risultato del modulo è mostrato in figura.
Se è necessario inseriscilo nel campo di testo un gran numero di informazioni, ad esempio un commento utilizza la forma di un'area di testo, creata utilizzando un tag
Il risultato del codice che lavora con l'area di testo è mostrato in figura.
Elemento successivo i moduli sono elenchi che consentono di effettuare una scelta da un insieme di valori presentato. I tag ti consentono di creare un modulo di elenco
Struttura della voce dell'elenco:
Affinché l'elemento venga evidenziato al caricamento della pagina, è necessario nel tag
Un metodo di selezione simile sono gli elementi del modulo checkbox e radiobutton. La differenza tra questi elementi è che una casella di controllo consente di effettuare selezioni multiple, mentre un pulsante di opzione consente solo una singola selezione.
Struttura di una casella di controllo e di un pulsante di opzione:
testo
Pulsante di opzione:
testo
Negli elementi specificati nella struttura, l'attributo controllato viene utilizzato per impostazione predefinita per evidenziare la casella di controllo e il pulsante di opzione. Nella figura è mostrato un esempio di utilizzo di una casella di controllo, un pulsante di opzione e un codice HTML.
Un altro elemento del modulo è un pulsante, specificato utilizzando l'attributo tag type con il pulsante valore:
Nel codice specificato per la creazione di un pulsante è presente un parametro onclick, che solitamente specifica il codice in un linguaggio di programmazione per eseguire una particolare azione quando si fa clic su questo pulsante:
Per visualizzare un messaggio in una finestra speciale, utilizzare il comando JavaScript – aler. Il risultato dell'esempio è mostrato in figura.
Per inserire un'immagine in un pulsante, utilizzare il codice mostrato nel seguente esempio:
Durante la registrazione e l'accesso ai siti Web, viene utilizzato un campo con un test nascosto, visualizzato come stelle. Questo è l'elemento del modulo password:
La registrazione al sito è spesso suddivisa in più pagine e ciascuna successiva deve contenere informazioni della precedente. Per nascondere le informazioni trasmesse, viene utilizzato l'elemento del modulo nascosto:
L'elemento del modulo nascosto sarà invisibile nella finestra del browser.
Per caricare file sul server, i moduli hanno un elemento file. Di seguito è presentato un codice di esempio per caricare file sul server:
Pertanto, in questo argomento abbiamo esaminato gli elementi del modulo per la creazione di varie pagine HTML che, insieme ai gestori di script su un computer o server, consentono di sviluppare applicazioni Web a tutti gli effetti.
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 azione 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;
- Ripristina– imposta un pulsante per cancellare il modulo;
- Parola d'ordine– 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 metodo(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 |
|
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.
Sono assolutamente sicuro che mentre navighi su Internet ti sei imbattuto in vari moduli, ad esempio un modulo di registrazione, un modulo di accesso, un modulo di feedback e molti, molti altri. Moduli HTML.
In realtà, il modulo è costituito da vari elementi di input: campi di testo, aree di testo, pulsanti di opzione, pulsanti di opzione, pulsanti e così via.
E in questo articolo imparerai come creare assolutamente qualsiasi file .
Per prima cosa creane uno semplice Pagina HTML, a cui aggiungere un contenitore (tag Ora diamo un'occhiata al modulo. Il modulo inizia con un tag , di conseguenza, termina con il tag di chiusura
. Questo tag ha diversi attributi che è altamente consigliabile compilare. Ma prima creiamo un modulo semplice con attributi tag in modo che tu possa comprendere più chiaramente lo scopo di ciascuno di essi: Qui iniziamo la descrizione del modulo, che ha i seguenti attributi: 1) Attributo " nome". Il valore di questo attributo indica il nome Moduli HTML. La domanda sorge spontanea: perché è necessario? La risposta è molto semplice: se non usi un modulo, ma diversi, per distinguere un modulo da un altro, devi impostare nomi diversi. E i nomi stessi sono necessari per accedere ai moduli, ad esempio, tramite JavaScript. Ti svelo un piccolo segreto, che non ti consiglio di usare, ma per onestà te lo svelo. In effetti, i moduli possono essere facilmente distinti senza nomi, quindi, in generale, il nome del modulo non è affatto necessario. Ma io FORTEMENTE Ti consiglio di dare dei nomi ai moduli, perché ti sarà più facile capire di cosa è responsabile ciascun modulo. 2) Attributo " azione". Il valore di questo attributo è responsabile del percorso del file di script che elaborerà il modulo. Cioè, non è sufficiente inserire i dati nel modulo, devono comunque essere elaborati di conseguenza, e questo è esattamente il percorso a questa file del gestore e si trova nel valore dell'attributo " azione". 3) Attributo " metodo". Può avere uno dei due significati molto popolari: " inviare" E " Ottenere". Questo attributo determina il metodo di invio. Non entrerò nei dettagli, dirò solo che il primo metodo è un invio nascosto di dati e il secondo è aperto. Per renderlo ancora più chiaro, consideriamo due indirizzi di transizione: UN) http://miosito.ru/scipt/request.php B) http://mysite.ru/script/request.php?a=7&b=Michael Nel primo caso l'utente non vede cosa sta inviando (metodo " inviare"), e nella seconda vede effettivamente i nomi delle variabili e i loro valori (metodo " Ottenere"). Alla fine dell'articolo, puoi provare a inviare il modulo utilizzando due metodi diversi e assicurarti che siano diversi. Ma per ora lo dirò TANTO il metodo è più spesso utilizzato inviare", cioè un invio nascosto. Questa era una descrizione del modulo stesso e ora puoi iniziare ad aggiungere elementi al modulo. La prima cosa che aggiungeremo è un campo di testo. Aggiunta di un campo di testo utilizzando un tag
, ovvero utilizzando l'attributo di questo tag " tipo"con significato" testo". Inoltre, prima di creare un campo di testo, si consiglia di scrivere di che tipo di campo si tratta, ad esempio: " il tuo nome". All'interno del cartellino scrivi questa riga: Il tuo nome: Ancora una volta, analizziamo gli attributi: 1) Attributo " tipo" è responsabile del tipo dell'elemento di input. In questo caso, abbiamo indicato che si tratta di un normale campo di testo. Negli elementi seguenti cambieremo il valore di questo attributo. 2) Attributo " nome" è responsabile del nome dell'elemento. Qui abbiamo indicato che il nome di questo campo nome di battesimo. 3) Attributo " valore" è responsabile del valore predefinito di questo campo. Come si suol dire, è meglio vedere una volta che ascoltare cento volte, quindi è meglio comporre ( Inoltre, basta digitarlo e non copiarlo!) questo testo nell'editor, quindi guarda il risultato nel browser. Ora creiamo un altro campo simile, ma non per inserire caratteri normali, ma per inserire una password. Cioè, tutto dovrebbe essere uguale, ma dietro dovrebbe essere nascosto solo il testo asterischi. Pertanto, passando alla riga successiva (tag La tua password: Come puoi vedere, ora il valore dell'attributo " tipo"È " parola d'ordine". Gli attributi rimanenti sono gli stessi di un normale campo di testo. L'elemento successivo è un elenco a discesa. È creato un po 'più complicato, poiché qui è necessario non solo dichiarare la creazione di un elenco a discesa, ma anche aggiungere elementi a questo elenco. Scriviamo, passando alla riga successiva (non ne parlerò oltre) quanto segue Codice HTML. Seleziona un'opzione: Etichetta indica l'inizio dell'elenco a discesa. L'elenco termina con il tag
. Attributo " nome" è chiaro perché l'ho già spiegato più volte. Le voci dell'elenco vengono create utilizzando il tag . Valore dell'attributo " valore" indica quale valore avrà la variabile scelta(ad esempio, nel JavaScript), cioè neanche scelta = 1, O scelta = 2, O scelta = 3. Immediatamente dopo la fine della descrizione del tag viene inserito ciò che l'utente vede nell'elenco a discesa. Ancora una volta, è meglio guardare nel browser e tutto ti sarà immediatamente chiaro. Ora aggiungiamo un'area di testo utilizzando il tag Qui stiamo creando un'area di testo con un'altezza di 10
stringhe (valore dell'attributo " righe") e una larghezza di 15
caratteri (valore dell'attributo " col"). All'interno di questo tag abbinato viene specificato il testo nell'area di testo predefinita. In realtà qui non c'è altro da dire. Andiamo avanti. L'elemento successivo è un pulsante di opzione. Un pulsante di opzione è un insieme di tali " cerchi", da cui è possibile selezionarne solo uno. I pulsanti di opzione vengono creati utilizzando Etichetta HTML
, o, più precisamente, utilizzando il valore " Radio"attributo" tipo". Scriviamo qualcosa del genere Codice HTML: Scegline uno: Qui mi concentrerò sull'attributo " nome", perché oltre a impostare un nome, ha un'altra caratteristica molto importante. Se tu NON Se rendi uguali i nomi di questi tre pulsanti di opzione, diventeranno indipendenti e, pertanto, potrai selezionare più opzioni contemporaneamente. Per assicurarti di ciò, cambia i nomi, quindi prova a selezionare più opzioni contemporaneamente e sarai immediatamente convinto delle mie parole. Pertanto, un gruppo di pulsanti di opzione deve avere lo stesso valore di attributo " nome".attributo" valore" indica il valore della variabile " choiceradio" (ancora, ad esempio, in JavaScript). Subito dopo la descrizione del tag
c'è un testo che l'utente vedrà accanto al pulsante di opzione corrispondente. Un altro elemento del modulo sono gli interruttori ( casella di controllo). Vengono creati nuovamente utilizzando il tag
. Scriviamo le seguenti righe: Accetti le nostre regole: Penso che qui sia tutto trasparente, quindi non lo spiegherò. Ti consiglio di guardare semplicemente come appare in un browser. E dirò che se la casella di controllo è selezionata, il valore della variabile " termini" Volere " SÌ", se non regge, il valore di questa variabile sarà "", cioè una stringa vuota. Un altro elemento è il campo di selezione del file. Sicuramente ti sarà capitato di caricare file su un server e spesso di dover utilizzare il campo di inserimento del nome file per farlo. Questo campo viene creato utilizzando il tag già noioso
. Scriviamolo così: Seleziona il file da scaricare: Saluti, cari lettori del sito blog. Oggi voglio parlare di qualcosa come i moduli HTML. Qualunque sia il motore del tuo sito (cms), utilizzerà sicuramente moduli in un modulo o nell'altro, creati utilizzando i tag Form e Input, nonché gli attributi e parametri Button, Checked, Value, Checkbox, Radio, Checkbox, Submit . Bene, puoi anche aggiungere a questi elementi per creare elenchi a discesa e campi di testo: Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda. La stessa stringa di ricerca del sito () viene creata utilizzando questi tag e sarà richiesta una ricerca sul tuo progetto. Pertanto, capire come sono strutturati e funzionano non ti ostacolerà affatto per lavorare con successo sul design, e non sarà superfluo se lo promuovi tu stesso. Quindi, avendo giustificato la necessità di studiare questi elementi, penso che non dovrebbero sorgere più domande, quindi è tempo di passare direttamente allo studio delle loro possibili opzioni. Sì, vorrei anche ricordarti che abbiamo già esaminato molti materiali sull'argomento del linguaggio di markup ipertestuale, ad esempio tre ) e . Fondamentalmente, i moduli sono costituiti da elementi, per la creazione dei quali vengono inseriti vari tag dai tag Modulo all'interno del contenitore principale: Checked, Value, Checkbox, Radio, Checkbox, Submit, ecc. Dobbiamo solo inserire il suo codice in qualsiasi comodo inserire nel modello del sito, indicando tramite i tag e i loro attributi come dovrebbe apparire. Potrebbe trattarsi di un campo di testo con un pulsante per inviare la query inserita, selezioni con pulsanti di opzione (dove è possibile lasciare premuto solo uno dei pulsanti forniti), più campi di testo con un pulsante per inviare() e molto altro. Ad esempio, nel caso della “ricerca”, utilizzando l'attributo Valore è possibile specificare cosa verrà scritto esattamente sul pulsante situato accanto al campo per l'inserimento di una query. I dati inseriti nei moduli devono essere ulteriormente trattati in qualche modo. Ad esempio, in caso di feedback, l'utente, dopo aver compilato il campo con il proprio nome, inserito la propria E-mail e il testo del messaggio, e quindi cliccato sul pulsante di invio, avrà il diritto di sperare che i dati dal modulo verrà inviato all'e-mail dell'autore del sito. Ma, sfortunatamente, non è possibile implementarlo utilizzando un solo linguaggio di markup ipertestuale (). Per questi scopi, sarà necessario uno speciale programma di gestione che, dopo che l'utente ha fatto clic sul pulsante di invio, prenderà tutti i dati dai campi di feedback e li invierà tramite e-mail al proprietario della risorsa. È necessario specificare quale programma eseguirà questa operazione utilizzando l'attributo Action. Tipicamente, il programma di elaborazione è uno script scritto in PHP. Pertanto, nell'attributo Action del tag Form, dovrai specificare il percorso del file di questo script situato sul tuo server di hosting. Lascia che ti faccia un esempio di iscrizione al feed RSS del mio blog via e-mail: All'inizio può sembrare poco chiaro, ma penso che tutto diventerà più chiaro man mano che la storia va avanti. Qualsiasi modulo deve essere racchiuso tra tag di apertura e chiusura Modulo. Questa è una sorta di contenitore per la loro creazione. Questo tag ha una serie di attributi obbligatori e facoltativi: Diamo un'occhiata ai tag rimanenti 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 quale sarà esattamente il form HTML creato utilizzando questo tag. Utilizzando Input e Tipo è possibile creare i seguenti elementi: L'input non ha un tag di chiusura. L'aspetto esatto di un modulo Web creato utilizzandolo dipende interamente dal parametro specificato nell'attributo Type. Se Tipo non è specificato, per impostazione predefinita verrà creato un campo di testo. Vediamo a cosa servono gli altri attributi: Ora diamo un'occhiata a tutto esempi di moduli con Input. L'aspetto del campo testo è simile all'aspetto del campo inserimento password, consideriamo quindi solo la possibilità di creare un Testo, ad esempio, per inserire un indirizzo email: 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 volta per creare ciascuno dei due pulsanti di opzione. Inoltre, ognuno di essi contiene 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 degli interruttori, verrà inviata una variabile, il cui nome è scritto in Nome, ma il valore di questa variabile dipenderà da quale interruttore è stato selezionato. Diamo un'occhiata a un esempio di creazione di un modulo Web con caselle di controllo: Le caselle di controllo differiscono dai pulsanti di opzione poiché consentono di selezionare più opzioni contemporaneamente. Nome viene utilizzato per determinare nel file del gestore in quale casella di controllo vengono inserite le caselle di controllo e Valore specifica il valore che verrà inviato al gestore (se Valore non è specificato, il testo situato accanto a questa casella di controllo verrà inviato al gestore ). Per cominciare, vorrei ricordarvi cosa sono effettivamente i moduli web e perché sono necessari sulle pagine del sito. Sono progettati principalmente per replicare gli elementi presenti in qualsiasi sistema operativo in una forma user-friendly: pulsanti, campi di immissione testo, elenchi a discesa, caselle di controllo, interruttori 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 cliccarci sopra. Inoltre, tutti i suoi elementi costitutivi (come Select, Option, Textarea, Label, Fieldset, Legend) sono già vuoti (contenitori) completati, per inserirli è sufficiente utilizzare il tag desiderato con gli attributi e i parametri necessari. I browser stessi sanno come visualizzare questo o quell'elemento del modulo web. È vero, le opzioni di visualizzazione dello stesso elemento in browser diversi potrebbero differire leggermente l'una dall'altra, ma, di regola, non in modo significativo. Quello. risulta che i moduli Web in Html sono un tentativo di trasferire la chiave elementi utilizzati in qualsiasi sistema operativo, alle pagine del sito. Ma perché potrebbero essere necessari nelle pagine del sito? In linea di principio, per lo stesso scopo per cui elementi simili vengono utilizzati nei sistemi operativi: trasferire dati dall'utente. Nel caso dei moduli, i dati dell'utente vengono trasferiti al server, dove vengono elaborati da un programma speciale (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 a E-mail, l'utente compilando i campi, dopo aver cliccato sul pulsante invia dati, avvierà il programma di posta predefinito utilizzato sul proprio computer. Il tag Form di apertura in questo caso dovrebbe assomigliare a questo: I seguenti attributi possono essere utilizzati con Textarea: Il tag Html Label ti consente di implementare una funzionalità molto interessante nei moduli disponibili nei sistemi operativi. Lì, se ricordi, per attivare un elemento, non devi fare clic su di esso, puoi 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 bandiera non porterà alcun risultato. Prova tu stesso: Come puoi vedere, fare clic sul testo per attivare questo elemento è inutile: devi fare clic su di esso stesso. Questo è esattamente lo stato di 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 migliorerà l'usabilità. Ma come collegare l'elemento del modulo Html e il testo? 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 includere l'attributo For, il cui parametro deve essere esattamente uguale a quello dell'attributo ID nel tag Html dell'elemento del form. Risulta qualcosa del genere: Come puoi vedere, ora, grazie all'utilizzo di Label, gli elementi del modulo web possono essere attivati non solo facendo clic su di esso stesso, ma anche facendo clic sul testo situato accanto ad esso. Probabilmente hai spesso visto che i moduli di grandi dimensioni in Html sono divisi in gruppi (Fieldset), circondati da una cornice e ciascuno di questi gruppi ha il proprio titolo (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 il Fieldset di apertura una costruzione di una Legenda di apertura e di chiusura, tra le quali è 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 sulle pagine del blog del sito Potresti essere interessato Select, Option, Textarea, Label, Fieldset, Legend - Tag Html per la forma di elenchi a discesa e campi di testo I moduli HTML sono elementi di interfaccia complessi. Includono diversi elementi funzionali: campi di input E
), scriviamo il seguente codice:
opzione 1
opzione 2
Opzione 3
Perché sono necessari i moduli e come funzionano sui siti Web moderni?
Tag di modulo e input per la creazione di pulsanti, caselle di controllo e pulsanti di opzione
Esempi di moduli creati su Input con valori diversi per Tipo
Altri attributi dei tag di input ed esempi del loro utilizzo
Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda: elenchi a discesa, aree di testo e altri elementi di moduli web
Etichetta: a cosa serve questo tag HTML nel modulo?
Fieldset e Legend: suddivisione del modulo in parti
Puoi guardare altri video andando su
");">
Elenchi in codice Html: tag UL, OL, LI e DL 
MailTo - cos'è e come creare un collegamento in Html per inviare una Email 
Come vengono impostati i colori nel codice Html e CSS, selezione delle sfumature RGB nelle tabelle, output Yandex e altri programmi