HTML

Webbformulär

Formulär, <form>, är det vanligaste HTML-element du använder för att kunna ta emot input från användaren. Den data som samlas in med hjälp av formuläret kan användas på många olika sätt. Den kan användas för att lägga till information på sajten, för att köpa ett par nya skor på nätet, att skicka ett epostmeddelande eller vad som helst annat utvecklaren av sajten kan komma på att göra med den inmatade datan.

För att datan som samlas in ska hamna någonstans behövs i de flesta fall att den behandlas med något slags programfunktion. Det kan vara användarscript, oftast javascript, serverscript som php eller andra programspråk men det finns även sätt att behandla data som redan finns inbyggda i språket och webbläsaren, som att skicka epost direkt från användarens eget epostprogram.

Ett formulär definieras alltså genom elementet <form>. I formuläret lägger man in olika kontroller, som i detta fall är olika sätt en användare kan mata in data. Det kan vara knappar, kryssrutor eller rutor där användaren kan mata in data med tangentbordet.

Kontroller

Den vanligaste kontrollen i HTML-formulär är <input>, input kan vara av många olika slag. De vanligaste attributen till <input> är kanske:

checkbox
Kryssruta
radio
Radioknappar, förutom utseendet, skiljer sig dessa från kryssrutor genom att bara en åt gången i uppsättningen kan vara markerade
text
En ruta för textinmatning
submit
En knapp för att skicka inmatad data
reset
En knapp för att återställa formuläret

Andra viktiga kontroller, som har egna elementnamn är:

<select>
En flervalslista
<textarea>
Ett större område för användaren att skriva i
<button>
En knapp, som kan ges olika funktioner

Fieldset

I många fall kan det vara viktigt att koppla ihop en viss uppsättning kontroller i ett formulär, kanske tydligast när det gäller radioknappar där bara en ska kunna vara intryckt samtidigt, använder du elementet <fieldset>.

Ett exempel jag lånat från W3c, förmuläret nedan är ett fiktivt formulär för att beställa pizza:

<form>
   <div>label>Customer name: <input>/label>/div>
   <div>label>Telephone: <input type=tel>/label>/div>
   <div>label>E-mail address: <input type=email>/label>/div>
   <fieldset>
      <legend> Pizza Size </legend>
      <div>label> <input type=radio name=size> Small </label>/div>
      <div>label> <input type=radio name=size> Medium </label>/div>
      <div>label> <input type=radio name=size> Large </label>/div>
   </fieldset>
   <fieldset>
      <legend> Pizza Toppings </legend>
      <div>label> <input type=checkbox> Bacon </label>/div>
      <div>label> <input type=checkbox> Extra Cheese </label>/div>
      <div>label> <input type=checkbox> Onion </label>/div>
      <div>label> <input type=checkbox> Mushroom </label>/div>
   </fieldset>
   <div>label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900">/label>/div>
   <div>label>Delivery instructions: <textarea>/textarea>/label>/div>
   <div>button>Submit order</button>/div>
</form>

Som du kan se använder de här <div> för att dela in formuläret i delar, detta är ingenting speciallt för just formulär, men ett praktiskt sätt att just dela in formuläret i tydliga delar.

Mer information kan du hitta hos W3c här.