(X)HTML Del 8 - Formulär

Jag vill bara påminna dig om att detta är XHTML och inte standard HTML, så här måste vi stänga alla objekt. Om du inte vet hur man gör det så bör du läsa Del 7 av denna serie.

Öppna formuläret

<form name="form1" id="form1" method="post" action="sida2.html">

Vi börjar med att säga att det är formulär: <form
Ger formuläret namn och id
Säger att vi ska använda metoden POST, alternativet är GET
Sedan skriver vi att vi ska skickas till sida2.html när vi klickat på knappen

Textruta

<input type="text" name="ruta1" id="ruta1" value="Hej" size="10" maxlength="8" />

Vi vill ha en textruta: <input type="text"
Ge det namn och id
Sätta ett värde på det (frivilligt) value="Hej". Den texten kommer att visas i textrutan
Storleken på rutan size="10". Här bestämde vi att den ska vara lika stor som längden på 10 bokstäver (frivilligt)
maxlength="8" säger att man 8 tecken får skrivas i denna ruta (frivilligt)

Lösenord

Det är samma kod som för textrutan ovan, man byter bara ut type="text" mot type="password".

<input type="password" name="los1" id="los1" value="Hej" size="10" maxlength="8" />

Textruta med flera rader

Nu ska vi skapa en större textruta:

<textarea name="text1" id="text1" rows="5" cols="10" wrap="off">Hej igen</textarea>

Det nya här förutom att det är en textarea är:
rows="5" säger att denna textarea ska vara 5 rader lång
cols="10" säger att denna textarea ska vara 10 kolumner bred
Hej igen är ett värde som kommer att visas i denna textarea

Som du ser så har vi markerat wrap="off", det gjorde vi för att det är ett "kapitel" för sig.
Med wrap kan du bestämma hur radbrytningen ska se ut i textarea. Det finns flera olika alternativ att välja mellan:

off : Ingen radbrytning. En horisontell scroll visas i textarean såväl som en vertikal scroll
physical : Radbrytning sker när man kommer till slutet av raden man skriver på
virtual : Är ungefär som physical (jag själv kan tyvärr inte skillnaden, ska försöka lära mig det)

Hej igen

Kryssrutor

Man kan även skapa kryssrutor till när man ska kunna välja flera alternativ samtidigt:

<input type="checkbox" name="favSiffra" id="favSiffra0" value="0" />

<input type="checkbox" name="favSiffra" id="favSiffra1" value="1" />

<input type="checkbox" name="favSiffra" id="favSiffra2" value="2" />

Det enda jag behöver förklara här är checkbox som helt enkelt betyder kryssruta. Här kan man välja flera favorit siffror samtidigt.

Radioknappar

<input type="radio" name="favSiffra" id="favSiffra0" value="0" />

<input type="radio" name="favSiffra" id="favSiffra1" value="1" />

<input type="radio" name="favSiffra" id="favSiffra2" value="2" />

Inte så mycket att förklara här va? =)
Jo förresten, en sak att förklara. Om jag nu ska välja en av dessa radioknapparna så skulle de andra bli avkryssade. Varför? Jo för att radio är menat till att man bara ska kunna välja en i gruppen. Man kan alltså bara välja en favorit siffra här.

Kan jag göra så att jag kan välja flera som kryssrutor?

Ja visst, men då kan de inte heta samma sak. Ändra name="" till unikt namn för varje knapp så går det. Men varför krångla till det? Använd kryssrutorna istället isåfall.

Rullgardinmeny

Det brukar även kallas för dropdownmeny. Nedan ser du koden:

<select name="birthdate" id="birthdate">

<option selected="selected">1985</option>

<option>1984</option>

<option>1983</option>

<option>1982</option>

</select>

Vi börjar med att ge namn och id till menyn, som vi öppnar med <select> och stänger med </select>
Sedan lägger vi in valalternativ (<option>) och stänger med </option>

Märk väl att på ett av alternativen så har jag valt att förvälja/förmarkera 1985 med hjälp av selected="selected"

Flervalsmeny

Du kan även omvandla den menyn till ett flervalsmeny genom att lägga till muliple="multiple". Du kan även bestämma storleken på menyn (antal rader som ska synas samtidigt. Det gör du med...just det...size="3". Om du inte vill att man ska kunna välja flera alternativ samtidigt, ta då bara bort multiple attributet.

<select name="birthdate" id="birthdate" size="3" multiple="multiple">

<option selected="selected">1985</option>

<option>1984</option>

<option>1983</option>

<option>1982</option>

</select>

Vet du hur man väljer flera samtidigt? Genom att hålla ned Ctrl knappen medan man väljer.

Knappar

<input type="submit" name="submit" id="submit" value="Skicka" />

Det finns flera olika typer av knappar:

submit är den knappen som skickar uppgifterna
reset är den knappen som återställer formuläret till dess standard läge
button är en "död" knapp, den gör ingenting. Den är mer anpassningsbar när man ska jobba med t.ex. JavaScript.

Övriga attribut

Visste du att man kan avaktivera en knapp eller ett fält? Det gör man på följande sätt:

<input type="button" name="btn" id="btn" value="Knapp" disabled="disabled" />

Man kan också göra en textruta läsbar men inte redigerbar:

<input type="text" name="t" id="t" value="Min text" readonly="readonly" />

Slutord

Kom ihåg att alla dessa objekt ska ligga mellan <form> och </form>.

Skapades: 2007-07-09 11:50:41
Skribent: Shadi
Lästs 3044 gånger
Betyg: 0 (artikeln har endast 0 röster, det krävs minst 5 för ett betyg)

Kommentarer

Ingen har kommenterat denna artikel än.