7 Formuär i HTML Byt till mörkt läge

När användaren ska beställa, ställa frågor eller ge återkoppling/feedback till en webbtjänst sker det oftast med ett formulär.

7.1 <form>, action och metod

<form> attribut:

Det finns 2 attribut i formelelementet.

action: Talar om vilken URL som informationen ska skickas till.
method: Talar om hur användaren ska mata in data.

Det finns 4 sätt att skicka data på i formulär: GET, HEAD, POST och PUT. Här kommer vi bara använda POST.
POST skickar informationen från formuläret till en server som sedan i sin tur gör något med informationen.

7.2 <input>

För att låta användaren mata in information lägger man till <input type="text">

Denna kod:

<form action="exempel.se/mapp" method="post">: <input type="text"
</form>

ger detta resultatet (Så här kommer webbläsaren att se ut):

7.3 <label for="..."> och <input id="...">

Det blir svårt för användaren att mata in korrekt information utan en etikett vid textfältet.

För att göra detta så kan man skriva:
<label for="first-name">Förnamn:</label>

För att göra formuläret tillgängligt måste man lägga till attributet for="foo" i label-elementet och attributen id="foo" i elementet input.
Det ska vara samma namn i id och for så att label och input sparas ihop. Där foo är namnet som du som utväcklare väljer.

Denna kod:

<form action="exempel.se/mapp" method="post">: <label for="first-name">Förnamn:</label>; <input type="text" id="first-name">
</form>

ger detta resultatet:

OBS! Id-elementet måste alltid vara unikt varje gång som det används i ett dokument. Till exempel: Om man redan har ett id="first-name" i ett dokument så kan man inte använda first-name i ett annat id-element senare och man måste komma på ett nytt värde för id-elementet istället, till exempel: first-name2. Då är det även rekommenderat att for-elementet också har samma värde som id-elementet senare.

7.4 Alternativ till for och id: lägga <input> nästlad i <label>

Ett alternativt sätt att använda labels och input är att lägga input-elementet inbäddat i label-elementet.

<form action="exempel.se/mapp" method="post">: <label>Förnamn:<input type="text"></label>
</form>

Resultat:

7.5 <input placeholder="...">

Om man vill underlätta för användaren, så kan man lägga en platshållare text med attributet placeholder="bar". Som du ser visas båda alternativen nedan. Att lägga in input i label är lättare om du vill skapa en kompakt och intuitiv layout.

Alternativ 1:

<form action="exempel.se/mapp" method="post">: <label for="first-name">Förnamn:</label>; <input type="text" id="first-name" placeholder="Adam">
</form>

Resultat:

Alternativ 2:

<form action="exempel.se/mapp" method="post">: <label>Förnamn:<input type="text" placeholder="Adam"></label>
</form>

Resultat:

<input name="...">

För att det ska vara enklare för både servern och användaren att förstå vad informationen innehåller ska man ha med attributet: name="...".

Alternativ 1:

<form action="exempel.se/mapp" method="post">: <label for="first-name">Förnamn:</label>; <input type="text" id="first-name" placeholder="Adam" name="first-name">
</form>

Resultat:

Alternativ 2:

<form action="exempel.se/mapp" method="post">: <label>Förnamn:<input type="text" placeholder="Adam" name="first-name"</label>
</form>

Resultat:

7.7 Att testa formuläret med httpbin

För att få en uppfattning hur en server skulle ta emot informationen kan vi använda tjänsten httpbin.
Tänk på att i exemplet nedan skickas data i två delar. All data mellan <form> ... </form> skickas för sig.

Exempel 1:

<h2>Formulär med attributen id och for</h2>
<form action="https://httpbin.org/post" method="post">: <label for="first-name">Förnamn:</label>; <input type="text" id="first-name" placeholder="Adam" name="first-name">; <label for="age">Ålder:</label>; <input type="number" id="age" placeholder="0" name="age">; <button type="sumbit">Skicka</button>
</form>

Resultat:

Formulär med attributen id och for

Exempel 2:

<h2>Formulär utan attributen id och for</h2>
<form action="https://httpbin.org/post" method="post">: <label>Förnamn:<input type="text" placeholder="Bertil" name="first-name"></label>; <label>Ålder:<input type="number" placeholder="0" name="age"></label>; <button type="submit">Skicka</button>
</form>

Resultat:

Formulär utan attributen id och for

7.8 <input type="number"> och <button type="submit">