Ett formulär är något som man kan fylla i på en hemsida. Det kan vara allt från frågeformulär, inloggningsrutor och inläggsrutor på ett forum. Man använder formulär när man vill hämta in information från besökaren av hemsidan och sedan bearbeta den informationen på servern på något vis. Själva bearbetningen kan inte ske med ren HTML-kod utan man behöver ett skriptspråk t.ex. ftp för att bearbeta informationen.
<form>-taggen används för att definiera upp ett formulärfält. Ett sådant används för att en besökare på en webbsida ska kunna göra inmatningar som sedan går att skicka och bearbetas av webbservern.
<input> Input taggen använd till en hel rad med olika inmatnings fält, knappar och reglage. Här följer de vanligaste samt några av de nya med en kort beskrivning.
<input type=”text”>
Skapar en textruta där man kan skriva in valfri text.
<input type="password">
Skapar en textruta där tecknen du skriver in är dolda.
<input type="submit">
En knapp för att skicka innehållet i ett formulär.
<input type="reset">
En knapp som återställer formulärfälten till sina grundinställningar.
<input type="radio">
Radioknappar, När man bara vill att ett av valen ska vara valbart. Om man vill ha flera grupper med radioknappar inom ett formulär så måste man gruppera de som hör ihop genom att använda attributet name="gruppnamn" där gruppnamnet är unikt för de båda radiogrupperna. label="text" kan användas som knapptext, men det finns andra sätt också. Det går att sätta attributet selected (utan argument) för att förvälja ett av alternativen.
<input type="checkbox">
Checkruta, noll eller fler val kan väljas. I övrigt fungerar kryssrutorna ganska likt radioknapparna.
<input type="button">
Gör också en knapp, men den skickar inte innehållet i formuläret. Bör undvikas eller knytas mot javascript.
<input type="hidden">
Ett doltfält som kan användas för att skicka värden som kan behövas då formuläret bearbetas hos servern.
<input type="image">
En bild, som man till exempel kan använda som knapp.
Följande typer är nya i HTML5 och stöds inte hos alla/äldre webbläsare.
<input type="color">
Startar en colorpicker för att välja färger.
<input type="email">
Ej safari. Fält som ska hindra att man skickar något som inte ser ut som en emailadress. (fungerar inte så bra i dagsläget)
<input type="date">
Ej firefox. Hjälp att välja datum.
<input type="datetime-local">
Ej firefox. Hjälp att välja datum och tid.
<input type="month">
Ej firefox. Hjälp att välja en månad.
<input type="week">
Ej firefox. Hjälp att välja en vecka.
<input type="time">
Ej firefox. Hjälp att välja ett klockslag timme och minut.
<input type="number">
Hjälper till att välja ett nummer. Går att ställa in både max och minvärden samt hur stora steg varje klick ska ge.
<input type="range">
Gör ett grafiskt slidereglage som kan användas för att välja värden. Går bra att modifiera till önskade värden.
<input type="search">
Textruta för sökning. Bör kombineras med annan kod, annars fungerar den bara som en textruta.
<input list="listnamn">
Observera att typ inte behövs utan attributet list kan användas i flera olika (enradiga) textrutor. Används tillsammans med <datalist> och gör en textruta med valbara värden. Listnamnet ska vara samma som man skriver i ett id attribut i datalisten. t.ex. <datalist id="listnamn">
<select> - Skapar en dropdown lista med värden som man listar i flera <option>-taggar.
<textarea> Textareor används för större textmassor, t.ex. inlägg på ett forum.
<button> Buttons kan placeras utanför en form-tagg men ändå skicka innehållet i formulärfälten om man sätter ett id på form-taggen. <form id=”mittForm”>
…
</form>
<button type=”submit” form=”mittForm” value=”Submit”> Skicka data </button>
<datalist> Denna tagg skapar en lista som man sedan kan använda i till exempel en <input list=”listnamn”>-tagg.
<output> Detta kan användas i samband med lite scriptkod för att ge direkt feedback på skärmen.
<meter> Skapar en jättetuff mätare som man kan ge värden.
<progress> Skapar en animerad progressbar som visar hur långt tid det är kvar till... något... krävs ofta mer kod för att få att fungera bra.
För att göra formulär mer läsbara bör man gruppera ihop olika funktioner med <fieldset> och <legend>.
Uppgifter:
Skapa ett inloggningsformulär med en textruta för användarnamnet, en för lösenordet och en knapp som skickar formuläret.
Gör ett frågerformulär beståeende av 4 stycken frågor som handlar om formulär och dess undertaggar och argument. Tre av frågorna ska ha tre svar vardera där endast ett av svaren är sant. Man ska kunna välja rätt svar med radioknappar. Den sista frågan ska innehålla 5 svarsalternativ varav 3 är rätt. Man ska kunna välja vilka svar som är rätt med checkboxar.
Skapa och jämför listor av typen <input list="listnamn"> (med en matchande <datalist>) och en lista av typen <select> - Låt listorna vara fyllda med minst 5 förvalda objekt.
Undersök hur <input list="listnamn"> i föregående uppgift fungerar som användare när du sätter ett name="valfrittNamn"-attribut på den och när det saknas. Prova skriv i textrutan. Du behöver lägga till en submittknapp samt lägga till attributet action="dittSidnamn.html" i din <form>-tagg. för att se någon skillnad. Skriv ner dina iaktagelser som svar på fråga 4.
Gör ett nummerfält där startvärdet är 30, minsta värdet är 10, största värdet är 50 och varje steg är 5.
Skapa en reglerbar termometer (range med id="minRange") som går från -35 till +35. Startvärdet ska vara +5. Använd följande kod för att visa värdet:
<form oninput="out.value=minRange.value">
---Sätt in din termometer här---
<output name="out" for="minRange"> </output>
<form>
Här finns en kort introduktion till PHP.Ta en titt och försök sedan skapa en sida som tar emot och rättar svaren till frågorna i deluppgift 2. Du får välja hur många poäng varje fråga ger och summera ihop resultatet i slutet (t.ex. 10/20 poäng, eller 50% eller liknande). Om man svarar fel ska rätt svar på frågan skrivas ut. Fundera på hur poängbedömningen skiljer sig från radioknapparfrågorna och checkboxfrågorna.