HTML-syöttötyypit

Tämä luku kuvaa <input>-elementin syöttötyyppejä.

Syöttötyyppi: text

<input type="text"> MääritelläänTekstisyöttöyksirivisen syöttökentän:

Esimerkki

<form>
 Etunimi:<br>
<input type="text" name="firstname">
<br>
 Sukunimi:<br>
<input type="text" name="lastname">
</form>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

Etunimi:


Sukunimi:

Syöttötyyppi: password

<input type="password"> määrittääSalasanan kenttä：

Esimerkki

<form>
 Käyttäjänimi:<br>
<input type="text" name="username">
<br>
 Käyttäjän salasana:<br>
<input type="password" name="psw">
</form>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

Käyttäjänimi:


Käyttäjän salasana:

Huomautus:Salasanan kentän merkit käsitellään peittotehtävänä (näytetään tähtinä tai täyttyneinä ympyröinä).

Syöttötyyppi: submit

<input type="submit"> määrittääLähetälomakkeetiedotLomakkeen käsittelyohjelmapainikkeet.

Lomakkeen käsittelyohjelma (form-handler) on yleensä palvelusivu, joka sisältää skriptejä, jotka käsittelevät syötettyjä tietoja.

Määritä lomakkeen action-ominaisuudessa lomakkeen käsittelijä (form-handler):

Esimerkki

<form action="action_page.php">
Etunimi:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Sukunimi:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

Etunimi:


Sukunimi:


Jos laitat pois lomakkeen lähettämispainikkeen value-ominaisuuden, painike saa oletusarvon:

Esimerkki

<form action="action_page.php">
Etunimi:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Sukunimi:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Kokeile itse

Input Type: radio

<input type="radio"> Määrittää valintapainikkeen.

Radiovalitsimet mahdollistavat käyttäjän valitsevan VAIN YHDEN rajoitetusta valikoimasta:

Esimerkki

<form>
<input type="radio" name="sex" value="male" checked>Mies
<br>
<input type="radio" name="sex" value="female">Nainen
</form>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

Mies

Nainen

Input Type: valintaruutu

<input type="checkbox"> Määrittää valintaruudun.

Valintaruudut sallivat käyttäjän valita NOLLAKOHTAISIIN tai useampiin rajoitetusta valikoimasta.

Esimerkki

<form>
<input type="checkbox" name="vehicle" value="Bike">Minulla on pyörä
<br>
<input type="checkbox" name="vehicle" value="Car">Minulla on auto 
</form>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

Minulla on pyörä

Minulla on auto

Input Type: painike

<input type="button"> määrittääpainike。

Esimerkki

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa tältä:

HTML5 syöte tyyppjä

HTML5 on lisännyt useita uusia syöte tyyppjä:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Huomautus:Vanhat web-selaimet eivät tue syöte tyyppiä, ne katsotaan tekstityypiksi.

Syöte tyyppi: number

<input type="number"> Käytetään syötteen kenttiin, jotka tulisi sisältää lukuarvon.

Voit rajoittaa lukuja.

Selaimen tuen mukaan rajoitukset voidaan soveltaa syöte kenttiin.

Esimerkki

<form>
  Määrä (välillä 1 ja 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Kokeile itse

Syöte rajoitukset

Tässä luetellaan joitakin yleisimpiä syöte rajoituksia (joista jotkut ovat HTML5:ssä lisättyjä):

Atribuutti Kuvaus
disabled Määritä syöte kenttä käytettäväksi (ei käytettävissä).
max Määritä syöte kentän suurin arvo.
maxlength Määritä syöte kentän suurin merkkimäärä.
min Määritä syöte kentän pienin arvo.
pattern Määritä syöte kentän arvon tarkistava säännöllinen lauseke.
readonly Määritä syöte kenttä lukuisaksi (ei muokattavissa).
required Määritä syöte kenttä pakolliseksi (pakollinen täyttö).
size Määritä syöte kentän leveys (merkkien lukuisena).
step Määritä syöte kentän sallittu numerointiintervalti.
value Määritä syöte kentän oletusarvo.

Opit seuraavassa luvussa lisää syöte rajoituksista.

Esimerkki

<form>
  Määrä:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Kokeile itse

Syöte tyyppi: date

<input type="date"> Käytetään syötteen kenttiin, jotka tulisi sisältää päivämäärän.

According to browser support, the date picker will appear in the input field.

Esimerkki

<form>
  Syntymäpäivä:
  <input type="date" name="bday">
</form>

Kokeile itse

Voit lisätä rajoituksia syötteeseen:

Esimerkki

<form>
  Syötä päivämäärä ennen 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  Enter a date after 2000-01-01:<br>
</form>

Kokeile itse

Input type: color

<input type="color"> Used for input fields that should contain colors.

According to browser support, the color picker will appear in the input field.

Esimerkki

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

Kokeile itse

Input type: range

<input type="range"> Used for input fields that should contain values within a certain range.

According to browser support, the input field can be displayed as a slider control.

Esimerkki

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Kokeile itse

You can use the following attributes to specify restrictions: min, max, step, value.

Input type: month

<input type="month"> Allow users to select month and year.

According to browser support, the date picker will appear in the input field.

Esimerkki

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Kokeile itse

Input type: week

<input type="week"> Allow users to select week and year.

According to browser support, the date picker will appear in the input field.

Esimerkki

<form>
  Select a week:
  <input type="week" name="week_year">
</form>

Kokeile itse

Input type: time

<input type="time"> Allow users to select time (without timezone).

According to browser support, the time picker will appear in the input field.

Esimerkki

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>

Kokeile itse

Input type: datetime

<input type="datetime"> Allow users to select date and time (with timezone).

According to browser support, the date picker will appear in the input field.

Esimerkki

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

Kokeile itse

Input type: datetime-local

<input type="datetime-local"> Allow users to select date and time (without timezone).

According to browser support, the date picker will appear in the input field.

Esimerkki

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

Kokeile itse

Syötyntyyppi: email

<input type="email"> Käytetään syöttökenttiin, joka tulisi sisältää sähköpostiosoitteen.

Selaimen tuen mukaan sähköpostiosoite voidaan vahvistaa automaattisesti lähetyksen yhteydessä.

Jotkut älypuhelimet tunnistavat email-tyypin ja lisäävät näppäimistöön ".com" vastaamaan sähköpostisyöttöä.

Esimerkki

<form>
  Sähköposti:
  <input type="email" name="email">
</form>

Kokeile itse

Syötyntyyppi: search

<input type="search"> Käytetään hakukenttään (hakukenttä näyttää samalta kuin tavallinen tekstikenttä).

Esimerkki

<form>
  Etsi Google:
  <input type="search" name="googlesearch">
</form>

Kokeile itse

Syötyntyyppi: tel

<input type="tel"> Käytetään syöttökenttiin, joka tulisi sisältää puhelinnumeron.

Vain Safari 8 tukee tyyppiä tel.

Esimerkki

<form>
  Puhelin:
  <input type="tel" name="usrtel">
</form>

Kokeile itse

Syötyntyyppi: url

<input type="url"> Käytetään syöttökenttiin, joka tulisi sisältää URL-osoitteen.

Selaimen tuen mukaan url-kenttä voidaan vahvistaa automaattisesti lähetyksen yhteydessä.

Jotkut älypuhelimet tunnistavat url-tyypin ja lisäävät näppäimistöön ".com" vastaamaan url-syöttöä.

Esimerkki

<form>
  Lisää kotisivusi:
  <input type="url" name="homepage">
</form>

Kokeile itse