Nell'ultima lezione abbiamo studiato il concetto di forma. Il suo compito principale è combinare moduli di input di un certo tipo. Ad esempio, un modulo può combinare i dati di un questionario, un test e così via. In questo tutorial impareremo come creare i campi di input da soli!
Responsabile della compilazione del modulo etichetta , ha un attributo type che ti permette di creare determinati campi compilabili: campi di testo, pulsanti di opzione, checkbox, elenchi, pulsanti. Ripeto, tutti gli elementi sopra elencati sono disponibili in un solo tag - .
Etichetta in HTML
- si tratta di un unico tag con il quale è possibile creare alcuni elementi del documento (campi di testo, pulsanti di opzione, checkbox, elenchi, pulsanti), che si intendono compilare direttamente nella pagina html.Qui di seguito esempio lavoro in HTML
Etichetta ci sono alcuni valori di attributo molto importanti.
nome- un attributo che dovrebbe essere sempre impostato per un elemento in modo che il gestore (script) capisca quale nome di input elabora.
Quindi lo script di elaborazione capirà che si tratta di due campi diversi.
genere- questo attributo è responsabile della specifica del tipo di campo. Come accennato in precedenza, con un certo tipo, l'input può diventare un pulsante di opzione, una casella di controllo, un elenco, un pulsante, un campo di testo.
taglia- un attributo che specifica la dimensione del campo di testo quando il tipo è specificato come testo. I dati specificati vengono presi come larghezza del campo.
Etichetta
L'attributo type per l'input
Ora diamo un'occhiata più da vicino attributo tipo e i suoi significati:testo- il valore dell'attributo indica che verrà visualizzato un normale campo di testo, inizialmente disponibile per la modifica.
attributo valore non richiesto, può essere omesso del tutto. Tuttavia, se è necessario specificare un valore predefinito che verrà inizialmente visualizzato nel campo, è necessario compilarlo.
parola d'ordine- trasforma l'input in un campo password. La differenza rispetto al testo è che i dati inseriti verranno visualizzati come asterischi e, dopo aver compilato l'intero modulo, il browser capirà che la password è in questo campo e chiederà se deve essere salvata.
Invia- un valore simile dell'attributo type definisce l'input come un pulsante, quando premuto, verrà elaborato un determinato script (imparerai cos'è uno script in seguito, dopo aver studiato i linguaggi PHP e JavaScript). Il pulsante viene utilizzato per inviare dati dai moduli a un gestore scritti, ad esempio, nelle lingue di cui sopra. Ce ne sono altri, ma ho elencato i più popolari.
Ripristina- questo è un altro tipo di pulsante che ripristina tutti i valori nel modulo. dopo averlo premuto, dovranno essere riempiti di nuovo.
Radio- Questo valore crea un pulsante di opzione, ovvero un pulsante di opzione. Viene utilizzato, di regola, per valori con un numero limitato di opzioni. Ad esempio, scegli il sesso, l'intervallo con l'età, ecc. come segue:
L'attributo type è impostato su radio - questo è un pulsante di opzione. Il valore del valore viene scritto nella frase o nella parola che si desidera ricevere se qualcuno ha selezionato un pulsante di opzione specifico e ha inviato i dati.
Ci sono altri casi in cui l'utente deve selezionare più risposte. In questo caso, non è più un pulsante di opzione (accetta solo un'opzione), ma una casella o una casella di controllo.
casella di controlloè un campo che funziona allo stesso modo di un pulsante di opzione. L'unica differenza è che puoi selezionare diverse caselle di controllo come opzioni di risposta. Oltre che con un pulsante di opzione, se alla domanda appartengono più caselle di controllo, il loro attributo nome deve essere compilato in modo uguale di conseguenza. Il valore indicherà di conseguenza il valore del campo selezionato.
Caratteristiche dei campi di input
Qui propongo di analizzare alcuni dei problemi che potresti incontrare anche all'inizio quando lavori con l'input.Come fare in modo che l'utente selezioni immediatamente la risposta (casella di controllo o pulsante di opzione)?
C'è un unico attributo controllato per questo. Deve essere specificato alla fine del tag di ingresso. Poiché l'attributo è singolo, non ha valori. Devi solo aggiungerlo all'elemento di input. Ad esempio, come nella voce seguente:
Come posso rendere visibile il testo che spiega questa scelta davanti alla casella di controllo o al pulsante di opzione?
Per fare ciò, prima e dopo il pulsante di opzione o la casella di controllo, scrivi il tag
Di conseguenza, specifichi nel tag dell'etichetta, che si apre e si chiude, la casella di controllo stessa e le parole necessarie. E attenzione! Anche se l'utente fa clic sulla parola, la casella di controllo sarà comunque evidenziata.
Aggiungiamo "un po' di codice al nostro esempio in modo da poter esaminare i dati generati da questo modulo. L'HTML viene rivisto per aggiungere un elemento che rappresenta un testo preformattato che deve essere presentato esattamente come scritto nel file HTML.">
blocco per emettere i dati del modulo in:
Utilizzo di ingressi radio
Abbiamo già trattato i fondamenti dei pulsanti di opzione sopra. Diamo ora un'occhiata alle altre caratteristiche e tecniche comuni relative ai pulsanti di opzione che potresti aver bisogno di conoscere.
Selezione di un pulsante di opzione per impostazione predefinita
Per fare in modo che un pulsante di opzione sia selezionato per impostazione predefinita, devi semplicemente includere l'attributo selezionato, come mostrato in questa versione rivista dell'esempio precedente:
In questo caso, il primo pulsante di opzione è ora selezionato per impostazione predefinita.
Nota: se metti l'attributo selezionato su più di un pulsante di opzione, le istanze successive sovrascriveranno quelle precedenti; ovvero, l'ultimo pulsante di opzione selezionato sarà quello selezionato. Questo perché è possibile selezionare un solo pulsante di opzione in un gruppo alla volta e il programma utente deseleziona automaticamente gli altri ogni volta che uno nuovo viene contrassegnato come selezionato.
Fornire un'area di successo più ampia per i tuoi pulsanti di opzione
Negli esempi precedenti, potresti aver notato che puoi selezionare un pulsante di opzione facendo clic sul suo elemento associato che rappresenta una didascalia per un elemento in un'interfaccia utente.">
Oltre all'accessibilità, questa è un'altra buona ragione per impostare correttamente
Convalida
I pulsanti di opzione non partecipano alla convalida dei vincoli, non hanno alcun valore reale da vincolare.
Styling degli ingressi radio
L'esempio seguente mostra una versione leggermente più completa dell'esempio che abbiamo visto in tutto l'articolo, con alcuni stili aggiuntivi e con una semantica migliore stabilita attraverso l'uso di elementi specializzati. L'HTML si presenta così:
Non c'è molto di nuovo da notare qui, tranne per l'aggiunta dell'elemento utilizzato per raggruppare diversi controlli e etichette (
Il CSS coinvolto è un po' più significativo:
Html ( font-family: sans-serif; ) div:first-of-type ( display: flex; align-items: flex-start; margin-bottom: 5px; ) label ( margin-right: 15px; line-height: 32px; ) input ( -webkit-aspetto: nessuno; -moz-aspetto: nessuno; aspetto: nessuno; raggio-bordo: 50%; larghezza: 16px; altezza: 16px; bordo: 2px solido #999; transizione: 0.2s tutto lineare; contorno: nessuno; margine destro: 5px; posizione: relativo; alto: 4px; ) input:selezionato ( bordo: 6px nero pieno; ) pulsante, legenda ( colore: bianco; colore di sfondo: nero; riempimento: 5px 10px ; raggio-bordo: 0; bordo: 0; dimensione carattere: 14px; ) pulsante: passaggio del mouse, pulsante: focus ( colore: #999; ) pulsante: attivo ( colore di sfondo: bianco; colore: nero; contorno: 1px solido Nero;)
Il più notevole qui è l'uso della proprietà -moz-appearance (con i prefissi necessari per supportare alcuni browser). Per impostazione predefinita, i pulsanti di opzione (e le caselle di controllo) hanno uno stile con gli stili nativi del sistema operativo per quei controlli. Specificando l'aspetto: none , puoi rimuovere del tutto lo stile nativo e creare i tuoi stili per loro. Qui abbiamo usato un bordo insieme al raggio di confine e una transizione per creare una bella selezione radiofonica animata. Notare anche come la casella di controllo ), ( ) o opzione (
Nota di compatibilità: Se desideri utilizzare la proprietà dell'aspetto, dovresti testarla con molta attenzione. Sebbene sia supportato nella maggior parte dei browser moderni, la sua implementazione varia ampiamente. Nei browser meno recenti, anche la parola chiave none non ha lo stesso effetto su browser diversi e alcuni non la supportano affatto. Le differenze sono minori nei browser più recenti.
Si noti che quando si fa clic su un pulsante di opzione, c'è un effetto di dissolvenza in uscita/attiva piacevole e uniforme quando i due pulsanti cambiano stato. Inoltre, lo stile e la colorazione della legenda e del pulsante di invio sono personalizzati per avere un forte contrasto. Questo potrebbe non essere uno sguardo che vorresti in una vera applicazione web, ma mostra sicuramente le possibilità.
Specifiche
| Specifica | Stato | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Standard di vita HTML La definizione di" " in quella specifica. |
Standard di vita | ||||||||||||
| Chrome per Android | Edge Mobile | Firefox per Android | Opera per Android | Safari su iOS | Samsung Internet | ||||||||
| digita = "radio" | Supporto completo per ChromeSì | Supporto completo per Edge Sì | Firefox Pieno supporto Sì | IE Pieno supporto Sì | Opera Supporto completoSì | Safari Pieno supporto Sì | WebView Android Pieno supporto Sì | Chrome Android Pieno supporto Sì | Edge Mobile Pieno supporto Sì | Firefox Android Pieno supporto 4 | Opera Android Pieno supporto Sì | Safari iOS Pieno supporto Sì | Samsung Internet Android? |
Leggenda
Supporto totale Supporto totale Compatibilità sconosciuta Compatibilità sconosciutaGuarda anche
- elemento viene utilizzato per creare controlli interattivi per moduli basati sul Web al fine di accettare dati dall'utente; è disponibile un'ampia varietà di tipi di dati di input e widget di controllo, a seconda del dispositivo e dell'agente utente."> e gli elementi."> HTMLInputElement interfaccia che lo implementa.
- o a
Grazie a CSS3, possiamo ottenere quasi tutti gli effetti di cui abbiamo bisogno sullo schermo. In questo tutorial, vedremo come possiamo definire lo stile delle caselle di controllo e dei pulsanti di opzione.
Input:checked + label:before ( contenuto: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )
Ora quando premiamo il pulsante di opzione, dovrebbe apparire un piccolo cerchio bianco nel cerchio grigio principale.
Caselle di controllo per lo stile
Ora passiamo allo stile delle caselle di controllo. Innanzitutto, nascondiamo di nuovo l'elemento:
Input ( display: nessuno; )
Dal momento che stiamo rimuovendo la visualizzazione della casella di controllo predefinita con lo pseudo-elemento :before, aggiungeremo semplicemente un bordo:
Etichetta della casella di controllo:prima ( raggio-bordo: 3px; )
Quindi aggiungiamo il simbolo del segno di spunta che apparirà quando si fa clic sulla casella di controllo. Facciamolo per analogia con il circolo radiofonico. Dobbiamo convertire il carattere HTML questa volta? ✓.
Input:checked + label:before ( contenuto: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; altezza della linea: 15px; )
Alla fine, questo è ciò che dovremmo ottenere:
Risultati
In questo tutorial, abbiamo esaminato un metodo che puoi utilizzare per visualizzare i pulsanti di opzione e le caselle di controllo di cui hai bisogno. Poiché abbiamo utilizzato CSS3, questa tecnica funzionerà solo nei browser che supportano questa tecnologia. Per ottenere risultati simili nei browser meno recenti, è possibile utilizzare l'apposito
Continuiamo l'argomento dell'ultima lezione e in esso abbiamo esaminato il processo di creazione di campi di input di testo regolari. Oggi, in continuazione, impareremo come creare un altro elemento del modulo: i pulsanti di opzione. Tali pulsanti vengono utilizzati quando è necessario specificare una delle opzioni per rispondere a una scelta, ad esempio "sì" o "no", e non in quanto non entrambe le opzioni. Creiamo tali pulsanti di opzione, prendiamo il risultato finale dell'ultima lezione e dopo i campi ingresso crea un nuovo paragrafo e scrivi un altro tag e specificare i seguenti attributi al suo interno.
Il primo è il tipo di campo tipo= Radio- un attributo che specifica il tipo di pulsante. Il secondo è un attributo che dà un nome al nostro pulsante. nome="volta". Questo valore verrà inviato al nostro gestore quando il visitatore fa clic sul pulsante di invio. Cioè, se questo pulsante di opzione è attivo, questo valore verrà inviato al gestore valore="sì". Di conseguenza, abbiamo ottenuto la seguente riga. Inserendo questa riga nell'editor e aggiornando il browser, otteniamo un semplice pulsante di opzione.
HTML
Naturalmente, ora il pulsante di opzione non sembra del tutto chiaro, non ci sono domande e opzioni di risposta, ovvero non è chiaro di cosa sia responsabile. Pertanto, creeremo prima un'opzione di risposta utilizzando il tag
HTML
Ora il nostro pulsante ha già un'opzione di risposta (il suo valore). Ora creiamo un altro pulsante di opzione con la risposta opposta "no". Questo è fatto molto semplicemente, copia il pulsante già creato e cambia la parola "sì" in "no" in esso e nell'attributo valore valore impostato no . È importante essere consapevoli del fatto che i nomi dei pulsanti di opzione devono rimanere gli stessi, poiché ciò mostra al browser che i due pulsanti appartengono allo stesso gruppo e che si escludono a vicenda.
HTML
Qui abbiamo il secondo pulsante di opzione e se facciamo clic su uno dei pulsanti, viene evidenziato il pulsante che selezioniamo. Cioè, si escludono a vicenda, e questo accade perché hanno lo stesso nome. Se imposti due nomi diversi, sarà possibile selezionare due pulsanti contemporaneamente, il che diventa logicamente non del tutto corretto.
Bene, ora poniamo la domanda stessa per i nostri pulsanti, prima dei nostri pulsanti creiamo un altro paragrafo con la nostra domanda.
HTML
Bene, ora un altro momento più interessante, che può tornare utile quando si utilizzano i pulsanti di opzione è l'attivazione automatica del pulsante. Se aggiorni la pagina ora, allora non un pulsante è attivo per te. Inizialmente possiamo specificare quale pulsante sarà attivo, per questo utilizziamo un attributo speciale, aggiungendolo al pulsante, verrà attivato di default. E questo attributo è chiamato controllato , che significa "contrassegnato" in inglese. Questo attributo è piuttosto insolito e non richiede un valore.
Questo è tutto con i pulsanti di opzione. Nella somma di due lezioni, abbiamo ottenuto il seguente codice:
HTML
La personalizzazione degli elementi del modulo è probabilmente una delle cose più divertenti da fare nel Web design. Se questa attività sia giustificata è deciso da ognuno per se stesso, anche se è ovvio che ai nostri tempi designer e layout designer dedicano ancora tempo ed energie a questo.
Purtroppo solo uno css spesso non abbastanza per progettare facilmente un particolare elemento del modulo. Questo è probabilmente il motivo per cui così tante persone usano cose come l'uniforme per le loro uniformi. Personalmente, cerco sempre di ridurre la quantità di Javascript utilizzata per tali scopi, quindi voglio parlare di completamente nativo HTML+CSS metodo di personalizzazione per pulsanti di opzione e caselle di controllo.
Sono sicuro che la maggior parte degli esperti su Habré usa metodi simili, per chi usa librerie js, come Uniforme Spero che questo articolo sia utile.
Andare!
Quindi fissiamo un obiettivo: progettare caselle di controllo e pulsanti di opzione in modo che assomiglino a js magic Uniforme, ma rendilo il più semplice possibile, nativo in relazione a HTML e css modo, oltre a evitare l'uso di tag non necessari, pur mantenendo la semantica. Qualcosa come questo.L'idea principale si basa sulla "competenza" nativa del tag HTML etichetta collegamento a un elemento del modulo specifico. In realtà, questo è tutto, quindi solo il codice.
markup
<ul >
<li >
<input id = "cfirst" type = "checkbox" name = "first" selezionato nascosto / >
<etichetta per="cfirst"> Casella di controllo selezionata</etichetta>
</li>
<li >
<input id="csecond" type="checkbox" name="second" hidden / >
<etichetta per="csecondo"> casella di controllo deselezionata</etichetta>
</li>
<li >
<input id = "cthird" type = "checkbox" name = "terzo" nascosto disabilitato / >
<etichetta per="cterzo"> Casella di controllo disabilitata</etichetta>
</li>
<li >
<input id = "clast" type = "checkbox" name = "last" selezionato nascosto disabilitato / >
<etichetta per="clast"> Casella di controllo disabilitata</etichetta>
</li>
</ul>
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" selezionato nascosto / >
<etichetta per="rfirst"> Radio controllata</etichetta>
</li>
<li >
<input id="rsecond" type="radio" name="radio"
<etichetta per="rsecondo"> Radio non controllata</etichetta>
</li>
<li >
<input id = "rthird" type = "radio" name = "radio" nascosto disabilitato / >
<etichetta per="rterzo"> Radio disabilitata</etichetta>
</li>
</ul>
Markup completamente nativo. Utilizzo etichetta insieme a ingresso proprio come dai libri di testo. L'unico punto importante è che è necessario specificare ID per ciascuno ingresso e per per etichetta per collegarli.
Penso che tutti abbiano notato l'uso dell'attributo nascosto chi si nasconde ingresso elementi, ma a causa della connessione con etichetta, possiamo ancora manipolarli. Di conseguenza, otteniamo qualcosa come:
È abbastanza noioso, ma funziona tutto. Ora resta da organizzare tutta questa bontà come dovrebbe. Per fare ciò, usa lo sprite che viene utilizzato sul sito Uniforme.
Registrazione
input[tipo="casella di controllo"] ,
input[type="radio"](
display: nessuno;
}
input[type="checkbox"] + etichetta,
input[ tipo= "radio" ] + etichetta (
carattere: 18px in grassetto
colore : #444 ;
cursore: puntatore;
}
input[ type= "checkbox" ] + label: :before ,
contenuto : ""
display : blocco in linea ;
altezza: 18px;
larghezza: 18px
margine : 0 5px 0 0 ;
immagine di sfondo : url ( uniformjs.com/images/sprite.png) ;
background-repeat: no-repeat;
}
input[ type= "checkbox" ] + label: :before (
posizione dello sfondo: -38px -260px;
}
input[ type= "radio" ] + label: :before (
posizione di sfondo: 0px -279px;
}
input[ type= "casella di controllo"] :checked + label: :before (
posizione dello sfondo: -114px -260px;
}
input[ type= "radio" ] :checked + label: :before (
posizione dello sfondo: -108px -279px;
}
input[ type= "checkbox" ] :disabled + label: :before (
posizione dello sfondo: -152px -260px;
}
input[ type= "casella di controllo"] :checked :disabled + label: :before (
posizione dello sfondo: -171px -260px;
}
input[ type= "radio" ] :disabled + label: :before (
posizione dello sfondo: -144px -279px;
}
input[ type= "radio" ] :checked :disabled + label: :before (
posizione dello sfondo: -162px -279px;
}
Qui tutto è il più semplice possibile. Utilizzo di uno pseudoelemento prima per mostrare i nostri "controlli virtuali" e l'utente non si è accorto della sostituzione. Parti dello sprite, cambiano a seconda dello stato ingresso"ma.
Di conseguenza, otteniamo qualcosa come:
