Input-taggen

Taggen input skapar olika element i HTML-formulär: vanliga inmatningsfält, fält för lösenordsinmatning, kryssruta (checkbox), alternativknappar (radio), knapp.

Taggen input ska ligga inuti taggen form. Detta är inte obligatoriskt, men nödvändigt för att skicka data till servern och sedan bearbeta dem via PHP.

Kräver ingen avslutande tagg.

Attribut

Attribut	Beskrivning
type	Ställer in typen av inmatningsfält. Se alternativen nedan.
value	Standardvärdet i inmatningsfältet. När det gäller en knapp anger dess text. Se mer i attributet value.
placeholder	Tips i inmatningsfältet, se mer i attributet placeholder.
name	Inmatningsfältets namn. Behövs för att hämta fältets data i PHP. För att formuläret ska fungera korrekt får inmatningsfälten inte ha samma namn som varandra (i ett formulär). Om de är lika - i PHP kommer data från det inmatningsfält som ligger längre ner i HTML-koden att anlända.
disabled	Låser formulärelementet (inte bara input, utan nästan vilket som helst), se mer i attributet disabled.

Värden för attributet type

Värde	Beskrivning
text	Skapar ett vanligt textinmatningsfält.
password	Skapar ett textinmatningsfält för lösenord. Försök skriva text i det - den kommer att visas som stjärnor.
checkbox	Skapar en kryssruta. Se mer i checkbox.
radio	Skapar en alternativknapp (radio). Se mer i radio.
hidden	Skapar en dold input, som inte kommer att synas på skärmen, men som skickar data som finns i attributet value till servern.
button	Skapar en knapp. Att klicka på denna knapp kommer inte att skicka formuläret till servern. Den kan användas inuti en länk eller via JavaScript. Som standard har knappen ingen text (exempel på knapp utan text: ), den anges med value. Se även taggen button, som också skapar en knapp.
submit	Skapar en knapp som skickar data till servern. Knappens text beror på webbläsaren, den kan ändras med value. Se även taggen button, som också skapar en knapp.
reset	Skapar en knapp som rensar ett ifyllt formulär. Knappens text beror på webbläsaren, den kan ändras med value.
file	Skapar en knapp för filval. Det är förbjudet att ändra designen på denna knapp via CSS (men det finns listiga sätt). Om du behöver ett sådant fält i formuläret, så måste taggen form ha attributet enctype med värdet multipart/form-data.

Nya värden för attributet type i HTML5

Dessa attributvärden är nya, de dök upp först i HTML5, så i vissa webbläsare kan de inte fungera eller fungera olika i olika webbläsare.

Om webbläsaren inte kan förstå innehållet i attributet type (till exempel om det inte stöds eller skrivits felaktigt), kommer den att betrakta elementet som ett vanligt text- input, som om type hade värdet text.

Se exemplen nedan i olika webbläsare. Försök mata in text i inputs och klicka på skicka-knappen. Om texten är felaktig eller fältet är tomt - kommer webbläsaren att ge ett felmeddelande. Till exempel, om du i ett fält av typen email skriver en felaktig e-postadress - kommer webbläsaren inte att låta dig skicka formuläret och visar ett felmeddelande (felmeddelandets text och dess utseende kan inte ändras via html css). Om fältet är tomt - kommer webbläsaren också att ge ett fel, detta uppnås med attributet required:

Värde	Beskrivning
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Se även