Vi kjenner allerede til hvordan man bygger skjemaer med input-felt og etiketter. Nå skal vi se på andre nyttige attributter for input-elementer som forbedrer funksjonalitet og brukervennlighet.

Vanlige attributter for input-elementer

Placeholder

placeholder gir et hint eller eksempeltekst i inndatafeltet, og veileder brukere om hvilken type inndata som forventes. Nyttig for å gi kontekst eller instruksjoner til brukere før de legger inn data.

<input type="text" placeholder="Enter your email" />

Name

name angir navnet på inndatafeltet, som brukes til å identifisere inndata når skjemaet sendes inn. Hvert inndatafelt i et skjema bør ha en unik name-attributt.

<input type="text" name="username" />

Value

value angir start- eller standardverdien for inndatafeltet. Forhåndsutfyller inndatafeltet med en spesifikk verdi når siden lastes inn.

<input type="tel" value="+1 (484) 298-9732" />

Påkrevd

required angir at feltet må fylles ut før skjemaet kan sendes inn. Forhindrer innsending av skjemaet hvis det påkrevde feltet er tomt.

<input type="password" required />

Deaktivert

disabled deaktiverer feltet, slik at brukeren ikke kan samhandle med det eller skrive inn data. Nyttig for å vise skrivebeskyttede eller inaktive felt.

<input type="text" value="New York" disabled />

Skrivebeskyttet

readonly gjør feltet skrivebeskyttet, slik at brukeren kan se verdien, men ikke endre den. Ligner på disabled-attributtet, men lar fortsatt feltet få fokus og bli valgt.

<input type="text" value="USA" readonly />

Min og Maks

min og max angir minimums- og maksimumsverdier for numeriske inndatafelt. Nyttig for å håndheve begrensninger på numerisk inndata, som alder eller antall.

<input type="number" min="21" max="99" />

Eksempel: Her er et eksempel som inkluderer alle nødvendige attributter og elementer for skjemaet.

Videoveiledning