Tipe input HTML

Bagian ini mendeskripsikan tipe input elemen <input>.

Tipe input: text

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

Contoh

<form>
 Nama depan:<br>
<input type="text" name="firstname">
<br>
 Nama belakang:<br>
<input type="text" name="lastname">
</form>

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Nama depan:


Nama belakang:

Tipe input: password

<input type="password"> DidefinisikanBidang password：

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Nama pengguna:


Password pengguna:

Keterangan:karakter di bidang password akan disesuaikan dengan masker (diperlihatkan sebagai bintang atau lingkaran yang tebal).

Tipe input: submit

<input type="submit"> Didefinisikankirimdata formulir keProgram pengolah formulirtombol.

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

Tentukan program pengolah (form-handler) di atribut action formulir.

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Nama depan:


Nama belakang:


Jika Anda melupakan atribut value dari tombol pengiriman, tombol itu akan mendapatkan teks standar:

Contoh

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

Coba Sendiri

Tipe Input: tombol radio

<input type="radio"> Mendefinisikan tombol radio.

Tombol radio memungkinkan pengguna memilih HANYA SATU dari pilihan terbatas:

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Laki-laki

Perempuan

Tipe Input: kotak centang

<input type="checkbox"> Mendefinisikan kotak centang.

Kotak centang memungkinkan pengguna memilih NOLAKUTAMA atau lebih dari satu pilihan dalam jumlah yang terbatas.

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Saya punya sepeda

Saya punya mobil

Tipe Input: tombol

<input type="button"> DidefinisikanTombol。

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Tipe Input HTML5

HTML5 menambahkan beberapa tipe input baru:

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

Keterangan:Tipe input lama yang tidak didukung browser web lama dianggap sebagai tipe input text.

Tipe Input: number

<input type="number"> Untuk field input yang seharusnya mengandung nilai angka.

Anda dapat menambah batasan bagi angka.

Batasan dapat diterapkan kepada field input berdasarkan dukungan browser.

Contoh

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

Coba Sendiri

Batasan Input

Berikut adalah beberapa batasan input yang umum digunakan (beberapa yang baru ditambahkan di HTML5):

Atribut Deskripsi
disabled Tentukan field input harus dinonaktifkan.
max Tentukan nilai maksimum bagi field input.
maxlength Tentukan jumlah karakter maksimum bagi field input.
min Tentukan nilai minimum bagi field input.
pattern Tentukan ekspresi reguler untuk memeriksa nilai input melalui.
readonly Tentukan field input sebagai hanya-baca (tidak dapat diubah).
required Tentukan field input wajib diisi (harus diisi).
size Tentukan lebar field input (dalam karakter).
step Tentukan interval angka yang sah bagi field input.
value Tentukan nilai default untuk field input.

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

Contoh

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

Coba Sendiri

Tipe Input: date

<input type="date"> Untuk input yang seharusnya mengandung tanggal.

Menurut dukungan browser, pilih tanggal akan muncul di dalam bidang input.

Contoh

<form>
  Ulang Tahun:
  <input type="date" name="bday">
</form>

Coba Sendiri

Anda dapat menambah batasan untuk input:

Contoh

<form>
  Masukkan tanggal sebelum 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Masukkan tanggal setelah 2000-01-01:
  Masukkan tanggal setelah 2000-01-01:<br>
</form>

Coba Sendiri

Tipe input: color

<input type="color"> Digunakan untuk bidang input yang harus mengandung warna.

Menurut dukungan browser, pilih warna akan muncul di dalam bidang input.

Contoh

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

Coba Sendiri

Tipe input: range

<input type="range"> Digunakan untuk bidang input yang harus mengandung nilai di dalam rentang tertentu.

Menurut dukungan browser, bidang input dapat ditampilkan sebagai kontrol slider.

Contoh

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

Coba Sendiri

Anda dapat menggunakan properti berikut untuk menentukan batasan: min, max, step, value.

Tipe input: month

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

Menurut dukungan browser, pilih tanggal akan muncul di dalam bidang input.

Contoh

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

Coba Sendiri

Tipe input: week

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

Menurut dukungan browser, pilih tanggal akan muncul di dalam bidang input.

Contoh

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

Coba Sendiri

Tipe input: time

<input type="time"> Memungkinkan pengguna memilih waktu (tanpa zona waktu).

Menurut dukungan browser, pilih waktu akan muncul di dalam bidang input.

Contoh

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

Coba Sendiri

Tipe input: datetime

<input type="datetime"> Memungkinkan pengguna memilih tanggal dan waktu (dengan zona waktu).

Menurut dukungan browser, pilih tanggal akan muncul di dalam bidang input.

Contoh

<form>
  Tanggal (tanggal dan waktu):
  <input type="datetime" name="bdaytime">
</form>

Coba Sendiri

Tipe input: datetime-local

<input type="datetime-local"> Memungkinkan pengguna memilih tanggal dan waktu (tanpa zona waktu).

Menurut dukungan browser, pilih tanggal akan muncul di dalam bidang input.

Contoh

<form>
  Tanggal (tanggal dan waktu):
  <input type="datetime-local" name="bdaytime">
</form>

Coba Sendiri

Tipe Input: email

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

Menurut dukungan peramban, alamat email dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengenali tipe email dan menambahkan ".com" ke papan ketik untuk mencocokkan input email.

Contoh

<form>
  Email:
  <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.

Menurut dukungan peramban, bidang URL dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengenali tipe URL dan menambahkan ".com" ke papan ketik untuk mencocokkan input URL.

Contoh

<form>
  Tambahkan halaman beranda Anda:
  <input type="url" name="homepage">
</form>

Coba Sendiri