HTML-syötetyypit

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

Syötetyyppi: text

<input type="text"> määritteleeTekstisyö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ötetyyppi: password

<input type="password"> MäärittääSalasanan kenttä:

Esimerkki

<form>
 Käyttäjän 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än nimi:


Käyttäjän salasana:

Huomautus:Salasanan kentän merkistö merkitään peittämällä (näytetään tähti tai täytetty ympyrä).

Syötetyyppi: submit

<input type="submit"> Määrittäälähettäälomakkeen tiedotLomakkeen käsittelyohjelmapääte.

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

Syöte Tyyppi: valintapainike

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

Radiovalitsimet sallivat käyttäjän valita VAIN yhden vaihtoehdon rajallisesta 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

Syöte Tyyppi: valintaruutu

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

Valintaruudut mahdollistavat käyttäjän valitseman yhden tai useamman vaihtoehdon rajallisesta 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

Syöte Tyyppi: 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ötteentyyppi

HTML5 lisäsi useita uusia syötteentyyppien:

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

Huomautus:Vanhat selaimet eivät tue syötteentyyppiä, ne katsotaan tekstityypiksi.

Syötteentyyppi: number

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

Voit rajoittaa lukuja.

Selaimesen tuen mukaan rajoitukset voidaan soveltaa syötteen kenttiin.

Esimerkki

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

Kokeile itse

Syötteen rajoitukset

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

Ominaisuus Kuvaus
disabled Määritä, että syötteen kenttä tulisi olla poissa käytöstä.
max Määritä syötteen kentän suurin arvo.
maxlength Määritä syötteen kentän suurin merkistöjen määrä.
min Määritä syötteen kentän pienin arvo.
pattern Määritä syötteen arvon tarkistava säännöllinen lauseke.
readonly Määritä, että syötteen kenttä on lukko (ei muokattavissa).
required Määritä, että syötteen kenttä on pakollinen (pakollinen täyttö).
size Määritä syötteen kentän leveys (merkistöinä).
step Määritä syötteen kentän sallittu lukuero.
value Määritä syötteen kentän oletusarvo.

Opit seuraavassa luvussa lisää syötteen rajoituksista.

Esimerkki

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

Kokeile itse

Syötteentyyppi: date

<input type="date"> Käytetään syötteen kenttiin, jotka pitäisi 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 time zone).

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 time zone).

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 time zone).

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öteinen tyyppi: email

<input type="email"> Käytetään syötteenkenttiin, jotka pitäisi sisältää sähköpostiosoitteen.

Selaimen tuen mukaan sähköpostiosoite voidaan vahvistaa automaattisesti lähetettäessä.

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

Esimerkki

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

Kokeile itse

Syöteinen tyyppi: search

<input type="search"> Käytetään hakukenttiin (hakukentän ilme on samanlainen kuin tavallinen tekstikenttä).

Esimerkki

<form>
  Hae Googlesta:
  <input type="search" name="googlesearch">
</form>

Kokeile itse

Syöteinen tyyppi: tel

<input type="tel"> Käytetään syötteenkenttiin, jotka pitäisi sisältää puhelinnumeron.

Vain Safari 8 tukee tel-tyyppiä tällä hetkellä.

Esimerkki

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

Kokeile itse

Syöteinen tyyppi: url

<input type="url"> Käytetään syötteenkenttiin, jotka pitäisi sisältää URL-osoitteen.

Selaimen tuen mukaan URL-kenttä voidaan vahvistaa automaattisesti lähetettäessä.

Jotkut älypuhelimet tunnistavat url-tyypin ja lisäävät näppäimistöön ".com" URL-syötteen vastaamiseksi.

Esimerkki

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

Kokeile itse