Tipe Input pada HTML

Input Type: teks

<input type = "text"> mendefinisikan field input satu baris untuk input teks:
Contoh

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:
Nama Depan

Nama belakang:




Input Type: password

<input type = "password"> mendefinisikan field kata sandi:
Contoh

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:
Username:

password:

Karakter dalam field kata sandi tersembunyi (ditampilkan sebagai tanda bintang atau lingkaran).

Input Type: submit

<input type = "submit"> mendefinisikan sebuah tombol untuk mengirimkan form input ke form-handler.

Form-handler biasanya merupakan halaman server dengan script untuk memproses data masukan.

Form-handler ditentukan dalam atribut tindakan form:
Contoh

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

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Nama depan:

Nama belakang:

Jika Anda menghilangkan atribut nilai tombol kirim, tombol akan mendapatkan teks default:
Contoh

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

Jenis Input: radio

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

Tombol radio membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan terbatas:
Contoh

<form>
  <input type = "radio" name = "gender" value = "male" checked> Male <br>
  <input type = "radio" name = "gender" value = "female"> Female <br>
  <input type = "radio" name = "jenis kelamin" nilai = "lainnya"> Lainnya
</form>

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Pria
Wanita
Lainnya

Input Type: Checkbox / kotak centang

<input type = "checkbox"> mendefinisikan sebuah kotak centang.

Kotak centang membiarkan pengguna memilih opsi NOL atau LEBIH dari sejumlah pilihan.
Contoh
<form>
  <input type = "checkbox" name = "vehicle1" value = "Sepeda"> Saya punya sepeda <br>
  <input type = "checkbox" name = "vehicle2" value = "Car"> Saya punya mobil
</form>

Beginilah cara kode HTML di atas akan ditampilkan di browser:

Saya punya sepeda
Saya punya mobil

Input Type: Button / tombol

<input type = "button"> mendefinisikan sebuah tombol:
Contoh

<input type = "button" onclick = "alert ('Hello World!')" Value = "klik saya!">

Beginilah cara kode HTML di atas akan ditampilkan di browser:
 

Jenis Masukan HTML5

HTML5 menambahkan beberapa jenis masukan baru:
 

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

Jenis input, tidak didukung oleh browser web lama, akan menghasilkan sebagai teks jenis input.

Input Type: angka

<input type = "number"> digunakan untuk field input yang seharusnya berisi nilai numerik.

Anda dapat mengatur batasan angka.

Bergantung pada dukungan browser, pembatasan dapat diterapkan ke kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Pembatasan Masukan

Berikut adalah daftar beberapa batasan masukan yang umum (beberapa ada yang baru di HTML5):
disabled Menentukan bahwa field input harus dinonaktifkan
max Menentukan nilai maksimum untuk bidang masukan
maxlength Menentukan jumlah maksimum karakter untuk field input
min Menentukan nilai minimum untuk bidang masukan
pattern Menentukan ekspresi reguler untuk memeriksa nilai input
readonly Menentukan bahwa field input hanya bisa dibaca (tidak dapat diubah)
required Menentukan bahwa field masukan diperlukan (harus diisi)
size Menentukan lebar (dalam karakter) bidang masukan
step Menentukan interval jumlah hukum untuk bidang masukan
value Menentukan nilai default untuk field input

Anda akan belajar lebih banyak tentang batasan masukan di bab berikutnya.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Jenis Input: tanggal / Date

<input type = "date"> digunakan untuk field input yang harus berisi tanggal.

Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Anda dapat menambahkan batasan pada input:
Opera Firefox Chrome Firefox Internet Explorer
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>

Input Type: warna

<input type = "color"> digunakan untuk field input yang seharusnya mengandung warna.

Bergantung pada dukungan browser, pemilih warna dapat muncul di kolom input.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

<form>
  Pilih warna kesukaan anda:
  <input type = "warna" nama = "favcolor">
</form>

Input Type: range

<input type = "range"> digunakan untuk field input yang seharusnya mengandung nilai dalam suatu range.

Bergantung pada dukungan browser, field input bisa ditampilkan sebagai kontrol slider.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

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

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

Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Input Type: minggu

<input type = "week"> memungkinkan pengguna untuk memilih satu minggu dan tahun.

Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Input Type: waktu

<input type = "time"> memungkinkan pengguna untuk memilih waktu (no time zone).

Bergantung pada dukungan browser, pemetik waktu dapat muncul di kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Input Type: datetime

<input type = "datetime"> memungkinkan pengguna untuk memilih tanggal dan waktu (dengan zona waktu).
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Catatan Jenis masukan datetime dihapus dari standar HTML. Gunakan datetime-local sebagai gantinya.
Input Type: datetime-local

<input type = "datetime-local"> memungkinkan pengguna untuk memilih tanggal dan waktu (no time zone).

Bergantung pada dukungan browser, pemetik tanggal dapat muncul di kolom masukan.
Opera Firefox Chrome Firefox Internet Explorer
Contoh
<form>
  Ulang tahun (tanggal dan waktu):
  <input type = "datetime-local" name = "bdaytime">
</form>
Input Type: email

<input type = "email"> digunakan untuk kolom input yang harus berisi alamat e-mail.

Bergantung pada dukungan browser, alamat e-mail dapat divalidasi secara otomatis saat dikirimkan.

Beberapa smartphone mengenali jenis email, dan menambahkan ".com" ke keyboard agar sesuai dengan masukan email.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Input Type: pencarian (search)

<input type = "search"> digunakan untuk bidang pencarian (bidang pencarian berperilaku seperti bidang teks biasa).
Opera Firefox Chrome Firefox Internet Explorer
Contoh
<form>
  Cari Google:
  <input type = "search" name = "googlesearch">
</form>
Jenis Input: tel

<input type = "tel"> digunakan untuk field masukan yang berisi nomor telepon.

Jenis tel saat ini hanya didukung di Safari 8.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Input Type: url

<input type = "url"> digunakan untuk kolom masukan yang harus berisi alamat URL.

Bergantung pada dukungan browser, bidang url dapat divalidasi secara otomatis saat diserahkan.

Beberapa smartphone mengenali jenis url, dan menambahkan ".com" ke keyboard agar sesuai dengan masukan url.
Opera Firefox Chrome Firefox Internet Explorer
Contoh

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

Share :

Tweet

✚

Related Post