Form-relaterede tags

Denne artikel forklarer form-relaterede tags.

Dette forklarer forskellige formularfelter som tekstfelter og rullemenuer.

YouTube Video

Form-relaterede tags

<form> tag

1<form action="/submit" method="post">...</form>

• Taggen <form> bruges til at definere hele formularen.
• Attributten action angiver destinationen, og attributten method angiver metoden (GET eller POST).
• Du kan også angive attributten target, ligesom med <a>-tagget.

<input> tag (tekstinputfelt)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> opretter et enkeltlinjet tekstindtastningsfelt. Brugere kan indtaste enhver tekst.

• Pladsholder-attributten angiver beskrivende tekst, der vises, når inputfeltet er tomt. Dette hjælper brugerne med nemt at forstå det forventede input. Denne tekst forsvinder automatisk, når input begynder.

  • placeholder er egnet til at give supplerende oplysninger og er ikke egnet til vigtige instruktioner som fx nødvendige input. I sådanne tilfælde bør du bruge en etiket.

<input> tag (adgangskodeinputfelt)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> opretter et felt til indtastning af adgangskoder. De indtastede tegn er skjulte og maskeres for at sikre sikkerheden.

<input> tag (e-mailadressefelt)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> opretter et felt til indtastning af en e-mailadresse og inkluderer validering for at sikre korrekt e-mailformat.

<input> tag (afkrydsningsfelt)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> opretter et afkrydsningsfelt. Når der findes flere valgmuligheder, kan brugerne vælge flere elementer.

<input> tag (radioknap)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> opretter en alternativknap, der lader brugerne vælge kun én mulighed fra en gruppe.

<input> tag (indsend-knap)

1<input type="submit" value="Submit">

• <input type="submit"> opretter en knap til at sende dataene i formularen.
• Værdien af attributten value medtages i formularens data, når den sendes.

<input> tag (Nulstil knap)

1<input type="reset" value="Reset">

• <input type="reset"> opretter en knap, der nulstiller alle inputværdier i formularen.

<input> tag (skjult felt)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> opretter et skjult felt, der ikke vises på skærmen, og som bruges til at sende data til backenden, når formularen sendes.

<input> tag (farvevælger)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> viser en farvevælger og opretter et indtastningsfelt, hvor brugerne kan vælge en farve.

<input> tag (dato-inputfelt)

1<input type="date" name="birthday">

• <input type="date"> opretter et datofelt, der viser en kalender til valg af en dato.

<input> tag (tid-inputfelt)

1<input type="time" name="appointment_time">

• <input type="time"> opretter et indtastningsfelt til tid, og en tidsvælger vises.

<input> tag (filindtastningsfelt)

1<input type="file" name="resume">

• <input type="file"> opretter et indtastningsfelt, hvor brugerne kan vælge og uploade filer.
• Attributten enctype på form tagget skal sættes til multipart/form-data.

<input> tag (nummer)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> opretter et numerisk inputfelt, der tillader indstilling af minimumsværdi, maksimumsværdi og trin (forøgelses/nedtrapningsmængde).

<input> tag (intervalvalg for tal)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> opretter et inputfelt, hvor brugere kan vælge en værdi inden for et område ved hjælp af en skyder.

<textarea> tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• <textarea>-mærket opretter et tekstinputfelt med flere linjer. Det er velegnet til at indtaste længere tekst eller kommentarer.

<select> tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• <select>-mærket opretter en rullemenu, og muligheder defineres med <option>-mærket. Brugere kan vælge et eller flere elementer.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• For at muliggøre flere valg, tilføj attributten multiple. Ved at angive denne attribut vises mulighederne som en listeboks.

<optgroup>-tag

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• <optgroup>-tagget bruges til at gruppere relaterede elementer sammen. label-attributten giver dig mulighed for at angive et gruppenavn, hvilket giver klare muligheder til brugerne, selvom listen er lang.

<label> tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• <label>-mærket definerer etiketter for inputfelter, afkrydsningsfelter og radioknapper, hvilket forbedrer anvendeligheden og tilgængeligheden.
• For eksempel kan klik på en label fokusere på et inputfelt eller skifte en checkbox til eller fra.

<fieldset> tag

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• <fieldset>-mærket grupperer relaterede formularfelter, og <legend>-mærket giver en titel til gruppen.

<button> tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• <button>-mærket definerer en klikbar knap, der udløser formularindsendelse eller andre handlinger.

  Når type="button" er angivet, fungerer den som en almindelig knap. Klik på den indsender ikke formularen eller udløser nogen andre standardhandlinger. Den bruges, når du vil definere tilpassede handlinger med JavaScript.

  Når type="submit" er angivet, fungerer den som en indsendelsesknap for formularen. Når denne knap klikkes, vil den formular, der indeholder den, blive indsendt.

  Når type="reset" er angivet, fungerer den som en nulstillingsknap for formularen. Klik på den vil nulstille alle inputfelterne i formularen og returnere dem til deres oprindelige tilstand.

  Hvis type-attributten ikke er angivet, kan nogle browsere behandle den som type="submit", så det anbefales at angive typen eksplicit for at sikre den tilsigtede adfærd.

• <button>-taggen kan indeholde andet HTML-indhold mellem åbnings- og lukningstagene, hvilket gør det muligt at oprette knapper med ikoner eller komplekst tekstindhold.

• For en submit-knap, der bruger taggen <input>, medtages værdien af attributten value i formularens data, men med en <button> tag sendes den ikke som standard.

  Ved at angive attributterne name og value for en <button> tag, kan dens værdi sendes som formulardata.

<datalist> tag

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• <datalist>-tagget giver en liste over valgbare muligheder for <input>-elementet. Brugere kan enten vælge fra listen eller indtaste deres egen værdi.

<output> tag

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• <output>-tagget viser resultatet af beregninger eller brugerinteraktioner. Det bruges til dynamisk at vise beregningsresultater inden for formularer eller scripts.
• For attributten for, angiv ID'erne for de formular elementer, du vil associere, adskilt med mellemrum.

<progress> tag

1<progress value="70" max="100">70%</progress>

• <progress>-tagget viser brugerne fremskridtet for en opgave. Det kan f.eks. visuelt angive fremskridtet for en filoverførsel eller installation.

<meter> tag

1<meter value="0.6">60%</meter>

• <meter>-tagget repræsenterer en numerisk måling inden for et kendt interval. Det bruges til at vise målinger som diskforbrug eller en brændstofmåler inden for et specifikt interval.

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