Attributo richiesto di ingresso HTML5
Questo manuale spiegherà l'input "necessario"Attributo e il suo utilizzo.
Qual è l'attributo di input HTML "richiesto"?
IL "necessario"L'attributo è un attributo booleano che indica una condizione, ovvero che il campo di input deve essere compilato prima di gestire la presentazione del modulo. I campi di input specificati per dati importanti devono essere impostati con l'attributo richiesto. Questo attributo funziona su vari input: URL, password, raccoglitori di date, numero, casella di controllo, tel, testo, radio, e -mail, ricerca e file.
Come utilizzare l'attributo "richiesto" in HTML5?
Per utilizzare il "necessario"Attributo nell'HTML5, seguire le istruzioni di seguito:
- Aggiungi un elemento div con la classe "principale".
- All'interno di questo div, aggiungi un altro elemento div con il nome di classe "contento forma".
- All'interno del Div del contenuto di forma, vengono aggiunti due tag per il nome e il cognome.
- Poi il ""Elemento con gli attributi"tipo"È impostato su testo,"nome"F-NAME e L-NAME per il nome e il cognome, rispettivamente. L'attributo segnaposto verrà mostrato nel campo di testo. Abbiamo usato l'attributo "necessario"Nel primo tag di input solo per vedere la sua funzionalità.
Html
Il codice sopra genera il risultato come mostrato nell'immagine seguente:
Andiamo alla sezione CSS, dove modelleremo il file HTML e quindi vediamo come funziona l'attributo richiesto.
Stile "Main" Div
.principaleBackground-color: RGBA (0, 0, 0, 0.159);
Licromra massima: 500px;
Margine: auto;
Altezza: 270px;
raggio di confine: 30px;
imbottitura: 10px;
Secondo lo snippet di codice dato, le seguenti proprietà CSS vengono applicate al “principale"Container:
- "colore di sfondo"La proprietà specifica il colore di sfondo dell'elemento.
- "larghezza massima"La proprietà definisce la larghezza massima di un elemento HTML.
- "margine"La proprietà specifica lo spazio attraverso l'elemento HTML selezionato.
- "altezza"La proprietà definisce l'altezza di un elemento HTML.
- "raggio di confine"La proprietà regola i bordi dell'elemento rotondo.
- "imbottitura"La proprietà definisce lo spazio richiesto attorno al contenuto.
Stile "Content da forma"
.Form-Contentdisplay: flex;
giustificare contento: centro;
ALIGE-ITMS: CENTRO;
Altezza: 100%;
Font-size: 20px;
Per modellare il div "contento forma", applicare le proprietà CSS arruolate:
- "Schermo"La proprietà imposta il layout dell'elemento.
- "giustificare il contenuto"La proprietà regola l'elemento in orizzontale.
- "allineare"La proprietà imposta gli articoli di articoli flessibili.
- "altezza"La proprietà viene utilizzata per impostare l'altezza di un elemento.
- "dimensione del font"La proprietà indica la dimensione del carattere di testo.
Elemento "input" di stile di div "contento forma"
.input di forma-contentobordo: 1px solido RGB (47, 63, 63);
imbottitura: 6px 10px;
Font-size: 20px;
Background-color: RGB (85, 104, 104);
Colore: #ffffff;
contorno: nessuno;
Secondo lo stile CSS fornito:
- "colore"La proprietà definisce il colore del carattere.
- "contorno"Con il valore"nessuno"Rimuove il profilo dell'elemento quando selezionato.
Stile "segnaposto" dell'elemento "input"
.Form-Content Input :: PlaceholderColore: #dadada;
Il colore del carattere segnaposto del campo di input è impostato come "#dadada".
Elemento "pulsante" di stile di div "contento forma"
.Pulsante Form-Contentbordo: 1px solido RGB (47, 63, 63);
imbottitura: 10px 20px;
Font-size: 22px;
Background-color: RGB (12, 33, 33);
Colore: #A3A3A3;
Cursore: puntatore;
margine-sinistra: 5px;
Transizione: tutti 0.3s facilità;
Secondo le proprietà indicate:
- "cursore"La proprietà è impostata con il puntatore del valore. Quando il mouse si libra, verrà visualizzata una mano con un dito appuntito.
- "margine-sinistra"La proprietà aggiunge spazio a sinistra del contenuto.
- "transizioneLa proprietà "è impostata con il valore"Tutti 0.3s facilità", Dove tutti rappresentano tutte le proprietà, 0.3s è la durata della transizione e la facilità rappresenta il movimento della transizione.
Elemento "pulsante" di stile su "Hover
".Pulsante Form-Content: Hovertrasformazione: scala (1.1, 1.2);
colore bianco;
L'elemento del pulsante viene applicato a "trasformare"Scala (1.1, 1.2) Trasforma l'elemento su un piano 3D.
L'attributo richiesto è collegato al primo elemento di input. Quando il campo è vuoto, visualizzerà un messaggio come mostrato di seguito nell'immagine:
Può essere visto dall'immagine seguente che non possiamo lasciare vuoto il primo elemento di input:
Il secondo elemento di input non è associato all'attributo richiesto. Quindi, se viene inviato come vuoto non influisce sul funzionamento della presentazione del modulo. Quando il primo elemento di input viene riempito, l'URL indica che il modulo viene inviato correttamente:
Ecco come funziona l'attributo richiesto in HTML5.
Conclusione
L'elemento di input CSS è associato a molti attributi, come tipo, segnaposto, richiesto o più. L'attributo richiesto è un booleano che indica che il campo di input deve essere compilato prima di utilizzare l'invio del modulo. Questo manuale ha dimostrato l'uso dell'HTML "necessario"Attributo con un esempio pratico.