Tipe input HTML

Bab ini mendeskripsikan tipe input elemen <input>.

Tipe input: teks

<input type="text"> didefinisikan untukinput teksmedan input baris tunggal untuk

Contoh

<form>
 Nama pertama:<br>
<input type="text" name="firstname">
<br>
 Nama keluarga:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pertama:


Nama keluarga:

Tipe input: password

<input type="password"> 定義Medan kata laluan：

Contoh

<form>
 Nama pengguna:<br>
<input type="text" name="username">
<br>
 Kata laluan pengguna:<br>
<input type="password" name="psw">
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pengguna:


Kata laluan pengguna:

Keterangan:karakter di medan password akan di proses pengamanan (diperlihatkan sebagai bintang atau bulatan yang keras).

Tipe input: submit

<input type="submit"> 定義kirimdata formulir keProgram pengelola formulirtombol.

Program pengelola formulir (form-handler) biasanya adalah halaman server yang mengandung skrip untuk mengelola data input.

Tentukan pengurus (form-handler) dalam atribut action butiran formulir:

Contoh

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

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Nama pertama:


Nama keluarga:


Jika anda melanggar atribut value butiran penghantar, butiran itu akan mendapatkan teks lalai:

Contoh

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

Coba Sendiri

Input Type: radio

<input type="radio"> 定義 butiran pilihan.

Butiran tombol pilihan membolehkan pengguna memilih HANYA SATU daripada bilangan pilihan terhad:

Contoh

<form>
<input type="radio" name="sex" value="male" checked>Laki-laki
<br>
<input type="radio" name="sex" value="female">Wanita
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Laki-laki

Wanita

Input Type: checkbox

<input type="checkbox"> 定義 bokongan centang.

Bokongan centang membolehkan pengguna memilih NOLUAN atau lebih pilihan daripada jumlah pilihan terhad.

Contoh

<form>
<input type="checkbox" name="vehicle" value="Bike">Saya ada sepeda
<br>
<input type="checkbox" name="vehicle" value="Car">Saya ada kereta 
</form>

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Saya ada sepeda

Saya ada kereta

Input Type: button

<input type="button"> 定義按鈕。

Contoh

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

Coba Sendiri

Kod HTML di atas kelihatan seperti ini dalam pelayar:

Jenis input HTML5

HTML5 menambah beberapa jenis input baru:

  • warna
  • tarikh
  • datetime
  • datetime-local
  • emel
  • bulan
  • nombor
  • sweep
  • cari
  • tel
  • masa
  • url
  • minggu

Keterangan:Jenis input lama web pelayar yang tidak disokong akan dianggap jenis input teks.

Jenis input: nombor

<input type="number"> Digunakan untuk medan input yang seharusnya mengandungi nilai nombor.

Anda dapat menghadkan nombor.

Batasan boleh diterapkan ke medan input berdasarkan dukungan pelayar.

Contoh

<form>
  Kuantiti (antara 1 dan 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Coba Sendiri

Batasan input

Di sini dihantar beberapa batasan input biasa (beberapa yang baru ditambahkan dalam HTML5):

Sifat Keterangan
disabled Tetapkan medan input seharusnya dihalang.
max Tetapkan nilai maksimum medan input.
maxlength Tetapkan jumlah aksara maksimum medan input.
min Tetapkan nilai minimum medan input.
pattern Tetapkan ekspresi reguler untuk memeriksa nilai input melalui.
readonly Tetapkan medan input hanya baca (tidak dapat diubah).
required Tetapkan medan input adalah wajib diisi (wajib diisi).
size Tetapkan lebar medan input (dalam aksara).
step Tetapkan interval angka sah medan input.
value Tetapkan nilai lalai medan input.

Anda akan belajar lebih banyak tentang batasan input dalam bab berikutnya.

Contoh

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

Coba Sendiri

Jenis input: tarikh

<input type="date"> Digunakan untuk medan input yang seharusnya mengandungi tarikh.

Berdasarkan keupayaan pelayar, pemilih tarikh akan muncul di dalam medan input.

Contoh

<form>
  Hari lahir:
  <input type="date" name="bday">
</form>

Coba Sendiri

Anda boleh menambah batasan untuk input:

Contoh

<form>
  Masukkan tarikh sebelum 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Masukkan tarikh selepas 2000-01-01:
  Enter a date after 2000-01-01:<br>
</form>

Coba Sendiri

Jenis input: color

<input type="color"> Digunakan untuk medan input yang seharusnya mengandungi warna.

Berdasarkan keupayaan pelayar, pemilih warna akan muncul di dalam medan input.

Contoh

<form>
  Pilih warna pilihan anda:
  <input type="color" name="favcolor">
</form>

Coba Sendiri

Jenis input: range

<input type="range"> Digunakan untuk medan input yang seharusnya mengandungi nilai dalam rentang tertentu.

Berdasarkan keupayaan pelayar, medan input dapat dipaparkan sebagai kontrol peralatan skrol.

Contoh

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

Coba Sendiri

Anda dapat menggunakan seperti properti untuk menentukan had: min, max, step, value.

Jenis input: month

<input type="month"> Memungkinkan pengguna memilih bulan dan tahun.

Berdasarkan keupayaan pelayar, pemilih tarikh akan muncul di dalam medan input.

Contoh

<form>
  Hari jadi (bulan dan tahun):
  <input type="month" name="bdaymonth">
</form>

Coba Sendiri

Jenis input: week

<input type="week"> Memungkinkan pengguna memilih minggu dan tahun.

Berdasarkan keupayaan pelayar, pemilih tarikh akan muncul di dalam medan input.

Contoh

<form>
  Pilih minggu:
  <input type="week" name="week_year">
</form>

Coba Sendiri

Jenis input: time

<input type="time"> Memungkinkan pengguna memilih masa (tanpa zon masa).

Berdasarkan keupayaan pelayar, pemilih masa akan muncul di dalam medan input.

Contoh

<form>
  Pilih masa:
  <input type="time" name="usr_time">
</form>

Coba Sendiri

Jenis input: datetime

<input type="datetime"> Memungkinkan pengguna memilih tarikh dan masa (dengan zon masa).

Berdasarkan keupayaan pelayar, pemilih tarikh akan muncul di dalam medan input.

Contoh

<form>
  Hari jadi (tarikh dan masa):
  <input type="datetime" name="bdaytime">
</form>

Coba Sendiri

Jenis input: datetime-local

<input type="datetime-local"> Memungkinkan pengguna memilih tarikh dan masa (tanpa zon masa).

Berdasarkan keupayaan pelayar, pemilih tarikh akan muncul di dalam medan input.

Contoh

<form>
  Hari jadi (tarikh dan masa):
  <input type="datetime-local" name="bdaytime">
</form>

Coba Sendiri

Tipe Input: email

<input type="email"> Untuk bidang input yang seharusnya mengandung alamat email.

Berdasarkan dukungan browser, alamat email dapat divalidasi otomatis saat disubmit.

Beberapa ponsel cerdas mengenali jenis email dan menambahkan ".com" ke papan tik untuk cocokkan input email.

Contoh

<form>
  E-mail:
  <input type="email" name="email">
</form>

Coba Sendiri

Tipe Input: search

<input type="search"> Untuk bidang pencarian (ekspresi bidang pencarian mirip dengan bidang teks biasa).

Contoh

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

Coba Sendiri

Tipe Input: tel

<input type="tel"> Untuk bidang input yang seharusnya mengandung nomor telepon.

Hanya Safari 8 yang mendukung tipe tel saat ini.

Contoh

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

Coba Sendiri

Tipe Input: url

<input type="url"> Untuk bidang input yang seharusnya mengandung alamat URL.

Berdasarkan dukungan browser, bidang URL dapat divalidasi otomatis saat disubmit.

Beberapa ponsel cerdas mengenali jenis URL dan menambahkan ".com" ke papan tik untuk cocokkan input URL.

Contoh

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Coba Sendiri