Eventi a discesa html php css. Creiamo eleganti elenchi a discesa. HTML semplice, menu a discesa CSS

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.

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

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.

Tag di modulo e 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 sorta di contenitore per la loro creazione. Questo tag ha una serie di attributi obbligatori e facoltativi:

  1. Nome – un nome univoco che deve essere specificato se il file Html in cui stai facendo qualcosa utilizzerà diversi moduli web
  2. Azione – un attributo obbligatorio che indica il percorso dello script a cui verranno trasferiti i dati per l'ulteriore elaborazione
  3. Metodo: con esso puoi modificare il metodo di trasferimento dei dati da questo modulo web allo script del file del gestore. Se non lo specifichi, per impostazione predefinita verrà utilizzato il metodo Get, che, infatti, è destinato principalmente a variabili e messaggi brevi, oltre alla trasmissione aperta di dati tramite la barra degli indirizzi del browser. Per trasferire i dati del modulo allo script del gestore, è comunque meglio usare Metodo POST, pensato appositamente per la trasmissione di messaggi di testo in modalità privata

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:

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

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.

Esempi di moduli creati su Input con valori diversi per Tipo

Altri attributi dei tag di input ed esempi del loro utilizzo

Vediamo a cosa servono gli altri attributi:

  1. Nome: se i dati devono essere inviati allo script del programma del gestore, è necessario specificare un parametro per l'attributo Nome. Con questo nome i dati inviati dal modulo verranno visualizzati nel programma del processore di informazioni.
  2. Dimensione: viene utilizzato per impostare la dimensione del campo del modulo web in fase di creazione. Il valore è indicato nel numero di caratteri che possono rientrare in questo campo. Se la dimensione non è specificata, la larghezza verrà impostata su 24 caratteri per impostazione predefinita
  3. Maxlength: per impostazione predefinita, il numero di caratteri che possono essere inseriti in un modulo Html non è limitato, ma utilizzando Maxlength è possibile impostare questa limitazione. Non potrai inserire più caratteri di quelli indicati nel campo.
  4. Valore: puoi usarlo per specificare cosa verrà scritto esattamente per impostazione predefinita nel campo o sul pulsante di invio dei dati
  5. Selezionato è un attributo flag che può essere inserito nell'Input per i pulsanti di opzione o le caselle di controllo. In questo caso, questo pulsante di opzione o casella di controllo sarà attivo quando verrà caricata la pagina con il modulo web (avranno già un segno di spunta)

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

Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda: elenchi a discesa, aree di testo e altri elementi di moduli web

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:

Seleziona e Opzione: tag dell'elenco a discesa

Tutti gli elementi del modulo Web che creano campi di elenco a discesa vengono formati allo stesso modo. Innanzitutto, il contenitore della casella combinata viene impostato utilizzando il tag Html Select di apertura e chiusura. E poi, all'interno di questo contenitore, vengono creati contenitori separati con gli elementi (elementi) di questo elenco. Questo viene fatto utilizzando i tag Opzione di apertura e chiusura.

Risulta qualcosa del genere:

Ma questo è un design semplificato, perché Select e Option hanno una serie di attributi, che definiscono le proprietà e l'aspetto del campo dell'elenco a discesa creato.

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

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

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

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

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

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

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

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

Etichetta Seleziona Legenda del sito selezionato

Attributi dei tag di opzione


Nell'elenco a discesa creato (utilizzando Seleziona e Opzione), puoi aggiungere qualcosa come separatori con intestazioni di gruppo, che differiranno 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 aggiungere l'attributo Etichetta, come parametro di cui dovrai inserire il nome desiderato del gruppo.

Ad esempio in questo modo:

Seleziona etichetta
Legenda del sito web SelectED

Textarea: creazione di un campo di testo su un modulo

C'è un altro elemento dei moduli web che non abbiamo considerato: Textarea (un campo con la possibilità di inserire testo su più righe). Viene creato utilizzando il tag Html accoppiato Textarea. Inoltre, puoi racchiudere il testo in una nuova riga e verrà trasmesso al server tenendo conto delle traduzioni effettuate.

Quindi, per creare un campo di testo multilinea, è necessario specificare un'area di testo di apertura e una di chiusura, e tra di esse è possibile aggiungere del testo che sarà visibile quando verrà caricata la pagina con il modulo web. L'utente può quindi cancellare questo testo e scriverne uno proprio.

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.

Fieldset e Legend: suddivisione del modulo in parti

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 subito dopo il Fieldset di apertura scrivere una costruzione composta da una Legenda di apertura e una 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
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
Cos'è il linguaggio di markup ipertestuale Html e come visualizzare un elenco di tutti i tag nel validatore W3C
Come inserire un collegamento e un'immagine (foto) nei tag HTML - IMG e A
Tabelle in Html - Tag Table, Tr e Td, oltre a Colspan, Cellpadding, Cellspacing e Rowspan per crearle
Carattere (viso, dimensione e colore), Blockquote e tag Pre: formattazione del testo legacy in HTML puro (non vengono utilizzati CSS)
Come creare un collegamento ipertestuale (A, Href, Target vuoto), come aprirlo in una nuova finestra sul sito e anche trasformare un'immagine in un collegamento in codice Html

Negli ultimi due anni, lo sviluppo di applicazioni web (siti web) ha fatto grandi progressi e ciò che usavamo prima per creare un sito web è già obsoleto o sono comparsi metodi più recenti.

In precedenza, per creare un elenco a discesa in html ( in inglese. - cadere in picchiata), abbiamo appena usato

In questo esempio tagghiamo

Nel browser appare così:

Raggruppamento delle voci di menu

Diamo un'occhiata al seguente tag , che viene utilizzato per raggruppare i dati correlati in un elenco a discesa nome = "bianco&nero" > etichetta = "Lista bianca" >

In questo esempio, abbiamo evidenziato 2 gruppi con il tag . L'attributo label dell'elemento specifica il nome del gruppo selezionato, scritto in grassetto:

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

</span> Un esempio di utilizzo dell'attributo disabilitato di un tag HTML <optgroup><span>

Il risultato del nostro esempio:

Disabilita elenco e selezione multipla

</span> Attributi di tag disabilitati e multipli <select><span>

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

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

Nel browser appare così:

Area di testo

Il risultato del nostro esempio:

Disabilitare l'area di testo

Per analogia con gli elementi tag precedentemente discussi



tipo = "invia" nome = "submitInfo" valore = "submit" > !}

In questo esempio abbiamo creato due aree di testo (l'elemento