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

bookUtforska Olika Inputtyper i HTML

HTML tillhandahåller många <input>-typer som gör det möjligt att samla in olika typer av användardata. Nedan följer en översikt över de vanligaste typerna.

E-post och lösenord

  • type="email": accepterar e-postadresser och utför grundläggande validering i webbläsaren;
  • type="password": döljer de inmatade tecknen för säkerhet och kan använda minlength och maxlength.
index.html

index.html

copy

Nummer

type="number": accepterar numeriska värden. Använd min, max och step för att kontrollera det tillåtna intervallet.

index.html

index.html

copy

Telefon

type="tel": för telefonnummer. Ingen inbyggd validering. Utvecklare validerar det manuellt.

index.html

index.html

copy

Kryssruta

type="checkbox": möjliggör val av flera alternativ. Använd checked för att förvälja.

index.html

index.html

copy

Radio

type="radio": väljer ett alternativ från en grupp. Alla radio-knappar måste ha samma name.

index.html

index.html

copy

Räckviddsreglage

type="range": ett reglage för att välja ett tal inom ett intervall. JavaScript-logik utelämnas i denna kurs.

index.html

index.html

index.js

index.js

copy
Note
Notering

JavaScript-logik utelämnas i denna kurs.

Datum och tid

  • type="date": kalender-väljare;
  • type="time": tidsväljare;
  • type="datetime-local": kombinerar tid- och datumfält.
index.html

index.html

copy
Note
Notering

För enhetlig design använder utvecklare ofta färdiga UI-bibliotek istället för webbläsarens standardval.

Note
Läs mer

Du kanske har märkt att när du försöker fylla i vissa fält kan webbläsaren redan föreslå några autofyllningsalternativ. Webbläsaren kommer ihåg de värden du har angett i fälten och föreslår dem sedan för automatisk ifyllnad.

question mark

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

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

Suggested prompts:

Can you give examples of how to use each input type in HTML?

What are some best practices for validating user input with these types?

How do I style these input types with CSS?

bookUtforska Olika Inputtyper i HTML

Svep för att visa menyn

HTML tillhandahåller många <input>-typer som gör det möjligt att samla in olika typer av användardata. Nedan följer en översikt över de vanligaste typerna.

E-post och lösenord

  • type="email": accepterar e-postadresser och utför grundläggande validering i webbläsaren;
  • type="password": döljer de inmatade tecknen för säkerhet och kan använda minlength och maxlength.
index.html

index.html

copy

Nummer

type="number": accepterar numeriska värden. Använd min, max och step för att kontrollera det tillåtna intervallet.

index.html

index.html

copy

Telefon

type="tel": för telefonnummer. Ingen inbyggd validering. Utvecklare validerar det manuellt.

index.html

index.html

copy

Kryssruta

type="checkbox": möjliggör val av flera alternativ. Använd checked för att förvälja.

index.html

index.html

copy

Radio

type="radio": väljer ett alternativ från en grupp. Alla radio-knappar måste ha samma name.

index.html

index.html

copy

Räckviddsreglage

type="range": ett reglage för att välja ett tal inom ett intervall. JavaScript-logik utelämnas i denna kurs.

index.html

index.html

index.js

index.js

copy
Note
Notering

JavaScript-logik utelämnas i denna kurs.

Datum och tid

  • type="date": kalender-väljare;
  • type="time": tidsväljare;
  • type="datetime-local": kombinerar tid- och datumfält.
index.html

index.html

copy
Note
Notering

För enhetlig design använder utvecklare ofta färdiga UI-bibliotek istället för webbläsarens standardval.

Note
Läs mer

Du kanske har märkt att när du försöker fylla i vissa fält kan webbläsaren redan föreslå några autofyllningsalternativ. Webbläsaren kommer ihåg de värden du har angett i fälten och föreslår dem sedan för automatisk ifyllnad.

question mark

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

Select the correct answer

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 5
some-alt