Skjemavalidering

Denne artikkelen forklarer skjemavalidering.

Den forklarer skjemavalidering i HTML.

YouTube Video

HTML Skjemavalidering

Oversikt over HTML Skjemavalidering

• HTML-skjemavalidering er en mekanisme for å sikre at dataene oppfyller visse betingelser før en bruker sender dem inn. Dette reduserer feil på serversiden og forbedrer brukeropplevelsen.

required-attributt

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• required-attributtet spesifiserer at inputfeltene må fylles ut før skjemaet sendes inn.

pattern-attributt

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• pattern-attributtet brukes til å validere om skjemaets input samsvarer med et spesifikt regex-mønster. For eksempel, dette sjekker om brukernavnet kun inneholder alfanumeriske tegn.

min og max-attributter

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• <min> og <max>-attributtene brukes til å angi de minste og største tillatte verdiene for et inputelement. De brukes ofte med inputtyper som number, range, og date.
• I dette eksempelet kan du skrive inn et tall mellom 18 og 99.

minlength og maxlength-attributter

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• minlength-attributtet angir det minimale antallet tegn som kreves for et inputfelt, mens maxlength-attributtet definerer det maksimale antallet tillatte tegn.
• I dette eksemplet kan du skrive inn tekst mellom 4 og 12 tegn.

Attributtet type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Attributtet type="email" brukes for å sikre at inndataene er i et gyldig e-postadresseformat. Dette attributtet gir innebygd valideringsfunksjonalitet for felt for e-postadresse.

Attributtet type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> gir et inndatafelt som krever et korrekt URL-format. Nettleseren sjekker automatisk om inndataene er gyldige som en URL.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video