HTML <input>-elementet låter oss skapa olika formulärkontroller för att samla in användarinmatning. Du kan anpassa beteendet och utseendet på dessa kontroller med hjälp av olika attribut. Låt oss utforska några vanligt använda attribut:

value

value-attributet används för att ställa in det initiala värdet för <input>-elementet. Det specifika värdet det tar beror på inmatningstypen:

• För knappar (type="button", type="reset", type="submit"), definierar det texten som visas på knappen;

• För text (type="text") och lösenord (type="password") fält, definierar det standardvärdet för inmatningsfältet;

• För kryssrutor (type="checkbox") och radioknappar (type="radio"), definierar det värdet som är associerat med inmatningen.

Notera

value-attributet kan inte användas med <input type="file">.

autofocus

Attributet autofocus anger att inmatningsfältet automatiskt ska ha fokus när webbsidan laddas. När sidan laddas kommer inmatningsfältet att väljas automatiskt, vilket gör att användaren kan börja skriva utan att först klicka på inmatningsfältet.

Obs

Autofocus fungerar inte här eftersom sidan inte laddas om när du klickar på "Kör kod"-knappen.

required

Attributet required används för att göra ett inmatningsfält obligatoriskt. Det anger att inmatningsfältet måste fyllas i innan användaren kan skicka formuläret. Om användaren försöker skicka formuläret utan att fylla i det obligatoriska inmatningsfältet, kommer de att få ett valideringsfelmeddelande som anger att fältet är obligatoriskt.

placeholder

Attributet placeholder ger en antydan eller exempel på det förväntade inmatningsvärdet till användaren. En kort textsträng visas inuti inmatningsfältet innan användaren anger något värde. Detta är användbart för fält som kräver specifik formatering, såsom telefon- eller kreditkortsnummer.

Notera

I exemplen ovan används olika type attribut för <input> elementen, vilket påverkar deras utseende och funktionalitet avsevärt. Du kommer att fördjupa dig i olika input-typer i nästa kapitel.