Formularvalidering

Denne artikel forklarer formularvalidering.

Den forklarer formularvalidering i HTML.

YouTube Video

HTML Formularvalidering

Oversigt over HTML Formularvalidering

• HTML-formularvalidering er en mekanisme, der sikrer, at data opfylder visse betingelser, før en bruger sender dem ind. Dette reducerer fejl på serversiden og forbedrer brugeroplevelsen.

required Attribut

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-attributten angiver, at inputfelter skal udfyldes før formularen kan sendes.

pattern Attribut

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-attributten bruges til at validere, om formularinput matcher et bestemt regex-mønster. For eksempel tjekker dette, om brugernavnet kun indeholder 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>-attributterne bruges til at angive de minimum- og maksimumværdier, der er tilladt for et inputelement. De bruges ofte med inputtyper som number, range og date.
• I dette eksempel kan du indtaste et tal mellem 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-attributten angiver det minimum antal tegn, der kræves for et inputfelt, mens maxlength-attributten definerer det maksimale antal tilladte tegn.
• I dette eksempel kan du indtaste tekst mellem 4 og 12 tegn.

Attributten 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>

• Attributten type="email" bruges til at sikre, at input er i et gyldigt e-mailadresseformat. Denne attribut tilføjer indbygget valideringsfunktionalitet til inputfelter for e-mailadresser.

Attributten 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"> giver et inputfelt, der kræver et korrekt URL-format. Browseren kontrollerer automatisk, om input er gyldigt som en URL.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video