Vi vet redan hur man bygger formulär med inmatningsfält och etiketter. Nu ska vi titta på andra användbara attribut för input-element som förbättrar deras funktionalitet och användbarhet.

Vanliga attribut för input-element

Platshållare

placeholder visar en ledtråd eller exempeltext i inmatningsfältet, vilket vägleder användare om vilken typ av inmatning som förväntas. Användbart för att ge kontext eller instruktioner till användare innan de matar in data.

<input type="text" placeholder="Enter your email" />

Namn

name anger inmatningsfältets namn, vilket används för att identifiera inmatningsdata när formuläret skickas. Varje inmatningsfält i ett formulär bör ha ett unikt name-attribut.

<input type="text" name="username" />

Värde

value anger det initiala eller förvalda värdet för inmatningsfältet. Förfyller inmatningsfältet med ett specifikt värde när sidan laddas.

<input type="tel" value="+1 (484) 298-9732" />

Obligatorisk

required anger att inmatningsfältet måste fyllas i innan formuläret kan skickas. Förhindrar att formuläret skickas om det obligatoriska fältet lämnas tomt.

<input type="password" required />

Inaktiverad

disabled inaktiverar inmatningsfältet, vilket förhindrar användare från att interagera med det eller ange data. Användbart för att visa skrivskyddade eller inaktiva inmatningsfält.

<input type="text" value="New York" disabled />

Skrivskyddad

readonly gör inmatningsfältet skrivskyddat, vilket tillåter användare att se värdet men inte ändra det. Liknar attributet disabled, men tillåter fortfarande att fältet fokuseras och markeras.

<input type="text" value="USA" readonly />

Min och Max

min och max anger det minsta och största tillåtna värdet för numeriska inmatningsfält. Användbart för att upprätthålla begränsningar på numerisk inmatning, såsom ålder eller kvantitet.

<input type="number" min="21" max="99" />

Exempel: Följande exempel innehåller alla nödvändiga attribut och element som behövs för formuläret.

Videohandledning