Referens
HTML input

HTML input

HTML input taggen anger ett formulärobjekt.

Exempel:

Skriv ditt namn i rutan!

HTML:

<form action="hej.php" method="get">
   <input type="text" name="dittnamn">
   <input type="submit" value="Skicka">
</form>

Elementet input skapar ett formulärobjekt i ett formulär. I stort sett alla formulärobjekt måste ha attributen "type" och "name"

  • "type" – anger typ av formulärobjekt.
  • "name" – alla formulärobjekt utom "submit" kräver attributet "name". Värdet på "name" blir det variabelnamn som skickas till servern.

Det finns nio olika typer av formulärobjekt som bestäms av attributet "type".

Attributet type="värde"
Typ av formulärobjekt Värde
knappar button
kryssrutor checkbox
filöverföring file
gömda fält hidden
bildknappar image
lösenordsrutor password
radioknappar radio
återställningsknappar reset
kommandoknappar submit
textrutor text

Observera att det även går att skapa knappar med elementet button. Skillnaden är att detta elementet inte är ett tomt element och går att lägga in innehåll i.

Läs mer om HTML input i HTML formulär

HTML input
Elementtyp Sluttagg Utfasat Doctype
Inlineelement Nej Nej Strict, Transitional, Frameset
Elementet får innehålla
Inget
Elementet får finnas i
Blockelement, inlineelement utom button
Skillnad mellan HTML och XHTML
I HTML saknar tomma element slut-tagg: Ex: <iput>
I XHTML måste tomma element stängas. Ex: <input />

Tips för HTML input

Använd elementet label för att skapa textetiketter som användaren kan klcka på för att markera formulärobjekten.

Exempel:


HTML:

<form>
  <label for="katt">Katt</label>
  <input type="radio" name="djur" id="katt" />
  <br />
  <label for="hund">Hund</label>
  <input type="radio" name="djur" id="hund" />
</form>

Observera att attribut "for" i elementet label måste vara samma som attributet "id" hos elementet input.

HTML input attribut

Valbara attribut
Attribut Beskrivning Värde
accept Anger lista med tillåtna MIME-typer
(om type="file")		 MIME-typ
align Anger justering av bildobjektet
(om type="image")		 left, right, top, middle, bottom
alt Anger kort beskrivning av bildobjektet
(om type="image")		 text
checked Anger att kryssrutan/radioknappen är ifylld
(om type="checkbox" eller "type=radio")		 checked
disabled Anger att objektet är avstängt disabled
maxlength Anger maximalt antal tecken i ett textfält
(om type="text" eller type="password")		 siffra
name Anger objektets namn text
readonly Anger att objektets värde ej kan ändras readonly
size Anger antal tecken i ett textfält siffra
src Anger URL för bildobjektet
(om type="image")		 URL
name Anger knappens namn text
type Anger knappens typ button, checkbox, file, hidden, image, password, radio, reset, submit, text
usemap Anger karta för aktiva områden
(om type="image")		 text
value Anger objektets värde text

Universella attribut
Attribut Beskrivning Värde
accesskey Anger en snabbtangent för att hoppa till ett element tangentkod
tabindex Anger "tab ordningen" på olika element heltal
id Anger att elements unika identitet text
class Anger vilken klass eller vilka klasser ett element tillhör text
style Tilldelar elementet en egen visuell stil CSS attribut och värden
title Anger en titel för eller kort beskrivning av elementet text
dir Anger textriktning för innehållet rtl, ltr
lang Anger språk på elementets innehåll språkkod
xml:lang Används istället för "lang" när koden skrivs i XHTML 1.0 språkkod

Händelse attribut
Attribut Utlösande händelse Värde
onblur Elementet tappar fokus javascript
onfocus Elementet får fokus javascript
onchange Elementets innehåll ändras javascript
onselect Text har markerats i elementet javascript
onclick Enkelklick med musen på elementet javascript
ondblclick Dubbelklick med musen på elementet javascript
onkeydown En tangent trycks ned javascript
onkeyup En tangent släpps upp javascript
onkeypress En tangent trycks ned eller hålls nedtryckt javascript
onmousedown En musknapp trycks ned över elementet javascript
onmouseup En musknapp släpps upp över elementet javascript
onmouseover Muspekaren flyttas in över elementet javascript
onmousemove Muspekaren flyttas inom elementet javascript
onmouseout Muspekaren flyttas ut från elementet javascript
| Mer