HTML5 Input påkrevd attributt
Denne håndboken vil forklare inngangen “påkrevd”Attributt og bruken.
Hva er HTML -inngangen "påkrevd" attributt?
“påkrevd”Attributt er en boolsk attributt som indikerer en betingelse, som er at inngangsfeltet må fylles ut før skjemainnleveringen betjener skjemaet. Inngangsfeltene som er spesifisert for viktige data, må settes med den nødvendige attributtet. Denne attributtet fungerer på forskjellige innganger: URL, passord, date plukkere, nummer, avkrysningsrute, tlf, tekst, radio, e -post, søk og fil.
Hvordan bruke "nødvendig" attributt i HTML5?
Å bruke “påkrevd”Attributt i HTML5, følg de undergitte instruksjonene:
- Legg til et divelement med klassen "hoved-”.
- Inne i denne diven, legg til et annet divelement som har klassenavnet "Forminnhold”.
- Innenfor skjemainnholdet er to tagger lagt til for første og etternavn.
- Og så "”Element med attributtene”type”Er satt til tekst,”Navn”F-navn, og l-navn for henholdsvis fornavnet og etternavnet. Plassholderattributtet vil bli vist i tekstfeltet. Vi har brukt attributtet “påkrevd”I den første inndatakoden bare for å se dens funksjonalitet.
Html
Ovennevnte kode genererer resultatet som vist i bildet nedenfor:
La oss gå til CSS -delen, der vi vil style HTML -filen og deretter se hvordan den nødvendige attributtet fungerer.
Stil “Main” Div
.hovedBakgrunnsfarge: RGBA (0, 0, 0, 0.159);
Maks bredde: 500px;
Margin: Auto;
Høyde: 270px;
Border-Radius: 30px;
polstring: 10px;
I henhold til det gitte kodebiten blir følgende CSS -egenskaper brukt på "hoved-”Container:
- “bakgrunnsfarge”Eiendom spesifiserer elementets bakgrunnsfarge.
- “Maks bredde”Eiendom definerer et HTML -elements maksimale bredde.
- “margin”Eiendom spesifiserer plass på tvers av det valgte HTML -elementet.
- “høyde”Eiendom definerer et HTML -elementets høyde.
- “Border-Radius”Eiendom justerer kantene på elementrunden.
- “polstring”Eiendom definerer den nødvendige plassen rundt innholdet.
Stil “form-innhold” div
.form-innholdDisplay: Flex;
Justify-Content: Center;
Align-elementer: sentrum;
Høyde: 100%;
Font-størrelse: 20px;
For å style “Form-Content” DIV, bruk de vervet CSS-egenskapene:
- “vise”Eiendom setter elementets oppsett.
- “Justify-Content”Eiendom justerer elementet horisontalt.
- “Align-elementer”Eiendom setter gjenstandene med fleksible gjenstander.
- “høyde”Eiendom brukes til å stille inn et elementets høyde.
- “skriftstørrelse”Eiendom indikerer størrelsen på tekstfonten.
Stil “input” element i “form-content” div
.form-innholdsinnganggrense: 1px fast RGB (47, 63, 63);
polstring: 6px 10px;
Font-størrelse: 20px;
bakgrunnsfarge: RGB (85, 104, 104);
Farge: #FFFFFF;
Oversikt: Ingen;
I følge den medfølgende CSS -stylingen:
- “farge”Eiendom definerer fargen på skriften.
- “skissere”Med verdien”ingen”Fjerner elementets omriss når det er valgt.
Stil "plassholder" av "input" element
.Form-innholdsinngang :: PlassholderFarge: #Dadada;
Plassholderfontfargen på inngangsfeltet er satt som "#Dadada”.
Stil "knapp" -element i "form-content" div
.Forminnholdsknappgrense: 1px fast RGB (47, 63, 63);
polstring: 10px 20px;
Font-størrelse: 22px;
bakgrunnsfarge: RGB (12, 33, 33);
Farge: #A3A3A3;
Markør: peker;
margin-venstre: 5px;
Overgang: alle 0.3s letthet;
I henhold til de gitte egenskapene:
- “markør”Eiendom er satt med verdipekeren. Når musen svever, vises en hånd med en spiss finger.
- “margin-venstre”Eiendom gir plass til venstre for innholdet.
- “overgang”Eiendom er satt med verdien”alle 0.3s letthet”, Der alle representerer alle egenskaper, 0.3S er overgangsvarigheten, og letthet representerer bevegelsen til overgangen.
Stil "knapp" -element på "Hopp
“.Forminnholdsknapp: HoppTransform: skala (1.1, 1.2);
Farge: Hvit;
Knappelementet brukes på “forvandle”Skala (1.1, 1.2) Transformelement på et 3D -plan.
Det nødvendige attributtet er festet til det første inngangselementet. Når feltet er tomt, vil det vise en melding som vist nedenfor på bildet:
Det kan sees fra bildet nedenfor at vi ikke kan la det første inngangselementet være tomt:
Det andre inngangselementet er ikke assosiert med den nødvendige attributtet. Så om det blir sendt inn som tom, påvirker ikke driften av skjemainnleveringen. Når det første inngangselementet er fylt, indikerer nettadressen skjemaet er sendt inn:
Slik fungerer inngangsattributtet i HTML5.
Konklusjon
CSS -inngangselementet er assosiert med mange attributter, for eksempel type, plassholder, påkrevd eller mer. Det nødvendige attributtet er en boolsk som indikerer at inngangsfeltet må fylles ut før du betjener skjemainnlevering. Denne håndboken har vist bruken av HTML “påkrevd”Attributt med et praktisk eksempel.