Tipe input HTML

Bagian ini mendeskripsikan tipe input elemen <input>.

Tipe input: text

<input type="text"> definisi untukinput teksfield 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"> DefinisiField sandi：

Contoh

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

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Nama pengguna:


Sandi pengguna:

Keterangan:karakter di dalam field password akan dihalangi (diperlihatkan sebagai bintang atau lingkaran yang tebal).

Tipe input: submit

<input type="submit"> Definisikirimdata formulir keProgram penanganan formulirtombol.

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

Tentukan program penanganan formulir (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="Kirim">
</form>

Coba Sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Nama depan:


Nama belakang:


Jika Anda melupakan atribut value tombol pengiriman, tombol 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"> Definisi 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"> Definisi kotak centang.

Kotak centang memungkinkan pengguna memilih NOLAKU ATAU BANYAK pilihan dari jumlah pilihan 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"> DefinisiTombol。

Contoh

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

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 bidang input yang seharusnya mengandung nilai angka.

Anda dapat menbatasi angka.

Batasan dapat diterapkan kepada bidang 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 sering digunakan (beberapa yang baru ditambahkan di HTML5):

Atribut Deskripsi
disabled Tentukan apakah bidang input harus dinonaktifkan.
max Tentukan nilai maksimum bagi bidang input.
maxlength Tentukan jumlah karakter maksimum bagi bidang input.
min Tentukan nilai minimum bagi bidang input.
pattern Tentukan ekspresi reguler untuk memeriksa nilai input.
readonly Tentukan apakah bidang input hanya baca (tidak dapat diubah).
required Tentukan apakah bidang input diperlukan (harus diisi).
size Tentukan lebar bagi bidang input (dalam karakter).
step Tentukan interval angka sah bagi bidang input.
value Tentukan nilai default bagi bidang 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 bidang input yang seharusnya mengandung tanggal.

Bersediaan browser, pilih tanggal akan muncul di bidang input.

Contoh

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

Coba Sendiri

Anda dapat menambah batasan bagi 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:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Coba Sendiri

Tipe input: color

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

Bersediaan browser, pilih warna akan muncul di bidang input.

Contoh

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

Coba Sendiri

Tipe input: range

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

Bersediaan browser, bidang input dapat ditampilkan sebagai kontrol skrol.

Contoh

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

Coba Sendiri

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

Tipe input: month

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

Bersediaan browser, pilih tanggal akan muncul di bidang input.

Contoh

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

Coba Sendiri

Tipe input: week

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

Bersediaan browser, pilih tanggal akan muncul di 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).

Bersediaan browser, pilih waktu akan muncul di 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).

Bersediaan browser, pilih tanggal akan muncul di bidang input.

Contoh

<form>
  Birthday (date and time):
  <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).

Bersediaan browser, pilih tanggal akan muncul di bidang input.

Contoh

<form>
  Birthday (date and time):
  <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 peramban, alamat email dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengidentifikasi tipe email dan menambahkan ".com" ke papan tombol untuk mencocokkan 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 peramban, bidang URL dapat diverifikasi otomatis saat disubmit.

Beberapa ponsel cerdas mengidentifikasi tipe URL dan menambahkan ".com" ke papan tombol untuk mencocokkan input URL.

Contoh

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

Coba Sendiri