NinetNet    HTML    Formulär

  skriv ut    

Formulär

Formulär kan vara bra till mycket! Så fort du ska göra någon sorts "fylleri" på en websida är det just ett formulär som används.

Själv har du med all sannolikhet använt formulär när du har surfat runt på webben. Kanske när du registrerat dig för medlemskap på någon sajt?

Till och med när du betalar dina räkningar på nätet är det i grunden ett formulär som gör att det är möjligt!

Vad ska jag med Formulär till? 

Exempel på ett Formulär 

Infoga Formuläret - form, method och action 

Etikett - Label 

Textruta, Lösenord & Textfält 

Kryssrutor & Radioknappar 

Rullgardinsmeny & Flervalslista 

Knappar - submit och reset 


Snygga till formuläret med CSS  

Vad ska jag med Formulär till?

Ja, det kan man ju fråga sig. Men som sagt: Formulär bra att ha i väldigt många sammanhang på webben så förr eller senare kommer du antagligen vara i behov av ett.

Formulär används för att hämta eller skicka information från din sida. I formuläret fyller besökarna in uppgifter. När man sedan trycker på "submit/skicka" händer något - uppgifterna skickas iväg. Vart de skickas och vad som händer med dem beror på vad formuläret är till för.

För att ett formulär ska fungera måste du alltså ange vad som ska hända med formuläret när besökarna fyllt i klart och trycker på "submit/skicka".

Det vanligaste är att formuläret är kopplat till någon form av skript som utför det du vill ska hända. Oftast används något lite mer avancerat skriptspråk som ASP eller PHP.

Man kan också koppla en kontroll till ett Javascript. Det är inte alls ovanligt att köra igång ett Javascript med hjälp av ett formulär. Kanske bara en enkel knapp, men ändå.

Det vanligaste användningsområdet för formulär på en websida är nog ett s.k. kontaktformulär. När du skapat din hemsida vill du ju att dina besökare ska kunna ta kontakt med dig. Man kan ju använda en enkel "mailto-länk" men alla har inte ett mailprogram installerat på datorn de surfar från...

Även om du inte får köra egna skript på din server kan du ändå använda formulär och skicka det till någon tjänst på nätet som kör skriptet åt dig. Det finns en hel del sådana gratistjänster.

Läs mer om det under rubriken: HEMSIDEGUIDE / Gästböcker & Sånt /



 Till Toppen 

Exempel på ett Formulär

Så här är kan ett formulär med de vanligaste kontrollerna kan se ut. Alla kontroller i formuläret fungerar - men du kan inte skicka det. För det är bara ett exempel, liksom.


 Till Toppen 

Infoga Formuläret - form, method och action

Form

Med taggen form infogar du själva formuläret på din sida.

Det är inte nödvändigt men det kan vara bra att ge formuläret ett unikt namn med: name och id. Du kan kalla det t.ex "form1" men "tjolahopp" går lika bra.

I form-taggen ska du också ange vilket "protokoll" som ska användas när formuläret skickas. Det görs med: method. Här anges get eller post. Vad man använder beror på vad informationen ska användas till.

Med action ska du ange hur formuläret ska hanteras - vad som ska hända med formuläret när det skickas. Här anger man vanligtvis sökvägen till det skript som ska hantera formuläret.

Formuläret i exemplet nedan anger att formuläret ska skickas med "post" till ett skript som heter "script.php".


<form name="frm1" id="frm1" method="post" action="script.php">

---- Här infogar du kontrollerna i formuläret ---

</form>


 Till Toppen 

Etikett - Label

För att det ska gå att fylla i formuläret måste du ju tala om för besökaren vad de olika knapparna och fälten är till för. Till exempel måste du skriva "Namn" i anslutning till en textruta där du vill att man ska fylla i sitt namn...

Du ska alltså skapa en "etikett" till varje kontroll i formuläret. Det görs med taggen label. Varje etikett (label) knyter du sedan till en knapp eller en ruta. Det vill säga: Varje "label" knyts till en kontroll i formuläret.

Med attributet for preciserar man vilken etikett som hör ihop med vilken ruta eller knapp. Värdet ska vara detsamma som angivits som "id".

<form>
<label for="hobby">Min hobby:</label><br>
<input type="text" id="hobby" name="hobby">
</form>

• Här knyts en etikett med texten: "Min hobby:" till en textruta som fått namn och id: "hobby".



 Till Toppen 

Textruta, Lösenord & Textfält

Textruta - "text"

Vill du infoga en ruta där besökarna kan skriva in text används taggen input och attributet type. För en vanlig textruta ska värdet vara text.

Med attributet name ger du rutan ett namn så att det går att läsa av vad som skrivits i just den rutan. Det vill säga: Det som skrivs in i textrutan kommer att synas med "rubriken" du skrivit in i "name" när formuläret skickats. Om du har fler textrutor i formuläret ska du alltså ge dem OLIKA namn.

Det är också bra identifiera rutan med: id - för att formuläret ska fungera korrekt. Ange samma värde som du anger i "name".

De nedanstående exemplen går bra att kombinera.


Exempel 1




<form>
<label for="namn">Namn:</label><br>
<input type="text" id="namn" name="namn">
</form>


Exempel 2

Maximalt antal tecken i rutan:





<form>
<label for="namn">Namn:</label><br>
<input type="text" id="namn" name="namn" maxlength="25">
</form>

• I den här rutan kan man skriva in max 25 tecken. Sån tur att man inte heter: Pippilotta Viktualia Rullgardina Efraimsdotter Långstrump...




Exempel 3

Bestämd bredd på rutan:





<form>
<label for="namn">Namn:</label><br>
<input type="text" id="namn" name="namn" size="40">
</form>

• Bredden på textrutan visas med bestämt antal tecken. Men man kan skriva in så många man vill.




Exempel 4

Text i rutan med "value":



<form>
<input type="text" id="namn" name="namn" value="Namn">
</form>

• Det här kan vara finurligt att använda när man vill spara plats! Besökarna raderar det förvalda du skrivit i "value" dvs "Namn" och skriver sedan in sitt namn.



Lösenord - "password"

En "lösenordsruta" är också en textruta. Den fungerar precis som textrutorna ovan. Man kan alltså bestämma hur bred rutan ska vara och hur många tecken som ska gå att skriva in. Men texten som skrivs in syns inte. Den ersätts av "asterisker".


Exempel




<form>
<label for="losen">Lösen:</label><br>
<input type="password" id="losen" name="losen">
</form>


Textfält - "textarea"

Attributet textarea används för att skapa lite större textfält, vilket kan vara lämpligt om man vill göra det möjligt att fylla i ett lite längre meddelande - som i någon form av mail-formulär till exempel.

Man kan styra bredden på fältet med cols och antal rader med rows. Värdet på "cols" anger antal tecken som ska rymmas i rutan på bredden.



Exempel


<form>
<label for="meddelande">Meddelande:</label><br>
<textarea id="meddelande" name="meddelande" rows="3" cols="40">
</textarea>
</form>

• Observera att det här finns en slut-tagg.

• Precis som med textrutor kan du ange "maxlength" i antal tecken om du inte vill att man ska kunna babbla på i all oändlighet.



Radbrytningar

När man skriver in texten i ett textfält som ovan kommer texten att byta rad vid kanten på rutan. Men när texten skickas kommer den att skickas som en enda lång textrad. Den typen av radbrytning kallas virtual och är standard om du inte anger någonting annat. Vill man ändra på det används attributet: wrap.


wrap="virtual" -  texten bryts i textfältet men skickas utan radbrytning
wrap="physical" -  texten bryts vid fältets kant och skickas så
wrap="off" -  texten bryts endast om manuella radbrytningar gjorts med
    "enter" (skapar en horisontal bläddringslist).



<form>
<label for="meddelande">Meddelande:</label><br>
<textarea id="meddelande" name="meddelande"
rows="3" cols="40" wrap="physical"></textarea>
</form>


 Till Toppen 

Kryssrutor & Radioknappar

Kryssrutor används när du vill att dina besökare skall kunna välja mellan ett eller flera alternativ som svar. Om endast ett alternativ av flera ska vara möjligt att välja, är det radioknappar som gäller.

Med attributet name ger du en grupp knappar eller rutor ett namn så att det går att tolka svaren. Här bör du alltså använda SAMMA värde i attributet name på alla alternativ.

Med attributet value namnger du de olika alternativen så att du vet vad som blivit ikryssat. Här bör du då använda OLIKA värden...

För att formuläret ska fungera korrekt bör du också identifiera de olika alternativen med attributet id.


Radioknappar - "radio"

För radioknappar används taggen input och attributet type med värdet radio.


Exempel

Hur är läget? ( bara ett alternativ )




<form>

<p>Hur är läget?</p>

<input type="radio" name="hurarlaget" id="finemang" value="finemang">
<label for="finemang"> Finemang! </label>

<input type="radio" name="hurarlaget" id="sisadar" value="sisadar">
<label for="sisadar"> Sisådär </label>

<input type="radio" name="hurarlaget" id="det-duger" value="det-duger">
<label for="det-duger"> Det duger...</label>

</form>


Kryssrutor - "checkbox"

För kryssrutor används taggen input med attributet checkbox. De fungerar precis som "Radioknapparna" ovan men här kan man kryssa i flera alternativ.



Exempel

På Julen brukar jag: ( fler alternativ går bra )





<form>

<p>På Julen brukar jag:</p>

<input type="checkbox" name="jul" id="mumsa" value="mumsa">
<label for="mumsa"> Mumsa knäck </label>

<input type="checkbox" name="jul" id="paket" value="paket">
<label for="paket"> Öppna paket</label><br>

<input type="checkbox" name="jul" id="tomte" value="tomte">
<label for="tomte"> Vara Jultomte </label>

<input type="checkbox" name="jul" id="bahamas" value="bahamas">
<label for="bahamas"> Sticka till Bahamas</label>

</form>


Förvalda alternativ - "checked"

Om du vill att något alternativ ska vara förvalt skrivs checked in i input-taggen. Det här fungerar både för radioknappar och kryssrutor.



Exempel

Vill du att en massa reklam ska skickas till dig med E-post?

Ja, va' kul!   Nej


<input type="radio" name="reklam" id="Ja" value="Ja" checked>


 Till Toppen 

Rullgardinsmeny & Flervalslista

Med taggen select skapas menyer och listor där man kan välja ett eller flera alternativ. De namnges med name och id. Alternativen skrivs in med option. Glöm inte slut-taggarna!




Exempel 1





<form>
<label for="ninetnet">Jag tycker att NinetNet är:</label><br>
<select name="ninetnet" id="ninetnet">
<option>-- Välj ett Alternativ --</option>
<option>Jättebra!</option>
<option>Super!</option>
<option>Toppen!</option>
</select>
</form>

• Här kan det vara bra att som ovan skapa en rubrik före alternativen.




Exempel 2

Med size väljer man hur många rader som ska synas. Vill man att fler alternativ ska kunna väljas med Ctrl+klick skrivs multiple. Om du vill att något alternativ ska vara förvalt skrivs selected i option.







<form>
<label for="sommar">På Sommaren brukar jag:</label><br>
<select name="sommar" id="sommar" size="3" multiple>
<option>Bada</option>
<option>Sola</option>
<option selected>Svära över vädret</option>
<option>Sticka till Bahamas</option>
</select>
</form>



Exempel 3

Har du många alternativ kan du gruppera dem med optgroup. Med attributet label anger man vad gruppen ska ha för rubrik. Observera slut-taggen!






<form>
<label for="ninetnet">På Sommaren brukar jag:</label><br>
<select name="sommar" id="sommar">
<option>-- Välj ett Alternativ --</option>
<optgroup label="Om det är sol">
<option>Bada</option>
<option>Sola</option>
</optgroup>
<optgroup label="Om det regnar">
<option>Svära över vädret</option>
<option>Sticka till Bahamas</option>
</optgroup>
</select>
</form>


 Till Toppen 

Sänd & Rensa - knappar

För att skicka eller rensa innehållet i ett formulär används knapparna submit och reset. Med value anger du vad som ska stå på knapparna



Exempel





<form>

---- Här infogar du kontrollerna i formuläret ---

<input type="submit" name="skicka" value="Skicka">
<input type="reset" name="rensa" value="Rensa">

</form>


Submit med egen bild

Om du vill kan du ersätta den submit-knapp som visas som standard med en egen bild. Observera att det inte fungerar med reset-knappar.



Exempel





<input type="image" src="bild.gif" name="skicka" value="submit">


Det finns också andra möjligheter att byta utseendet på knapparna som fungerar även för "reset". Men då måste man använda CSS! Läs vidare!

Här kan du läsa mer om hur man använder CSS för att förändra formulärets strandardutseende.


Snygga till formuläret med CSS  
 Till Toppen 
  Iframe
HTML-Finesser