Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lära Utforska Olika Inmatningstyper i HTML | HTML-Formulär och Användarinmatning
Ultimate HTML

book
Utforska Olika Inmatningstyper i HTML

HTML tillhandahåller olika <input>-element som gör det möjligt för dig att fånga olika typer av data från användare. Låt oss utforska några vanligt använda inputtyper:

email och password

  • type="email": används för e-postinmatningsfält som kräver en giltig e-postadress. Webbläsaren validerar automatiskt e-postadressen och uppmanar användaren att korrigera ogiltiga inmatningar;

  • type="password": används för lösenordsfält där den inmatade texten maskeras för säkerhet. Du kan också ange attributen minLength och maxLength för att ställa in lösenordslängdskrav.

html

index.html

copy
<form onsubmit="return false">
<!-- Email input -->
<label for="mail">Email</label>
<input type="email" id="mail" />
<!-- Password input -->
<label for="password">Password</label>
<input type="password" id="password" />
<button type="submit">Submit</button>
</form>

number

type="number": används för numerisk inmatning. Du kan definiera ett specifikt intervall med attributen min och max och ställa in ett specifikt steg med attributet step.

html

index.html

copy
<form onsubmit="return false">
<label for="year">Year of birth</label>
<input type="number" min="1900" max="2023" id="year" />

<label for="height">Height with 0.1 step</label>
<input type="number" id="height" step="0.1" min="0.1" max="10.0" />

<button type="submit">Submit</button>
</form>

telephone

type="tel": avsedd för inmatning av telefonnummer, men den utför ingen validering av inmatningen. Det är upp till utvecklaren att validera inmatningen och säkerställa att det är ett giltigt telefonnummer.

html

index.html

copy
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

<button type="submit">Submit</button>
</form>

kryssruta

type="checkbox": tillåter användaren att välja ett eller flera alternativ från fördefinierade val. Attributet checked gör en kryssruta markerad som standard.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>

radio

type="radio": skapar en uppsättning alternativ där endast ett alternativ kan väljas. En radioknapp representerar varje alternativ, och att välja ett avmarkerar automatiskt de andra. Varje radioknapp bör ha ett unikt value-attribut för att identifiera det.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
<input type="radio" name="dish" value="pasta" checked />
Pasta
</label>
<label>
<input type="radio" name="dish" value="pizza" />
Pizza
</label>
<label>
<input type="radio" name="dish" value="burger" />
Burger
</label>
<label>
<input type="radio" name="dish" value="steak" />
Steak
</label>
</form>

range

type="range": skapar en skjutreglagekontroll som tillåter användare att välja ett värde inom ett specifikt intervall. Du kan använda min, max, step och value-attribut för att definiera dess beteende.

html

index.html

js

index.js

copy
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>

Notera

JavaScript är inte fokus för denna kurs, så logiken bakom det kommer att hoppas över.

datum och tid

  • type="date": tillåter användare att välja ett datum från en kalenderpopup;

  • type="time": tillåter användare att ange en tid i 24-timmarsformat;

  • type="datetime-local": kombinerar tid- och datuminmatningar.

Exempel:

html

index.html

copy
<form onsubmit="return false">
<!-- Date input -->
<label for="date">Date</label>
<input type="date" min="1970-01-01" max="2070-01-01" id="date" />

<!-- Time input -->
<label for="time">Time</label>
<input type="time" id="time" />

<!-- Date and Time input -->
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-time" />
</form>

Notera

För konsekvent styling över olika enheter används ofta färdiga lösningar för popup-kalendrar och tidsinmatningar.

question mark

Vad är den största skillnaden mellan type="email" och type="password" inmatningsfält?

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 5

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

We use cookies to make your experience better!
some-alt