Ved hjelp av Form strukturkoder på din HTML5 Web Page

October 24  by Eliza

Fra starten har websider hadde evnen til å samle data fra brukere. HTML5 har en standard, men ganske nyttig sett med skjemaelementer du kan bruke for å få innspill. Disse formelementer følger mange av de samme reglene som andre koder.

Denne figuren viser et skjema som inneholder alle de viktigste HTML skjemaelementer som kan oppstå:

Ved hjelp av Form strukturkoder på din HTML5 Web Page

Kodene du bruker til å administrere den generelle strukturen i form inneholder:

  • <Form>: Denne koden inneholder selve skjemaet; det omslutter alle de andre skjemaelementer. Den <form> tag bør også omfatte action = "" attributt. Dette indikerer at du ikke har tenkt å ringe en server-side script når skjemaet er sendt.
  • <Fieldset>: Denne spesial merket lar deg gruppere en rekke input elementer sammen. Det er ikke nødvendig, men det kan gjøre komplekse former enklere å navigere. Som standard har en fieldset en enkelt ramme rundt det, men du kan endre dette med CSS.
  • <Legend>: Du kan legge til en legende til en fieldset å fungere som en etikett for hele fieldset.
  • <Label>: Dette markerer tekst som etiketten i forbindelse med en bestemt inngang element. Du kan bruke den ekstra for attributtet for å spesifisere hvilken inngang element etiketten er tilknyttet. Label tags er normalt brukt til å lage CSS styling av skjemaer enklere å administrere.

Koden for en side ved hjelp av alle strukturkoder vist i figuren går som følger:

<! DOCTYPE HTML>
<Html lang = "no">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Form Demo </ h1>
<Form>
<Fieldset>
<Legend> Tekst innspill </ legend>
<P>
<Label> Tekstboks </ label>
<Input type = "text"
id = "myText"
value = "tekst her" />
</ P>
<P>
<Label> Passord </ label>
<Input type = "passord"
id = "myPwd"
value = "hemmelig" />
</ P>

<P>
<Label> Tekst-området </ label>
<Textarea id = "myTextArea"
rader = "3"
cols = "80"> Din tekst her </ textarea>
</ P>
</ Fieldset>

<Fieldset>
<Legend> Velge elementer </ legend>
<P>
<Label> Velg List </ label>

<Velg id = "myList">
<Option value = "1"> ett </ option>
<Option value = "2"> to </ option>
<Option value = "3"> tre </ option>
<Option value = "4"> fire </ option>
</ Select>
</ P>

<P>
<Label> Sjekk bokser </ label>
<Input type = "boksen"
id = "chkEggs"
value = "greenEggs" />
<Label for = "chkEggs"> Green Eggs </ label>

<Input type = "boksen"
id = "chkHam"
value = "skinke" />
<Label for = "chkHam"> Ham </ label>
</ P>
<P>
<Label> Alternativknapper </ label>
<Input type = "radio"
name = "radSize"
id = "sizeSmall"
value = "liten"
sjekket = "sjekket" />
<Label for = "sizeSmall"> liten </ label>

<Input type = "radio"
name = "radSize"
id = "sizeMed"
value = "medium" />
<Label for = "sizeMed"> medium </ label>

<Input type = "radio"
name = "radSize"
id = "sizeLarge"
value = "stor" />
<Label for = "sizeLarge"> stor </ label>
</ P>
</ Fieldset>

<Fieldset>
<Legend> Knapper </ legend>
<P>
<-knappen Type = "button">
standard knapp
</ Knapp>

<Input type = "button"
value = "innspill knappen" />
<Input type = "reset" />
<Input type = "submit" />
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Fieldset, legende, og label-koder er ikke nødvendig, men de hjelper deg med å organisere den siden, så det er lettere å legge ut med CSS. Riktig bruk av disse kodene og CSS gjør ofte skjemaene mye lettere å jobbe med enn de eldre tabellbaserte hacks.