<<Formulär>>

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>-taggen används till en hel rad med olika inmatnings fält, knappar och reglage. Här följer de vanligaste med en kort beskrivning.

  <input> Används till många olika typer av inmatningsrutor. Man kan specificera med olika type-attribut hur den egentligen ska fungera.

  <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 attributvärde) 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.

  <input type="color">

  Startar en colorpicker för att välja färger.

  <input type="email">

  Fält som ska hindra att man skickar något som inte ser ut som en emailadress. (inte så bra, men bättre än inget)

  <input type="date">

  Hjälp att välja datum.

  <input type="datetime-local">

  Hjälp att välja datum och tid.

  <input type="month">

  (Ej firefox, Safari) Välj en månad.

  <input type="week">

  (Ej firefox, Safari) Välj en vecka.

  <input type="time">

  Välj ett klockslag timme och minut.

  <input type="number">

  Välj 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">

  Mer om attribut

  I övrigt så finns det en hel del attribut som fungerar inuti <input>-taggen. Attributen max, min, step är användbara i en type="number" eller type="range".

  Attributet maxlength är bra att använda i olika textfält för att begränsa antalet tecken och så vidare. placeholder="någon text" Kan användas i olika textfält för att visa vilken typ av inmatning som förväntas.

  Attributet id är ofta nödvändig för att man ska kunna hämta inforrmation från en specifik input. Detta används speciellt i olika scriptspråk som javascript och php men även till exempel för att knyta en <label> till en inmatningsruta.

  Taggen <label> bör man använda för text, radio, checkbox m.fl. för att beskriva vad inmatningen betyder. En <label> har ett attribut for som ska sättas samma som attributet id i en <input> för att knyta ihop dem.

• <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>.

Här finns ett par exempel där det finns lite kod (javascript) som gör så att vi får en direkt respons på vad vi skriver in i våra formulär. Detta ingår inte i kursen, men det kan vara intressant att veta vad man kan göra med ganska lite kod. I uppgift 6 så får ni prova lite själva.

Här följer ett antal uppgifter som ni ska göra. Ta hjälp av boken kapitel 7 och den information ni kan hitta här ovanför för att besvara frågorna. Dessa besvaras som vanligt genom att ni skapar en hemsida med svaren/övningarna.

Som vanligt så avslutar du din svarsida med att länka tillbaka till din startsida.