Form-relaterte tagger

Denne artikkelen forklarer tagger relatert til skjemaer.

Dette forklarer ulike skjemafelt som tekstinput og nedtrekksmenyer.

YouTube Video

Form-relaterte tagger

<form>-tag

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

• -taggen brukes til å definere hele skjemaet.
• 'action'-attributtet spesifiserer destinasjonen, og 'method'-attributtet spesifiserer metoden (GET eller POST).
• Du kan også spesifisere target-attributtet, tilsvarende <a>-taggen.

<input>-tag (tekstinnskrivningsfelt)

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

• <input type="text"> oppretter et enkeltlinjers tekstinntastingsfelt. Brukere kan skrive inn hvilken som helst tekst.

• placeholder-attributtet angir beskrivende tekst som vises når inntastingsfeltet er tomt. Dette hjelper brukere med å enkelt forstå forventet input. Denne teksten forsvinner automatisk når inntasting begynner.

  • placeholder er egnet for å gi supplerende informasjon og er ikke egnet for viktige instruksjoner som for eksempel obligatoriske inndata. I slike tilfeller bør du bruke en etikett.

<input>-tag (passordfelt)

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

• <input type="password"> oppretter et felt for passordinntasting. Tegnene som skrives inn, er skjulte og maskerte for å sikre sikkerhet.

<input>-tag (e-postadressefelt)

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

• <input type="email"> oppretter et felt for å skrive inn en e-postadresse og inkluderer validering for å sikre riktig e-postformat.

<input>-tag (avkrysningsboks)

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

• <input type="checkbox"> oppretter en avkrysningsboks. Når flere alternativer er tilgjengelige, kan brukere velge flere elementer.

<input>-tag (radioknapp)

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

• <input type="radio"> oppretter en radioknapp som lar brukere velge bare ett alternativ fra en gruppe.

<input>-tag (send-knapp)

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

• <input type="submit"> oppretter en knapp for å sende inn dataene i skjemaet.
• Verdien av 'value'-attributtet inkluderes i skjemadataene når det sendes.

<input>-taggen (Tilbakestill-knapp)

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

• <input type="reset"> lager en knapp som tilbakestiller alle verdier i skjemaet.

<input>-tag (skjult felt)

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

• <input type="hidden"> oppretter et skjult felt som ikke vises på skjermen, og som brukes til å sende data til backend når skjemaet sendes inn.

<input>-tag (fargevelger)

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

• <input type="color"> viser en fargevelger og oppretter et felt for brukere til å velge en farge.

<input>-tag (datofelt)

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

• <input type="date"> oppretter et datofelt som viser en kalender for å velge en dato.

<input>-tag (tidsfelt)

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

• <input type="time"> oppretter et felt for å skrive inn tid, og en tidsvelger vises.

<input>-taggen (filopplastningsfelt)

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

• <input type="file"> oppretter et felt for brukere til å velge og laste opp filer.
• 'enctype'-attributtet i 'form'-taggen må være satt til 'multipart/form-data'.

<input>-taggen (nummer)

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

• <input type="number"> oppretter et nummerinnskrivingsfelt som tillater innstilling av minimumsverdi, maksimumsverdi og trinn (inkrement/dekrement mengde).

<input>-taggen (områdevalg for tall)

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

• <input type="range"> oppretter et innskrivingsfelt der brukere kan velge en verdi innenfor et område ved å bruke en glidebryter.

<textarea>-taggen

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

• <textarea>-merket lager et flervalg tekstinnskrivingsfelt. Det passer for innskriving av lange tekster eller kommentarer.

<select>-taggen

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

• <select>-merket lager en rullegardinmeny, og valgene defineres med <option>-merket. Brukere kan velge ett 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 å aktivere flere valg, legg til attributtet multiple. Hvis du spesifiserer dette attributtet, vises alternativene som en listeboks.

<optgroup>-taggen

 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>-taggen brukes til å gruppere relaterte elementer sammen. Attributtet label lar deg angi et gruppenavn, som gir brukerne klare valg selv om listen er lang.

<label>-taggen

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

• <label>-merket definerer etiketter for innskrivingsfelt, avkrysningsbokser og radioknapper, og forbedrer brukervennlighet og tilgjengelighet.
• For eksempel kan et klikk på en etikett sette fokus på et inndatafelt eller slå en avkrysningsboks av eller på.

<fieldset>-tagg

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>-merket grupperer relaterte skjemakontroller, mens <legend>-merket gir en tittel til gruppen.

<button>-taggen

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

• <button>-merket definerer en klikkbar knapp som utløser skjemainnsending eller andre handlinger.

  Når type="button" er spesifisert, fungerer den som en vanlig knapp. Å klikke på den sender ikke inn skjemaet eller utløser noen andre standardhandlinger. Den brukes når du ønsker å sette opp tilpassede handlinger med JavaScript.

  Når type="submit" er spesifisert, fungerer den som en innsending-knapp for skjemaet. Når denne knappen klikkes, vil skjemaet som inneholder den bli sendt inn.

  Når type="reset" er spesifisert, fungerer den som en tilbakestillingsknapp for skjemaet. Å klikke på den vil tilbakestille alle innskrivingsfeltene i skjemaet og returnere dem til sin opprinnelige tilstand.

  Hvis type-attributtet ikke er spesifisert, kan noen nettlesere behandle det som type="submit", så det anbefales å spesifisere typen eksplisitt for å sikre ønsket oppførsel.

• <button>-taggen kan inkludere andre HTML-elementer mellom start- og slutt-taggene, noe som gjør det mulig å lage knapper med ikoner eller kompleks tekst.

• For en send-knapp som bruker -taggen inkluderes verdien av 'value'-attributtet i skjemadataene, men med en -tag sendes den ikke som standard.

  Ved å spesifisere 'name'- og 'value'-attributter for en

  -tag kan verdien sendes som skjemadata.

<datalist>-tagg

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>-taggen gir en liste med valgbare alternativer for <input>-elementet. Brukere kan enten velge fra listen eller skrive inn sin egen verdi.

<output>-tagg

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>-taggen viser resultatet av beregninger eller brukerinteraksjoner. Den brukes for å dynamisk vise beregningsresultater i skjemaer eller skript.
• For for-attributtet, spesifiser ID-ene til skjemaelementene du vil knytte sammen, adskilt med mellomrom.

<progress>-tagg

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

• <progress>-taggen viser brukerne fremdriften til en oppgave. For eksempel kan den visuelt indikere fremdriften ved nedlasting eller installasjon av en fil.

<meter>-tagg

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

• <meter>-taggen representerer en numerisk måling innenfor et kjent område. Den brukes til å vise målinger som diskforbruk eller en drivstoffmåler innenfor et spesifikt område.

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