Formulär
Internets mest använda formulär är troligtvis sökrutan på Googles startsida:
Det finns huvudsakligen tre olika sorters element i ett formulär:
- Text-element
- Val-element
- Skicka in-element
Ett enkelt formulär kan se ut så här:
<form>
<h3>Vilken veckodag är bäst-omröstning?</h3>
<label>Ditt namn</label>
<input type="text" name="user" placeholder="Calle"/>
<br/>
<label>Bästa dagen i veckan är:</label><br/>
<input type="radio" name="dag" value="1"/>Måndag<br/>
<input type="radio" name="dag" value="2"/>Tisdag<br/>
<input type="radio" name="dag" value="3"/>Onsdag<br/>
<input type="radio" name="dag" value="4"/>Torsdag<br/>
<input type="radio" name="dag" value="5"/>Fredag<br/>
<input type="radio" name="dag" value="6"/>Lördag<br/>
<input type="radio" name="dag" value="7"/>Söndag<br/>
<input type="submit"/>
</form>I det här formuläret används alla tre typerna.
<input/>
Elementet <input/> är ett väldigt stort element som kan göra väldigt många olika saker. I exemplet ovan är både rutan och alla knapparna <input/>-element.
<input/> är ett tomt element och ska inte ha någon sluttagg.
Attributen
<input/> har en hög med attribut som gör att formuläret ser olika ut och gör det som det ska.
- type
- Anger vilken sorts input
- name
- Anger ett variabelnamn som sparar värdet
- Placeholder
- Om där ska vara förinfyllld text
- maxlength
- Hur lång inmatningenn får vara
- value
- Anger betydelsen av knappar eller kryssrutor
- checked
- Anger om en knapp sak vara förinfylld
- required
- Anger om det är ett obligatoriskt fält
type="text"
Om man vill ta emot en liten bit text, exempelvis ett användarnamn så ger
man attributet type värdet "text".
<form>
<label>Användare</label>
<input type="text" name="user"/>
</form>type="password"
Ett lösenord ska inte synas när det matas in, så då använder man sig utav
värdet "password" som döljer lösenordet.
<form>
<label>Användare</label>
<input type="text" name="user"/>
<br/>
<label>Lösenord</label>
<input type="password" name="password"/>
</form>type="submit"
För att tillslut skicka in alla svar så anger man type="submit"
vilket skapar en ruta där det står "Skicka" (om datorn är inställd på
svenska). Vill man att där ska stå något annat behöver man ange ett värde
till attributet value.
<form>
<label>Användare</label>
<input type="text" name="user"/>
<br/>
<label>Lösenord</label>
<input type="password" name="password"/>
<br/>
<input type="submit" value="Logga in"/>
</form>type="radio"
Om man vill ha så kallade radioknappar (val där man bara kan välja en) så
anger man "radio". För att koppla samman radioknappar så är
det viktigt att man ger alla knapparna samma värde på attributet
name.
När man skapar knappar så är det viktigt att man anger attributet
value och ger det ett värde så att formuläret vet vad man har
tryckt.
<!--Exempel med samma namn -->
<form>
<label>Musikgenre: </label> <br/>
<input type="radio" name="genre" value="rock"/> Rock
<input type="radio" name="genre" value="pop"/> Pop
<input type="radio" name="genre" value="blues"/> Blues
</form><!--Exempel utan samma namn -->
<form>
<label>Musikgenre: </label> <br/>
<input type="radio" value="rock"/> Rock
<input type="radio" value="pop"/> Pop
<input type="radio" value="blues"/> Blues
</form>type="checkbox"
Om man vill ha kryssrutor där man kan trycka i flera olika alternativ så
anger man "checkbox". Här gäller samma principer som för
radioknappar: ge knapparna samma namn, och ge varje knapp ett värde.
<form>
<label>Mumintroll: </label> <br/>
<input type="checkbox" name="m-troll" value="mumin"/> Mumin
<input type="checkbox" name="m-troll" value="pappan"/> Muminpappan
<input type="checkbox" name="m-troll" value="mumrik"/> Snusmumriken
</form>
Om man vill att ett alternativ ska vara förinfyllt så använder anger man
checked="checked"
type="file"
Vill man att användaren ska ladda upp en fil så använder man type
"file".
<form>
<input type="file" name="filen"/> <br/>
<input type="submit" value="Ladda upp"/>
</form>type="image"
Man kan om man vill skapa en submit-knapp som istället för text är en bild. Då anger man alla attribut en bild ska ha i elementet.
<form>
<input type="image" name="filen"
src="https://storage.needpix.com/rsynced_images/icons-3668896_1280.png"
alt="Klicka på mig" title="Skicka in" width="100"/>
</form>type="number"
Om man vill göra ett fält som tar emot tal anger man number.
<form>
<label>Namn</label>
<input type="text" name="namn"/> <br/>
<label>Ålder</label>
<input type="number" value="18" step="0.25"/>
</form>type="range"
Ett annat sätt att ange tal är med range:
<form>
<label>Telefonnummer</label>
<input type="range" name="number" min="0" max="10000000000"/> <br/>
</form>För att visa nuvarande värde behöver man använda sig utav JavaScript
Fler dåliga sätt att ange telefonnummer
type="date"
När man vill ta emot ett datum kan man ange typen "date"
<form>
<input type="date"/>
</form>type="email"
Om man vill ta emot en epostadress anger man typen "email".
<form>
<input type="email"/>
<input type="submit"/>
</form><textarea>
Om man vill fylla i mycket text så är <textarea> ett bättre alternativ än <input type="text" />. Notera att <textarea> inte är ett tomt element.
<form>
<textarea name="texttext">
Skriv här...
</textarea>
</form><select>
Rullgardinslistor är smidiga och roliga att säga på svenska.
Rullgardinslistor påminner lite om radioknappar och kryssrutor i den mån
att man måste ange varje alternativ med ett eget element. Skillnaden är
att man kapslar in valen i en rullgardinslista med elementet
<select>.
Om man anger attributet multiple så kan man välja flera alternativ.
<form>
<select name="fellowship" multiple="multiple">
<option value="Aragorn" >Aragorn</option>
<option value="Boromir" >Boromir</option>
<option value="Frodo" >Frodo</option>
<option value="Gandalf" selected="selected">Gandalf</option>
<option value="Gimli" >Gimli</option>
<option value="Legolas" >Legolas</option>
<option value="Merry" >Merry</option>
<option value="Samwise" >Samwise</option>
<option value="Pippin" >Pippin</option>
</select>
</form><label>
All text i ett formulär som är kopplat till något inmatningsfält eller
knapp bör skrivas inom ett <label>-element. Detta ökar
dels användarvänligheten för funktionsnedsatta och det kan göra knappar
mycket lättare att klicka på.
För att man ska veta vilket element som ens text är kopplad till så
behöver man ge inmatningsfältet ett id. Det gör man tillexempel så här:
<input type="radio" name="genre" value="1" id="r"/>
Nu har vi skapat en radioknapp med id "r".
För att sedan koppla <label>-elementet till knappen
skriver ger vi det attributet for="r":
<label for="r">Rock</label>
Jämför att klicka på följande två radioknappar, den ena har en label kopplad till sig och den andra har inte sin label kopplad till sig.
<form>
<input type="radio" name="genre2" id="r" value="1">
<label for="r">Rock</label> <br/>
<input type="radio" name="genre2" value="2">
<label>Pop</label> <br/>
</form><fieldset>
Om man vill organisera sitt formulär och kanske göra en visuell
uppdelning kan man använda sig utav av elementet
<fieldset>. <fieldset> gör en ram
runt elementen innanför vilket kan vara snyggt. Med CSS kommer vi sen att
kunna får den att se annorlunda ut.
<legend>
Det här elementet låter oss ge en rubrik till området.
<form>
<fieldset>
<legend>Inloggningsfält</legend>
<label for="user">Användare</label>
<input type="text" name="user" id="user"/>
<br/>
<label for="pass">Lösenord</label>
<input type="password" name="pass" id="pass"/>
<br/>
<input type="submit" value="Logga in"/>
</fieldset>
</form>Form validation
En del formulär behöver har fält som måste fyllas i. Då anger man
attributet required="required".
<form>
<input type="text" required="required"/>
<input type="submit"/>
</form>
