Come è fatto un elenco a discesa in html? Creazione di un form in HTML Come selezionare una pagina in html

Il tag di opzione HTML viene utilizzato per creare un elenco a discesa che consente all'utente di selezionare un'opzione da un insieme predefinito di valori.

Il testo visibile all'utente può differire dal testo specificato nell'attributo value. Ecco come creare un elenco a discesa:

L'elenco a discesa viene creato utilizzando il tag definire le opzioni da selezionare utilizzando un tag
In etichetta

Puoi anche impostare una classe CSS invece di utilizzare un ID per definire lo stile del menu a discesa.

Nella sezione successiva, mostrerò esempi di come utilizzare l'elenco a discesa HTML in JavaScript/JQuery. Gli esempi mostreranno anche come modellare

Usando l'attributo value

Come accennato in precedenza, il valore dell'attributo value può essere diverso dal testo visualizzato sulla pagina. Ad esempio, puoi visualizzare i nomi dei paesi o i colori per gli utenti e utilizzare gli shortcode nell'attributo value.

Nell'esempio seguente, creeremo un elenco a discesa con un attributo value:

Visualizza la demo e il codice online

Per Tag

Un esempio di accesso all'opzione selezionata in JavaScript

Ora creiamo un esempio di accesso al valore dell'opzione selezionata ed esecuzione di alcune azioni. Lo stesso elenco dell'esempio sopra, lo creiamo con le scelte di colore. Una volta selezionato, fai clic sul pulsante per applicare quel colore al documento:

Visualizza la demo e il codice online

Il valore dell'opzione HTML utilizza il seguente codice:

La seguente riga di codice viene utilizzata in JavaScript per accedere al valore dell'attributo value dell'opzione il valore è diverso dal testo. Dopo aver scelto un colore, jQuery visualizza il testo visibile nell'avviso. Codice etichetta

Ecco come si accede a questo valore L'opzione di selezione HTML ha selezionato JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Puoi anche accedere al valore usando il metodo jQuery $.val():

var coloreselezionato = $("#jqueryselect").val();

Sostituisci questa riga nell'esempio sopra e il codice visualizzerà il valore shortcode/colore nell'attributo value invece del testo visibile.

Un esempio di come ottenere un valore in uno script PHP

In questo esempio di acquisizione del valore dell'opzione selezionata dall'elenco a discesa, il modulo viene creato utilizzando il tag

Ed ecco come viene utilizzato lo script PHP per ottenere il valore dell'opzione di selezione HTML:

".$_POST["selphp"].""; } ?>

Se il modulo ha un metodo GET, allora usa Matrice PHP $_GET[“”].

Definizione di stili a discesa con CSS

Ora diamo un'occhiata a come definire lo stile dell'elenco a discesa.

In questo esempio, tagghiamo

Nel browser appare così:

Raggruppamento voci di menu

Consideriamo il seguente tag A utilizzato per raggruppare i dati correlati in un elenco a discesa name="bianco&nero"> label="lista bianca">

IN questo esempio abbiamo identificato 2 gruppi con un tag . L'attributo label dell'elemento specifica il nome del gruppo selezionato in grassetto:

Nell'esempio seguente, utilizzando l'attributo booleano disabilitato, disabiliteremo un gruppo (" Gruppo B"):

Un esempio di utilizzo dell'attributo disabled di un tag HTML <optgroup>

Il risultato del nostro esempio:

Disabilitare l'elenco e la selezione multipla

Gli attributi disabilitati e multipli del tag <select>

In questo esempio, abbiamo creato due elenchi a discesa. Per il primo elenco, abbiamo utilizzato l'attributo disabled, che impedisce l'interazione con l'elenco (lo disabilita).

Per il secondo elenco, abbiamo utilizzato l'attributo multiple, che indica che è consentito selezionare più opzioni nell'elenco contemporaneamente (tramite Ctrl su Windows e attraverso comando su Mac).

Nel browser appare così:

Area di testo

Il risultato del nostro esempio:

Disattivazione dell'area di testo

Per analogia con gli elementi considerati in precedenza, il tag ha un attributo booleano disabilitato che specifica che l'area di testo deve essere disabilitata (non disponibile per l'interazione dell'utente). L'attributo può essere utilizzato insieme agli script, ad esempio, fino a quando non viene soddisfatta una condizione, l'elemento è inattivo. Consideriamo un esempio di utilizzo: <!DOCTYPE html> <html> <head> <title> Gli attributi disabled e name del tag <textarea></title> </head> <body> <form> <textarea name = "userInfo" > Il campo di testo è disponibile per il riempimento. Il campo di testo non è disponibile per il riempimento.

), per la prima e la seconda area impostiamo nomi univoci con l'attributo name. Per la seconda area di testo, abbiamo specificato con l'attributo disabled che verrà disabilitato al caricamento della pagina. Inoltre, abbiamo inserito un pulsante all'interno del form, che serve per inviare il form (element <input>con tipo di pulsante "invia modulo": type = "invia" ). Il risultato del nostro esempio: <h2>Descrizione comandi dell'area di testo</h2> Quindi considereremo l'esempio finale e passeremo all'attività pratica dell'articolo in questo tutorial. Grazie all'attributo (tag HTML <textarea>) è possibile specificare un testo di suggerimento che descriva il valore previsto che l'utente deve immettere nell'elemento. Il testo del tooltip viene nascosto quando l'utente immette un valore (qualsiasi carattere) nel campo di testo, se viene rimosso, il tooltip verrà nuovamente visualizzato. Consideriamo un esempio di utilizzo: <!DOCTYPE html> <html> <head> <title> segnaposto e attributi di tag di sola lettura <textarea></title> </head> <body> <form> <textarea placeholder = "Inserisci le informazioni nel campo di testo"> "Il campo è di sola lettura" sola lettura >
type = "submit" name = "submitInfo" value = "submit" > !}

In questo esempio, abbiamo creato due aree di testo (element ), per il primo e il secondo attributo area, impostiamo un suggerimento per l'utente, che viene visualizzato con un colore del testo chiaro all'interno dell'elemento. Per la seconda area di testo, con l'attributo readonly, abbiamo indicato che sarà di sola lettura (il contenuto non può essere modificato). Tieni presente che se il campo di testo è di sola lettura, il contenuto non può essere modificato, ma l'utente può comunque accedere al contenuto, selezionarlo e copiarlo. Inoltre, abbiamo inserito un pulsante all'interno del form, che serve per inviare il form (element <input>con tipo di pulsante "invia modulo": type = "invia" ). Il risultato del nostro esempio: <h2>Domande e compiti sull'argomento</h2> Prima di passare all'argomento successivo, completare l'attività pratica: <ul><li>Utilizzando le conoscenze acquisite, componi il seguente modulo per la pubblicazione di un posto vacante:</li> </ul>Prima di procedere con l'attività, apri l'esempio in una nuova finestra ed esamina attentamente il modulo per ripeterne tutti i punti. Per completare l'attività, avrai bisogno della conoscenza dell'articolo. Se te lo sei perso, torna a studiarlo. Dopo aver completato l'esercizio, ispeziona il codice della pagina aprendo l'esempio in una finestra separata per assicurarti di aver eseguito tutto correttamente. Saluti, 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 moduli creati utilizzando i tag Form e Input, nonché gli attributi e i parametri Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .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.<h2>Perché sono necessari i moduli e come funzionano sui siti moderni</h2>La stessa stringa di ricerca del sito () viene creata utilizzando questi tag e la ricerca di tale stringa nel tuo progetto sarà obbligatoria. Pertanto, capire come sono organizzati e funzionano non ti ostacolerà affatto per un lavoro di successo sul design e non sarà superfluo per l'autopromozione e la promozione.Quindi, con la logica 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 ipertestuale, ad esempio tre ) e .Fondamentalmente, i moduli sono costituiti da elementi, per creare i quali vari tag vengono inseriti all'interno del contenitore principale dai tag del modulo: Checked, Value, Checkbox, Radio, Checkbox, Submit, ecc. Abbiamo solo bisogno di 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 una casella di testo con un pulsante di invio per la richiesta immessa, scelte di pulsanti di opzione (dove è possibile lasciare premuto solo uno dei pulsanti forniti), più caselle di testo con un pulsante di invio () e altro.Ad esempio, nel caso di "cerca", utilizzando l'attributo Value, è 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, nel caso <a href="https://sukachoff.ru/it/noutbuki/obratnaya-svyaz-na-youtube-kak-obshchatsya-s-podpischikami-i-uvelichit-ih-chislo/">feedback</a> 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à facoltà di sperare di inviare i dati dal form alla E-mail del sito autore. Ma implementare questo utilizzando un solo linguaggio di markup ipertestuale (), sfortunatamente, non è possibile.Per questi scopi è necessario uno speciale programma di gestione che, dopo che l'utente ha fatto clic sul pulsante di invio, preleverà tutti i dati dai campi di feedback e li invierà all'e-mail del proprietario della risorsa. Quale programma lo farà, devi specificare te stesso usando l'attributo Action.In genere, il programma di elaborazione è uno script scritto <a href="https://sukachoff.ru/it/virusy/yazyk-muzhchin-search-item-php-i-zhivoi-poisk-na-bitriks-primer-realizacii/">linguaggio PHP</a>. Pertanto, dentro <a href="https://sukachoff.ru/it/router/kak-sdelat-algoritm-poiska-po-neskolkim-slovam-na-php-iz-bd-php-self-v/">Attributo azione</a> 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 <a href="https://sukachoff.ru/it/vosstanovlenie/adres-rss-lenty-pochty-kak-podpisatsya-na-rss-e-mail-podpiska-ili-rss-chto-luchshe/">RSS Feed</a> il mio blog via e-mail:Un po' poco chiaro, probabilmente, sembra all'inizio, ma penso che tutto diventerà più chiaro man mano che la storia va avanti.<h3>Tag Form e Input per la creazione di pulsanti, caselle di controllo e pulsanti di opzione</h3>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:<ol><li>Nome - un nome univoco da specificare se il file <a href="https://sukachoff.ru/it/virusy/kak-preobrazovat-html-fail-v-pdf-fail-kak-preobrazovat-html-fail-v-pdf-fail-konverter/">file html</a> dove fai qualcosa, verranno utilizzati più moduli web</li><li>Azione: un attributo obbligatorio che indica il percorso dello script a cui verranno trasferiti i dati da esso per un'ulteriore elaborazione</li><li>Metodo: utilizzandolo è possibile modificare il metodo di passaggio dei dati da questo modulo Web allo script del file del gestore. Se non lo specifichi, verrà utilizzato per impostazione predefinita il metodo Get, che, in effetti, è destinato principalmente a variabili e messaggi brevi, nonché al passaggio di dati in modo aperto tramite <a href="https://sukachoff.ru/it/remont/bystryi-poisk-po-stranice-sochetanie-klavish-ispolzuem-goryachie-klavishi-v/">barra degli indirizzi</a> navigatore. Per passare i dati del modulo allo script del gestore, è ancora meglio usare Metodo POSTALE, progettato appositamente per il trasferimento di messaggi di testo in modo chiuso</li> </ol>Diamo un'occhiata al resto dei tag che ti consentono di creare una varietà di moduli web. Il più versatile è Ingresso. Al suo interno va scritto l'attributo Type, che determina quale sarà esattamente il form HTML creato con questo tag.Con Input e Type , puoi creare i seguenti elementi:<ol><li>campi di testo a riga singola (Type="Text")</li><li>campi password (Type="Password")</li><li>caselle di controllo (Tipo="Casella di controllo")</li><li>pulsanti di opzione (Type="Radio")</li><li>campi nascosti (Tipo="Nascosto")</li><li>pulsanti normali (Tipo="Pulsante")</li><li>pulsanti per l'invio dei dati al gestore (Type="Submit")</li><li>pulsanti per riportare il modulo web al suo stato originale (Type="Reset")</li><li>campi per il caricamento dei file sul server (Type="File)</li><li>pulsanti immagine (Tipo="Immagine")</li> </ol>L'input 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, per impostazione predefinita verrà creato un campo di testo.<h3>Esempi di form creati su Input con valori differenti per Type</h3> <h3>Altri attributi del tag Input ed esempi del loro utilizzo</h3>Considera a cosa servono gli altri attributi:<ol><li>Nome: se i dati devono essere inviati allo script del programma gestore, è necessario specificare un parametro per l'attributo Nome. Sotto questo nome, i dati inviati dal modulo appariranno nel programma di gestione delle informazioni.</li><li>Dimensione: 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 Size non è specificato, la larghezza sarà di default a 24 caratteri.</li><li>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 quelli che verranno indicati, non potrai entrare nel campo</li><li>Valore: con esso puoi impostare esattamente cosa verrà scritto per impostazione predefinita nel campo o sul pulsante di invio dati</li><li>Checked è un attributo flag che può essere inserito nell'Input per i radio button (radio) o per le checkbox (checkbox). In questo caso, questo radio button o checkbox sarà attivo al caricamento della pagina con il webform (avranno già un segno di spunta)</li> </ol>Ora diamo un'occhiata a tutto esempi di form con Input. L'aspetto del campo di testo è simile all'aspetto del campo della password, quindi prenderemo in considerazione solo l'opzione di creazione del testo, ad esempio, per inserire un indirizzo e-mail:<img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-44-45.png' width="100%" loading=lazy loading=lazy>Ora diamo un'occhiata alla creazione di un modulo Web con pulsanti di opzione (Radio):<img src='https://i2.wp.com/ktonanovenkogo.ru/image/26-06-201323-45-36.png' width="100%" loading=lazy loading=lazy>Si noti che questo modulo utilizza il tag Input due volte, una volta per creare ciascuno dei due pulsanti di opzione. Inoltre, ognuno di essi contiene <a href="https://sukachoff.ru/it/programmy/chto-takoe-dom-html-osnovy-raboty-s-dom-v-javascript-vybor-elementov-po/">Attributo nome</a> con lo stesso valore (resultat), ma il valore di Value è diverso (YES 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à da quale pulsante di opzione è stato selezionato.Considera l'esempio della creazione di un modulo Web con caselle di controllo (Casella di controllo):<img src='https://i1.wp.com/ktonanovenkogo.ru/image/26-06-201323-46-30.png' width="100%" loading=lazy loading=lazy>Le caselle di controllo differiscono dai pulsanti di opzione per la possibilità di selezionare più opzioni contemporaneamente. 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 situato accanto a questa casella di controllo verrà inviato al gestore ).<h2>Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda: elenchi a discesa, aree di testo e altri elementi del modulo web</h2>Per cominciare, voglio ricordarti un po 'cosa sono, infatti, i moduli web e perché sono necessari nelle pagine del sito. Sono progettati principalmente per ripetere gli elementi disponibili in qualsiasi sistema operativo in una forma intuitiva: 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 del modulo Html, capiscono che devono fare clic su di esso.Inoltre, tutti i suoi elementi costitutivi (come Select, Option, Textarea, Label, Fieldset, Legend) sono dei blank 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 per visualizzare lo stesso elemento in <a href="https://sukachoff.ru/it/vosstanovlenie/udalenie-parolei-v-brauzere-ochistka-kesha-raznyh-brauzerov-universalnyi/">diversi browser</a> possono differire leggermente l'uno dall'altro, ma, di regola, non in modo significativo.Quello. 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 sulle pagine del sito?In linea di principio, per lo stesso scopo per cui vengono utilizzati elementi simili in <a href="https://sukachoff.ru/it/internet/vidy-operacionnyh-sistem-i-ih-kratkaya-harakteristika-operacionnye-sistemy/">sistemi operativi</a>— trasferimento di dati da parte dell'utente. Nel caso dei moduli, i dati dell'utente vengono trasmessi al server, dove vengono elaborati <a href="https://sukachoff.ru/it/windows/skanirovanie-shtrih-koda-onlain-skanirovanie-qr-kodov-na-androide-s/">programma speciale</a>(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 <a href="https://sukachoff.ru/it/windows/nastroika-korporativnoi-pochty-na-telefone-kak-polzovatsya-korporativnym-adresom-elektronnoi-pochty/">e-mail</a> all'indirizzo specificato nell'attributo Action del tag Form. Quando spedito da <a href="https://sukachoff.ru/it/virusy/parser-kontenta-vnedrenie-parsinga-xml-yml-failov-kak-vygruzit-tovary-v/">dati html</a> all'e-mail dell'utente che compila i campi, dopo aver cliccato sul pulsante invia dati, il <a href="https://sukachoff.ru/it/virusy/pochtovaya-programma-bat-nastroika-pochtovoi-programmy-the-bat/">programma di posta</a> utilizzato sul suo computer per impostazione predefinita.Il tag Form di apertura dovrebbe quindi assomigliare a questo: <form action="mailto:qwertydmitriy@gmail.com" enctype="text/plain"> <h3>Seleziona e Opzione sono tag a discesa</h3>Tutti gli elementi del modulo Web che creano campi con elenchi a discesa sono formati allo stesso modo. Innanzitutto, il contenitore della casella combinata viene definito utilizzando i tag Html Select di apertura e chiusura. E poi, all'interno di questo contenitore, vengono creati contenitori separati con elementi (elementi) di questo elenco. Questo viene fatto con l'apertura e la chiusura dei tag Option.Si scopre qualcosa del genere:<img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-21-18.png' width="100%" loading=lazy loading=lazy>Ma questo è un design semplificato, perché Seleziona e Opzione hanno una serie di attributi, che definiscono le proprietà e <a href="https://sukachoff.ru/it/windows/telefon-soni-na-2-karty-obzor-smartfona-sony-xperia-xz2-ochen-dorogoi-i-moshchnyi-yaponskii/">aspetto</a> campo elenco a discesa da creare.<ol><li>Nome: devi fornire un nome univoco per questo elemento del modulo Web creato utilizzando Seleziona. Questo nome verrà passato al server nel programma del gestore dati come nome per la variabile. Il valore dell'attributo Value (impostato in Opzione per ogni elemento) dell'elemento dell'elenco a discesa selezionato dall'utente verrà passato come valore di questa variabile.</li><li>Dimensione: con esso puoi impostare il numero di elementi visualizzati. In altre parole, utilizzando Dimensione, è possibile impostare l'altezza dell'elenco, misurata in numero di righe visualizzate. Se non si specifica esplicitamente il valore Size nel tag Select, verrà utilizzata l'altezza predefinita dell'elenco a discesa e sarà diversa se l'attributo Multiple è assente o presente nel Select: <ol><li>Se Multiplo è presente in Seleziona, l'altezza dell'elenco a discesa nel modulo Web sarà per impostazione predefinita uguale al numero dei suoi elementi. Quelli. verranno visualizzati tutti gli elementi nell'elenco a discesa a selezione multipla. Vedere l'esempio plurale di seguito. Se l'attributo Dimensione in Seleziona è impostato su un valore inferiore al numero di elementi, sulla destra verrà visualizzata una barra di scorrimento.</li><li>Se non è presente Multiplo in Seleziona, l'altezza dell'elenco a discesa nel modulo Web verrà impostata per impostazione predefinita su una riga. Quelli. sarà visibile solo una riga e gli elementi rimanenti saranno disponibili solo premendo il pulsante dell'ascensore (a destra). Vedere l'esempio di seguito</li> </ol></li><li>Multiplo: l'attribuzione di questo attributo nel tag Seleziona ti consentirà di creare un elenco a discesa con la possibilità di selezionare più elementi contemporaneamente. Maggiori informazioni su questo attributo di seguito.</li> </ol>I moduli con elenchi a discesa possono essere divisi in due opzioni. Nella prima opzione è possibile selezionare un solo elemento (linea) del campo con un elenco a discesa, nella seconda opzione, tenendo premuto Ctrl o Maiusc, è possibile selezionare più elementi disponibili contemporaneamente.In questo caso, nella seconda opzione, i dati su tutti i punti selezionati verranno inviati al server. L'elenco a discesa che verrà creato è determinato dalla presenza o dall'assenza dell'attributo Multiple nel tag Select.Multiple è specificato in Select senza un parametro, perché si scrive semplicemente Multiple e basta. Se è presente, verrà creato un modulo Web con elenco a discesa con più opzioni di selezione (tenendo premuto Ctrl o Maiusc).Una variante del campo con un elenco a discesa, in cui ci sarà possibilità di scelta multipla, avrà un aspetto simile a questo:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-23-55.png' width="100%" loading=lazy loading=lazy>A destra è riportato un esempio di modulo Web a discesa a selezione multipla basato sul codice sopra. Come puoi vedere, tenendo premuto Ctrl o Maiusc puoi selezionare più elementi contemporaneamente.Se non è presente l'attributo Multiple nel tag Select, è possibile selezionare solo un elemento di questo elenco a discesa (riga).<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-25-25.png' width="100%" loading=lazy loading=lazy>Un esempio in cui è possibile selezionare solo un elemento può essere visto qui:Etichetta Seleziona Legenda del sito Web selezionato<h3>Attributi tag opzione</h3> <img src='https://i2.wp.com/ktonanovenkogo.ru/image/27-06-20130-36-11.png' width="100%" loading=lazy loading=lazy>Nell'elenco a discesa creato (utilizzando Seleziona e Opzione), puoi aggiungere qualcosa come separatori con l'intestazione del gruppo, che differirà dal resto delle voci di menu nello stile del carattere.Per creare un gruppo dagli elementi dell'elenco a discesa, è necessario racchiuderli nei tag di apertura e chiusura del modulo Optgroup e nel tag di apertura Optgroup, specificare l'attributo Label, come parametro di cui sarà necessario inserire il nome del gruppo desiderato.Ad esempio in questo modo:<img src='https://i1.wp.com/ktonanovenkogo.ru/image/27-06-20130-38-10.png' width="100%" loading=lazy loading=lazy>Seleziona etichetta Legenda del sito Web SelectED <h2>Textarea: creazione di un campo di testo in un modulo</h2>C'è un altro elemento del modulo web che non abbiamo considerato: Textarea (un campo con la possibilità di inserire testo multilinea). Viene creato utilizzando un tag Textarea Html accoppiato. Inoltre, è possibile trasferire il testo in una nuova riga al suo interno e verrà trasmesso al server, tenendo conto dei trasferimenti effettuati.Quindi, per creare un campo di testo multilinea, devi scrivere una Textarea di apertura e di chiusura, e tra di esse puoi aggiungere del testo che sarà visibile quando la pagina con il web form verrà caricata. L'utente può quindi cancellare questo testo e scrivere il proprio. <form> <textarea rows="3" cols="15" name="textt">Cosa puoi dire di te 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 di cose che il tag Label è progettato per risolvere. Ti consente di rendere cliccabile il testo accanto all'elemento del modulo web, il che è senza dubbio migliorare l'usabilità.

Ma come legare Elemento HTML forme e testo? Per fare ciò, è necessario aggiungere un ID con un parametro univoco all'attributo e il testo deve essere racchiuso tra i tag Label di apertura e chiusura. E non è tutto. Nel tag Label di apertura, devi scrivere l'attributo For, il cui parametro deve essere esattamente uguale all'attributo ID nel tag Html dell'elemento form. Si scopre qualcosa del genere:

Come puoi vedere, ora, grazie all'uso di Label, gli elementi del modulo Web possono essere attivati non solo facendo clic su di esso, ma anche facendo clic sul testo situato accanto ad esso.

Fieldset e legenda: 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, ad es. 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, devi subito dopo il Fieldset di apertura scrivere una costruzione dalla Legenda di apertura e di chiusura, tra le quali devi 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

Potresti essere interessato

Seleziona, Opzione, Area di testo, Etichetta, Fieldset, Legenda - Tag HTML moduli a discesa e casella di testo
Annunci 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
Cos'è Html Hypertext Markup Language e come elencare tutti i tag nel validatore W3C
Come incollare Collegamento HTML e un'immagine (foto) - tag IMG e A
Tabelle in Html - Tag Table, Tr e Td, oltre a Colspan, Cellpadding, Cellspacing e Rowspan per crearle
Tag Font (viso, dimensione e colore), Blockquote e Pre - formattazione del testo deprecata in puro HTML (senza utilizzare CSS)
Come creare un collegamento ipertestuale (A, Href, bersaglio vuoto), come aprirlo in una nuova finestra sul sito, oltre a rendere l'immagine un collegamento nel codice Html

Tag HTML che definiscono i moduli HTML sul sito

Realizziamo siti web e singole pagine su internet per comunicare con i visitatori.

Moduli HTML sono utilizzati per registrare i visitatori sul sito, per sondaggi e votazioni interattive, consentono di inviare messaggi, effettuare acquisti, e così via. HTML Il modulo viene creato per uno scopo: raccogliere e quindi trasferire informazioni per l'elaborazione a uno script di programma o tramite e-mail.

Esempio di modulo HTML | Entra nel sito

Tag, attributi e valori

- determinare la forma.
name="" - definisce il nome del modulo.
method="" - determina come i dati vengono inviati dal modulo. Valori: "get" (predefinito) e "post" . Il metodo "post" è più comunemente utilizzato, in quanto consente di trasferire grandi quantità di dati.
action="" - determina l'url con cui i dati vengono inviati per l'elaborazione. Nel nostro caso - enter_data.php ..
- definire elementi del modulo come pulsanti, interruttori, campi di testo per l'inserimento dei dati.
type="text" - definisce un campo di testo per l'immissione dei dati.
type="password" - definisce un campo per l'inserimento di una password, mentre il testo viene visualizzato come asterischi o cerchi.
type="checkbox" - definisce un pulsante di opzione.
type="hidden" - definisce un elemento form nascosto - usato per passare Informazioni aggiuntive al server.
size="25" - lunghezza del campo di testo in caratteri.
maxlength="30" - il numero massimo consentito di caratteri di input.
value="" - definisce il valore che verrà inviato per l'elaborazione se si riferisce a pulsanti di opzione o pulsanti di opzione. Il valore di questo attributo come parte di un campo di testo o pulsante verrà mostrato come, ad esempio, John o Login nell'esempio precedente.

Esempio di modulo HTML | Commenti sul sito

Esempio di modulo HTML

Tag, attributi e valori

action="http://site/comments.php" - determina l'URL a cui verranno inviati i dati dal modulo.
id="" - definisce il nome, identificatore dell'elemento del modulo.
name="" - definisce il nome dell'elemento del form.
- definire un campo di testo nel modulo.
cols="" - determina il numero di colonne del campo di testo del modulo.
rows="" - Specifica il numero di righe per il campo di testo del modulo.

Se tra inserisci il testo, verrà mostrato all'interno della casella come esempio che è facile da rimuovere.

Esempio di modulo HTML | Menu `A tendina

Moduli HTML

Tag, attributi e valori

- definire un elenco con elementi tra cui scegliere.
size="" - determina il numero di posizioni dell'elenco visibili. Se il valore è 1 , abbiamo a che fare con un elenco a discesa.
- definire le posizioni (punti) della lista.
value="" - contiene il valore che verrà inviato dal modulo all'URL specificato per l'elaborazione.
selected="selected" - seleziona l'elemento dell'elenco come esempio.

Esempio di modulo HTML | Elenco con barra di scorrimento

Aumentando il valore dell'attributo size="" otteniamo una lista con una barra di scorrimento:

Moduli HTML

Per questa opzione, utilizziamo il flag multiple="multiple", che rende possibile selezionare più elementi. La sua assenza consente di selezionare un solo elemento.

type="submit" - definisce un pulsante.

type="reset" - definisce un pulsante di ripristino.

value="" - definisce l'etichetta sul pulsante.

Vedi inoltre:

L'elenco a discesa HTML più semplice è facile da creare utilizzando il tag select. Questo è un tag contenitore, i tag delle opzioni sono nidificati al suo interno: sono quelli che definiscono gli elementi dell'elenco.

Esistono diverse opzioni per gli elenchi che possono essere creati utilizzando il tag select: un elenco a discesa (le opzioni scendono dopo aver fatto clic sul campo principale o passandoci sopra con il mouse) e un elenco a selezione multipla - in cui l'utente può selezionare diversi elementi . I primi sono più comuni, sono un elemento significativo della navigazione dei siti moderni. Un elenco a discesa a selezione multipla può essere utilizzato, ad esempio, nei cataloghi in cui è necessario selezionare diverse caratteristiche del prodotto.

È possibile modificare l'aspetto e le proprietà degli elenchi utilizzando attributi generici e speciali.

selezionare gli attributi del tag

1. Multiple - imposta la scelta multipla.

2. Dimensione: imposta il numero di righe visibili nell'elenco, ovvero l'altezza. E qui tutto dipende dalla presenza o meno dell'attributo multiplo. Se sì, e non specifichi la dimensione, se ce ne sono più, l'utente vedrà tutto opzioni possibili selezione, se non ci sono multipli, verrà mostrata solo una riga e il visitatore può leggere il resto quando fa clic sull'icona dell'ascensore sul lato destro. Se l'altezza della dimensione è impostata ed è inferiore al numero di opzioni, sulla destra verrà visualizzata una barra di scorrimento.

3. Nome - nome. L'elenco a discesa può farne a meno, ma potrebbe essere necessario interagire con il programma gestore sul server. Di norma, il nome è ancora indicato.

Il tag select non ha attributi obbligatori, a differenza del tag option.

Attributi dei tag delle opzioni nidificati

Selezionato: progettato per selezionare un elemento dell'elenco. L'utente sarà in grado di selezionare più di un elemento se l'attributo multiplo è impostato (vedi sopra).
Valore - valore. Questo attributo è obbligatorio. Il server Web deve comprendere quali elementi dell'elenco sono stati selezionati dall'utente.
etichetta. Questo attributo può essere utilizzato per accorciare gli elementi dell'elenco che sono troppo lunghi. Ad esempio, sullo schermo verrà visualizzato "Milano", invece di quello specificato nell'opzione tag "Milano è il capoluogo della Lombardia. Nord Italia". Questo attributo viene utilizzato anche per raggruppare elementi in un elenco.

Per quanto riguarda la larghezza dell'elenco, per impostazione predefinita corrisponde alla lunghezza del testo più largo nell'elenco. Naturalmente, la larghezza può essere modificata utilizzando gli stili HTML.

Elenco a discesa in altri modi

Si può fare con Aiuto CSS, ad esempio, verrà visualizzato un elenco quando passi il mouse su un elemento della pagina. JavaScript offre eccellenti possibilità per la creazione di elenchi, il cui lavoro è semplificato libreria jquery. Un elenco a discesa collegato tramite questa libreria può essere molto complesso, ad esempio a cascata. Cioè, quando selezioni un elemento in un elenco, viene visualizzato il seguente elenco, ad esempio, c'è una voce di menu "Abbigliamento femminile" (al passaggio del mouse, quindi quando selezioni uno dei tipi, ad esempio "Capispalla", un elenco con elementi eliminati: giacche, parka, cappotti, cappotti corti, pellicce, ecc.

Abbiamo brevemente elencato i modi principali in cui è possibile creare un elenco a discesa. Naturalmente, ci sono molte sfumature in e in JavaScript che ti consentono di modificare la funzionalità e l'aspetto degli elenchi.

Materiali tematici: