XHTML Basic: Formulär

Form: <form></form>
5. Formulär
start \|\| föregående \|\| nästa
Det vanligaste sättet för en XHTML Basic-sida att samla in information från den som läser sidan är via formulär. Formulär kan bestå av många olika sorters element beroende på vilken sorts information sidan vill ha in från användaren. Exempel på dessa är textfält och flervalslistor. Vi ska titta på några sådana här.
Form-taggen är den som ska omge ditt formulär. Den talar om för browsern var formuläret börjar respektive slutar. Form-taggen har ett antal attribut som den kan innehålla beroende på vad formuläret ska användas till: "action" Gör att man kan ange en mål-URL för formuläruppgifterna. Ex. action="http://www.hemsida.com" "method" Här kan man specificera om man ska skicka formuläret som GET eller POST. Ex. method="post" "id" Man kan ge formuläret ett unikt namn, så att t.ex. JavaScriptmetoder kan få tillgång till formulärets fält. Ex. id="mitt_fomulär" "enctype" Här kan man tala om för browsern vilken MIME-typ formuläret innehåller. Ex. enctype="text/plain"
Input: <input />
Input-taggen talar om för browsern att det är dags för en inmatning från användaren. Input-taggen byter skepnad beroende på hur dess type-attribut tillförs. Om t.ex. input-typen är "text" så skapar browsern ett textfält, om input-typen är "submit" så skapar browsern en knapp för att skicka formulärinformationen med. Ex. <body> <form id="any_form" action="http://www.hemsida.com" method="post" enctype="text/plain"> Skriv in ditt namn:<br /> <input type="text" /> <input type="submit" value="Skicka" /> </form> </body> Detta ger följande enkla formulär: Skriv in ditt namn: De värden som type-attributet kan ha är: text submit password reset button radio checkbox hidden image file
Textarea: <textarea></textarea>
Ovan såg vi hur man gör ett textfält där användaren kan skriva in information på en rad. Ibland kan man vilja att användaren skriver in mycker mer information och därför vilja ha textfält på flera rader. Dessa kallas då textareor och märks upp med textarea-taggen. Textarea-taggen tar två attribut som intresserar oss, nämligen cols-attributet som bestämmer hur många kolumner bred textarean ska vara, och rows-attributet som bestämmer hur många rader hög textarean ska vara. Ex. <body> <form id="formulär" action="http://www.hemsida.com" method="post" enctype="text/plain"> Skriv in ett meddelande:<br /> <textarea cols="30" rows="10"> </textarea><br /> <input type="submit" value="skicka"> </form> </body> Detta ger följande textyta: Skriv in ett meddelande:
Listrutor: <select></select>
Ofta föredrar man att presentera en lista med alternativ för användaren istället för att låta användaren skriva fritt. En lista kan dock ta upp ganska stor plats på en sida, ett sätt att lösa det är att använda select-taggen. Select-taggen gör att man kan lista alla alternativ i ett litet fönster som fälls ut när användaren klickar på det. Det alternativ som syns i fönstret är det alternativ som är valt. Alternativen listas med option-elementet. Ex. <body> <form id="the_form" action="http://www.hemsida.com" method="post" enctype="text/plain"> Välj ett av följande alternativ:<br /> <select> <option> äpple </option> <option> päron </option> <option> banan </option> </select> </form> </body> Detta ger följande listruta: Välj ett av följande alternativ:
Label: <label></label>
Label-taggen hjälper till att sätta rubriker på form-element. Label-taggen tar for-attributet, vars värde måste motsvara det id som form-elementet har tilldelats. Label-taggen hjälper också till vid röststyrda browsrar för att specificera innebörden av form-element. Om vi lägger till en label på ovanstående listruta: <body> <label for="frukt">Välj ett av följande alternativ:</label> <form id="a_form" action="http://www.hemsida.com" method="post" enctype="text/plain"> <select id="frukt"> <option> äpple </option> <option> päron </option> <option> banan </option> </select> </form> </body> Detta ger följande listruta: Välj ett av följande alternativ:

5. Formulär