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:
- Nome – un nome univoco che deve essere specificato 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 per l'ulteriore elaborazione
- 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:
- campi di testo a riga singola (Type="Text")
- campi per l'inserimento della password (Type="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 file sul server (Type="File)
- 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:
- 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.
- 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
- 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.
- Valore: puoi usarlo per specificare cosa verrà scritto esattamente per impostazione predefinita nel campo o sul pulsante di invio dei dati
- 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:
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
Soprattutto per questo articolo, ho trovato 16 esempi diversi che potrebbero essere utili durante lo sviluppo del sito web. E quindi cominciamo.
1. Elenco personalizzato
Modello HTML che ti consente di personalizzare i tuoi colori per l'elenco a discesa.
2. Realizzato con CSS3/JavaScript
Scritto in CSS3 e JavaScript. Elenco a discesa normale.
3. Stile: stazioni della metropolitana
Elenco a discesa trasparente con lo stile delle stazioni della metropolitana.
4. Irritante. Scritto in SCSS e jQuery
5. Per elenchi di emissione lunghi
Una soluzione eccellente per i menu a discesa lunghi.
Un menu a discesa scritto in puro CSS senza utilizzare script.
Perfetto per i menu laterali su un sito Web per mostrare visivamente le categorie su un sito Web.
8. Elegante menu delle impostazioni utente
9. Elenco a discesa CSS3
Realizzato in stile UI, si adatterà allo stile dell'interfaccia utente del sito.
12. Selezione della bandiera
Menu a discesa nello stile di selezione del paese.
13. Semplice HTML, menu a discesa CSS
Spero che ti sia piaciuta la mia selezione. Lascia commenti, condividi la tua opinione e invia i tuoi lavori!
Come creare un elenco a discesa in html (selezione TOP 16) da bologer
Menù a tendina orizzontale utilizzato per organizzare la struttura di navigazione del sito. Il numero ottimale di livelli di nidificazione è uno o due. Minori sono i livelli di allegati, più facile sarà per un visitatore del sito trovare le informazioni di cui ha bisogno. Come creare un menu orizzontale regolare è descritto in dettaglio in.
Come creare un menu a discesa orizzontale
1. Markup HTML e stili di base per un menu a discesa con un livello di nidificazione
Il markup HTML di un menu a discesa orizzontale differisce da un menu normale in quanto si collega alla voce di elenco desiderata
- O<оl> .
Per posizionare il sottomenu rispetto al menu principale vengono dichiarati i seguenti stili:
— per un elemento di lista in cui è annidato un elenco a discesa: li (posizione: relativa;) ;
— per il menu a discesa ul (posizione: assoluta;) , nonché i valori sinistro e superiore.
Per chiarezza e facilità di formattazione, aggiungiamo il menu principale della classe al menu principale e il sottomenu al menu a discesa.
Esistono diversi modi per nascondere un menu a discesa:
1) visualizzazione: nessuna;
2) visibilità: nascosta;
3) opacità: 0;
4) trasformazione: scalaY(0);
5) utilizzando la libreria jQuery.
Metodo 1. (visualizzazione: nessuno;)
Il menu a discesa viene nascosto utilizzando .submenu (display: none;) , al passaggio del mouse viene visualizzato utilizzando .topmenu li:hover .submenu (display: block;) .
Metodo 2. (visibilità: nascosta;)
Il menu viene nascosto utilizzando .submenu (visibility: hidden;) e mostrato utilizzando .topmenu li:hover .submenu (visibility: Visibility;) .
Metodo 3. (opacità: 0;)
Il menu viene nascosto utilizzando .submenu (opacità: 0;) e mostrato utilizzando .topmenu li:hover .submenu (opacità: 1;) . Per evitare che il menu venga visualizzato quando passi il mouse sull'area in cui si trova, aggiungi visibilità: nascosto; e, quando passi con il mouse, cambialo in visibilità: visibile; .
Metodo 4. (trasforma: scaleY(0);)
Il menu viene nascosto utilizzando .submenu (transform: scaleY(0);) e mostrato utilizzando .topmenu li:hover .submenu (transform: scaleY(1);) . Poiché la trasformazione predefinita dell'elemento avviene dal centro, è necessario aggiungere for .submenu (transform-origin: 0 0;) , ovvero dall'angolo in alto a sinistra.
Metodo 5: utilizzo di jQuery
$(".five li ul").hide(); // nasconde il menu a discesa $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* seleziona un elemento della lista che contiene un elemento con la classe .submenu e aggiungi una funzione al passaggio del mouse che mostra e nasconde il menu a discesa */);2. Menu a discesa 3D
È possibile creare effetti interessanti utilizzando le trasformazioni CSS3, ad esempio facendo apparire un menu dalle profondità dello schermo.
* (dimensionamento del riquadro: border-box; ) corpo ( margine: 0; sfondo: gradiente radiale(#BFD6E2 1px, rgba(255,255,255,0) 2px); dimensione dello sfondo: 10px 10px; ) nav ul ( stile elenco : nessuno; margine: 0; riempimento: 0; ) nav a ( display: blocco; decorazione del testo: nessuna; contorno: nessuno; transizione: .4s easy-in-out; ) .topmenu ( backface-visibility: hidden; background : rgba(255,255,255,.8); ) .topmenu > li ( display: blocco in linea; posizione: relativa; ) .topmenu > li > a ( famiglia di caratteri: "Exo 2", sans-serif; altezza: 70px; altezza linea: 70px; riempimento: 0 30px; peso carattere: grassetto; colore: #003559; trasformazione testo: maiuscolo; ) .down:after ( contenuto: "\f107"; margine sinistro: 8px; famiglia di caratteri : FontAwesome; ) .topmenu li a:hover ( colore: #E6855F; ) .submenu ( sfondo: bianco; bordo: 2px solido #003559; posizione: assoluta; sinistra: 0; visibilità: nascosta; opacità: 0; z-index : 5; larghezza: 150px; trasformazione: prospettiva(600px) ruotaX(-90°); trasformazione-origine: 0% 0%; transizione: .6s easy-in-out; ) .topmenu > li:hover .submenu( visibilità: visibile; opacità: 1; trasformazione: prospettiva (600px) rotazioneX (0 gradi); ) .submenu li a ( colore: #7f7f7f; dimensione carattere: 13px; altezza linea: 36px; imbottitura: 0 25px; famiglia di caratteri: "Kurale", serif; )
3. Menù a tendina espandibile con logo
In questo esempio, la sezione superiore della pagina contiene il logo e la navigazione del sito. Il logo può essere un'immagine o un testo. Il menu a discesa si espande gradualmente da sotto la voce dell'elenco in alto utilizzando la funzione di trasformazione CSS3.
4. Menu a discesa in espansione
Un altro esempio di menu a discesa. L'effetto di ingrandimento quando viene visualizzato il menu viene realizzato riducendo la dimensione iniziale.submenu (transform: scale(.8);) , al passaggio del mouse la dimensione aumenta a.topmenu > li:hover .submenu (transform: scale(1);) .
* (dimensionamento del riquadro: border-box;) corpo (margine: 0; sfondo: url(https://html5book.ru/wp-content/uploads/2015/10/ background54.png)) nav (sfondo: bianco; ) nav ul ( stile elenco: nessuno; margine: 0; riempimento: 0; ) nav a ( decorazione del testo: nessuna; contorno: nessuno; display: blocco; transizione: .4s easy-in-out; ) .topmenu ( text-align: centro; riempimento: 10px 0; ) .topmenu > li ( display: blocco in linea; posizione: relativa; ) .topmenu > li:after ( contenuto: ""; posizione: assoluta; destra: 0; larghezza: 1px; altezza: 12px; sfondo: #d2d2d2; superiore: 16px; box-ombra: 4px -2px 0 #d2d2d2; trasformazione: ruota(30deg); ) .topmenu > li:last-child:after ( sfondo: none; box -shadow: none; ) .topmenu > li > a ( imbottitura: 12px 26px; colore: #767676; trasformazione testo: maiuscolo; peso carattere: grassetto; spaziatura lettere: 1px; famiglia di caratteri: "Exo 2", sans-serif; ) .topmenu li a:hover ( colore: #c0a97a; ) .submenu ( posizione: assoluta; sinistra: 50%; superiore: 100%; larghezza: 210px; margine sinistro: -105px; sfondo: #fafafa ; bordo: 1px solido #ededed; indice z: 5; visibilità: nascosta; opacità: 0; trasformazione: scala(.8); transizione: .4s easy-in-out; ) .submenu li a ( imbottitura: 10px 0; margine: 0 10px; bordo inferiore: 1px solido #efefef; dimensione carattere: 12px; colore: #484848; famiglia di caratteri: "Kurale", serif; ) .topmenu > li:hover .submenu ( visibilità: visibile; opacità: 1; trasformazione: scala(1); )
5. Menu a discesa a comparsa
Menu orizzontale con mini-animazione: quando passi con il mouse sui collegamenti del menu in alto, appare un piccolo cerchio, che accompagna anche la comparsa del menu a discesa.
@import url("https://fonts.googleapis.com/css?.jpg); posizione dello sfondo: centro al centro; ripetizione dello sfondo: nessuna ripetizione; dimensione dello sfondo: copertina; altezza: 100vh; posizione: relativa; ) corpo:prima ( contenuto: ""; posizione: assoluta; sinistra: 0; fondo: 0; altezza: 100%; larghezza: 100%; sfondo: gradiente lineare(45 gradi, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( allineamento testo: centro; riempimento: 40px 0 0; ) nav ul ( stile elenco: none; margine: 0; riempimento: 0; ) nav a ( decorazione testo : nessuno; display: blocco; colore: #222; ) .topmenu > li ( display: blocco inline; posizione: relativa; ) .topmenu > li > a ( posizione: relativa; imbottitura: 10px 15px; font-family: " Kaushan Script", corsivo; dimensione carattere: 1,5 em; altezza riga: 1; spaziatura lettere: 3px; ) .topmenu > li > a:before ( contenuto: ""; posizione: assoluta; z-index: 5; sinistra: 50%; superiore: 100%; larghezza: 10px; altezza: 10px; sfondo: bianco; raggio bordo: 50%; trasformazione: traduzione (-50%, 20px); opacità: 0; transizione: .3s; ) .topmenu li:hover a:before ( trasforma: traduci(-50%, 0); opacità: 1; ) .submenu ( posizione: assoluta; z-index: 4; sinistra: 50%; superiore: 100%; larghezza: 150px; riempimento: 15px 0 15px; margine superiore: 5px; sfondo: bianco; raggio bordo: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibilità: nascosta; opacità: 0; trasformazione: Translate(-50%, 20px); transizione: .3s ; ) .topmenu > li:hover .submenu ( visibilità: visibile; opacità: 1; trasformazione: Translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; font-size: 11px; spaziatura tra lettere: 1px; riempimento: 5px 10px; transizione: .3s lineare; ) .submenu a:hover (sfondo: #e8e8e8;)
In questo articolo esamineremo gli elementi che ti consentono di creare elenchi a discesa, impareremo come formare gruppi in questi elenchi, vedremo come disabilitare elementi e persino gruppi di elenchi, familiarizzeremo con un elemento che ti consente di creare un campo di testo su più righe, che potrai successivamente utilizzare all'interno dei moduli HTML (elemento
Inoltre, abbiamo inserito all'interno del form un pulsante che serve per inviare il form (elemento con il pulsante digitare "invia modulo": type = "submit" ).
Il risultato del nostro esempio:
Descrizione comando dell'area di testo
Quindi esamineremo l'esempio finale e passeremo al compito pratico dell'articolo di questo libro di testo.
Grazie all'attributo (tag HTML
Il testo del tooltip viene nascosto quando l'utente inserisce un valore (qualsiasi carattere) nel campo di testo; se viene rimosso, il tooltip verrà nuovamente visualizzato.
Vediamo un esempio di utilizzo:
tipo = "invia" nome = "submitInfo" valore = "submit" > !}
In questo esempio abbiamo creato due aree di testo (l'elemento
Tieni presente che se un campo di testo è di sola lettura, il contenuto non può essere modificato, ma l'utente può comunque individuare, selezionare e copiare il contenuto.
Inoltre, abbiamo inserito all'interno del form un pulsante che serve per inviare il form (elemento con il pulsante digitare "invia modulo": type = "submit" ).
Il risultato del nostro esempio:
Domande e compiti sull'argomento
Prima di passare all'argomento successivo, completa il compito pratico:
- Utilizzando le conoscenze acquisite, crea il seguente modulo di offerta di lavoro:
Prima di iniziare 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 delle conoscenze dell'articolo. Se te lo sei perso, torna a studiarlo.
Dopo aver completato l'esercizio, controlla il codice della pagina aprendo l'esempio in una finestra separata per assicurarti di aver fatto tutto correttamente.
Oggi voglio presentarvi una piccola “ricetta” per creare una lista in CSS. Niente JQuery, niente CSS3: solo il buon vecchio CSS cross-browser. L'esempio è abbastanza semplice, quindi i compagni esperti potrebbero non essere interessati. Implementeremo un elenco a discesa con pulsanti social.
Quindi non parliamone a lungo, andiamo dritti al punto
HTML
Condividi questo post
- Google Plus
- In contatto con
- RSS
Ometto deliberatamente punti generali, come l'inclusione degli stili, in modo che il codice non cresca. In fondo alla pagina fornirò un collegamento alle fonti: c'è tutto.
Ciò che abbiamo in HTML è un elenco regolare e un'intestazione insolita. La sua particolarità è che è realizzato con un collegamento ipertestuale, che permette di seguire l'evento : passa il mouse, cioè guida. L'elenco a discesa funzionerà quando passi il mouse sopra il titolo.
CSS
Innanzitutto, diamo un'occhiata agli stili di base di un elenco a discesa. Ho provato a commentare ogni riga di codice per renderlo più chiaro:
/*Reimposta il riempimento*/ .droplink ul,.droplink h3,.droplink h3 a( riempimento:0;margine:0 ) /*Wrapper di base*/ .droplink ( larghezza:200px; posizione:assoluta; margine:10px 0 0 25px ) /*Stile blocco al passaggio del mouse*/ .droplink:hover( altezza:auto; background-color:#3E403D; bordo: solido 1px #3A3C39 ) /*Titolo in stato normale*/ .droplink h3 a( text-align:center ; larghezza:100%; display:blocco; imbottitura:12px 0px; colore:#999; decorazione testo:none ) .droplink h3 a img(border:none) /*Stile per il titolo al passaggio del mouse*/ .droplink:hover h3 a ( colore:#FFF; peso carattere: grassetto; posizione: assoluta )
Non c'è niente di speciale qui; abbiamo indicato la dimensione e lo stile del blocco, lo stile dell'intestazione e, per entrambi gli elementi, i loro stili quando si passa il cursore. Andare avanti:
/*Nascondi l'elenco senza passare il mouse*/ .droplink ul( list-style:none; display:none ) /*Visualizza l'elenco al passaggio del mouse*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li(visualizzazione:blocco)
Questo codice è più interessante e mostra come si comporta menu `A tendina quando si passa il cursore. In condizioni normali costa visualizzazione: nessuno, cioè non viene visualizzato. Quando ci si posiziona sopra, lo mostriamo come un blocco. Questo è l'intero segreto. Ora decoriamo un po’ gli elementi della lista e inseriamo le icone:
/*Stile elemento elenco*/ .droplink li a( imbottitura:5px 12px 4px 34px; margine:1px; colore sfondo:#484A47; display:blocco; colore:#FFF; decorazione testo:none; dimensione carattere:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Stile elemento al passaggio del mouse*/ .droplink li a:hover( background-color:#999 ) /*Icone*/ .facebook a (immagine-di-sfondo: url("icons/facebook.png")) .twitter a (immagine di sfondo:url("icons/twitter.png")) .vk a (immagine di sfondo:url("icons/vk.png")) . rss a (immagine-di-sfondo:url("icons/rss.png")) .gplus a (immagine-di-sfondo:url("icons/gplus.png"))
Questo è tutto, in realtà. L'elenco a discesa è pronto e sembra piuttosto carino. Puoi progettare gli elementi a tua discrezione, aggiungere angoli arrotondati e altri fronzoli.
Se vuoi che l'elenco si “sovrappone” al testo sottostante quando passi il mouse, guarda di lato z-indice.
Se qualcosa non è chiaro o non funziona, chiedi nei commenti o usa il pulsante “Invia messaggio”, è lì —>