Formulärrelaterade taggar

Den här artikeln förklarar formulärrelaterade taggar.

Detta förklarar olika formulärfält, såsom textinmatningar och rullgardinsmenyer.

YouTube Video

Formulärrelaterade taggar

<form>-tagg

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

• <form>-taggen används för att definiera hela formuläret.
• Attributet action anger destinationen och attributet method anger metoden (GET eller POST).
• Du kan också ange attributet target, liknande <a>-taggen.

<input>-tagg (textinmatningsfält)

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

• <input type="text"> skapar ett enradigt textinmatningsfält. Användare kan ange valfri text.

• placeholder-attributet anger en beskrivande text som visas när inmatningsfältet är tomt. Detta hjälper användare att enkelt förstå den förväntade inmatningen. Denna text försvinner automatiskt när inmatningen börjar.

  • placeholder är lämplig för att tillhandahålla kompletterande information och är inte lämplig för viktiga instruktioner som obligatoriska inmatningar. I sådana fall bör du använda en etikett.

<input>-tagg (lösenordsinmatningsfält)

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

• <input type="password"> skapar ett fält för lösenordsinmatning. De inmatade tecknen är dolda och maskerade för att garantera säkerhet.

<input>-tagg (e-postadressinmatningsfält)

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

• <input type="email"> skapar ett fält för att ange en e-postadress och innehåller validering för att säkerställa korrekt e-postformat.

<input>-tagg (kryssruta)

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

• <input type="checkbox"> skapar en kryssruta. När flera alternativ är tillgängliga kan användare välja flera objekt.

<input>-tagg (radioknapp)

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

• <input type="radio"> skapar en radioknapp som tillåter användare att endast välja ett alternativ från en uppsättning.

<input>-tagg (skickaknapp)

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

• <input type="submit"> skapar en knapp för att skicka formulärdata.
• Värdet av value-attributet inkluderas i formulärdata när det skickas.

<input>-tagg (återställningsknapp)

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

• <input type="reset"> skapar en knapp som återställer alla inmatningsvärden i formuläret.

<input>-tagg (dolt fält)

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

• <input type="hidden"> skapar ett dolt fält som inte visas på skärmen och används för att skicka data till backend när formuläret skickas.

<input>-tagg (färgväljare)

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

• <input type="color"> visar en färgväljare och skapar ett inmatningsfält för användare att välja en färg.

<input>-tagg (datuminmatningsfält)

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

• <input type="date"> skapar ett datuminmatningsfält som visar en kalender för att välja ett datum.

<input>-tagg (tidsinmatningsfält)

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

• <input type="time"> skapar ett fält för att ange tid, och en tidsväljare visas.

<input>-tagg (filinmatningsfält)

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

• <input type="file"> skapar ett inmatningsfält för användare att välja och ladda upp filer.
• Attributet enctype för form-taggen måste vara inställt på multipart/form-data.

<input>-tagg (nummer)

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

• <input type="number"> skapar ett numeriskt inmatningsfält där det går att ställa in minimi- och maxvärde samt steg (ökning/minskning).

<input>-tagg (urvalsfält för tal inom ett intervall)

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

• <input type="range"> skapar ett inmatningsfält där användare kan välja ett värde inom ett område med hjälp av en skjutreglage.

<textarea>-tagg

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

• <textarea>-taggen skapar ett textinmatningsfält med flera rader. Den passar för att ange långa texter eller kommentarer.

<select>-tagg

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

• <select>-taggen skapar en rullgardinsmeny, och alternativen definieras med <option>-taggen. Användare kan välja ett eller flera objekt.

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>

• För att tillåta flera val, lägg till attributet multiple. Att specificera detta attribut visar alternativen som en listbox.

<optgroup>-tagg

 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 används för att gruppera relaterade objekt tillsammans. label-attributet låter dig sätta ett gruppnamn, vilket ger tydliga alternativ till användare även om listan är lång.

<label>-tagg

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

• <label>-taggen definierar etiketter för inmatningsfält, kryssrutor och radioknappar, vilket förbättrar användarvänlighet och tillgänglighet.
• Till exempel kan klickning på en etikett fokusera ett inmatningsfält eller växla en kryssruta på eller av.

<fieldset>-taggen

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>-taggen grupperar relaterade formulärkontroller, och <legend>-taggen ger en titel för gruppen.

<button>-tagg

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

• <button>-taggen definierar en klickbar knapp som utlöser formulärlämning eller andra åtgärder.

  När type="button" anges fungerar den som en vanlig knapp. Att klicka på den skickar inte in formuläret eller startar några andra standardåtgärder. Den används när du vill ange anpassade åtgärder med JavaScript.

  När type="submit" anges fungerar den som en skicka-knapp för formuläret. När denna knapp klickas skickas det formulär som innehåller den.

  När type="reset" anges fungerar den som en återställningsknapp för formuläret. Vid klickning återställs alla inmatningsfält i formuläret och återgår till sina ursprungliga värden.

  Om attributet type inte anges kan vissa webbläsare behandla det som type="submit", så det rekommenderas att uttryckligen ange typen för att säkerställa avsedd funktion.

• -taggen kan innehålla annat HTML-innehåll mellan start- och sluttaggarna, vilket gör det möjligt att skapa knappar med ikoner eller komplex text.

• För en skicka-knapp som använder <input>-taggen inkluderas värdet av value-attributet i formulärdata, men med en <button>-tagg skickas det inte som standard.

  Genom att ange attributen name och value för en <button>-tagg kan dess värde skickas som formulärdata.

<datalist>-taggen

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 tillhandahåller en lista med valbara alternativ för <input>-elementet. Användare kan antingen välja från listan eller ange sitt eget värde.

<output>-taggen

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 visar resultatet av beräkningar eller användarinteraktioner. Den används för att dynamiskt visa beräkningsresultat inom formulär eller skript.
• För attributet for, ange ID:erna för de formelement du vill koppla, separerade med mellanslag.

<progress>-taggen

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

• <progress>-taggen visar användare hur långt en uppgift har kommit. Till exempel kan den visuellt indikera framstegen av en filnedladdning eller installation.

<meter>-taggen

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

• <meter>-taggen representerar ett numeriskt mått inom ett känt intervall. Den används för att visa mätningar som diskanvändning eller en bränslemätare inom ett specifikt intervall.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video