Hvordan du bygger et boks i HTML5-skjemaet ditt - dummies

Noen ganger vil du at nettsidens brukere skal indikere om informasjonen er sann eller falsk. HTML5-boksen elementet er perfekt for denne typen innspill fordi brukeren kan klikke for å velge eller avmarkere alternativet. Avkrysningsbokser er en annen variant av den allsidige input-taggen. Kryss av grønne egg og skinke er vist i figuren:

Avmerkingsbokser vises ofte i grupper, men de er uavhengige av hverandre. Koden for en nettside med bokser ser ut som:

formDemo. html

Form Demo
Velge elementer
Merk av boksene Green Eggs Ham

Du knytter vanligvis en etikett til tekstboksen, slik at brukeren kan klikke i avmerkingsboksen eller tilhørende etikett for å velge.

For å bygge en avkrysningsboks, følg disse trinnene:

1. Begynn med et inngang element.

2. Angi type attributtet til avkrysningsruten .

   Dette forklarer at inngangselementet er en avkrysningsboks og plasserer en liten boks på skjermen.

3. Gi elementet et id -felt slik at koden din kan fungere direkte med elementet.

4. Angi en verdi.

   Du kan legge til en verdi i en avkrysningsboks. Brukeren vil ikke se verdien (med mindre du velger å få etiketten til å se ut som verdien).

5. Legg til en etikett.

   Avmerkingsbokser trenger virkelig å ha en etikett knyttet til dem, slik at brukeren forstår hva avkrysningsruten handler om. Etiketten er vanligvis plassert til høyre for avkrysningsruten.

6. Legg til for attributtet til etiketten.

   Etiketten har et spesielt attributt som kreves, som lar deg spesifisere hvilket inputelement etiketten tilsvarer. Plasser id-verdien av avmerkingsboksen i dette attributtet på etiketten.

   Dette er spesielt nyttig for avmerkingsbokser fordi brukeren i de fleste nettlesere kan klikke enten på etiketten eller i avmerkingsboksen for å utløse valget. Ved å knytte etiketten til avmerkingsboksen får brukeren et større mål å klikke og gjør skjemaet lettere å bruke.

HTML-skjemaer gjør ikke noe på egen hånd. Du må legge til en form for programmering i JavaScript eller HTML for å få skjemaet til å gjøre noe.