HTML Dasar: Tipe Element Input

Pertemuan kali ini adalah pertemuan ke-4 kita tentang Form HTML. Pada pertemuan-pertemuan sebelumnya kita telah membahas tentang pengenalan dasar form, macam-macam atribut tag form, dan macam-macam element form.

Pada kesempatan kali ini kita akan membahas lebih detil tentang atribut type yang ada pada element <input>.

Macam-Macam Tipe Input

Seperti yang kita tahu, dalam membangun sebuah formulir HTML, kita bisa menggunakan berbagai macam element.

Seperti halnya element <input>, <select>, <textarea>, dan lain sebagainya.

Akan tetapi, yang perlu kita ketahui lebih dalam adalah: element <input> sendiri memiliki banyak tipe isian.

Berikut ini list tipe dari input element berdasarkan abjad:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text"> - ini adalah default
• <input type="time">
• <input type="url">
• <input type="week">

Bagi saya pribadi yang telah mempelajari HTML lebih dari 5 tahun yang lalu, sebagian besar dari tipe-tipe di atas adalah “hal yang baru”. Dan melihat perkembangan dunia web yang semakin kompleks, tidak menutup kemungkinan bahwa di tahun-tahun yang akan datang, tipe input pada HTML akan semakin bertambah.

Note: terkadang tidak semua tipe didukung oleh semua browser.

Tipe text

Tipe yang pertama adalah tipe text. Tipe ini merupakan tipe yang paling dasar dalam sebuah <input>, bahkan tanpa mendefinisikan atribut type pun browser akan memilih tipe ini sebagai default.

Fungsi dari tipe text adalah untuk mengambil isian berupa teks.

Contoh:

<label for="nama">Nama</label> <br>
<input id="nama" type="text">

Hasil keluaran:

Tipe email

Tipe input yang berikutnya adalah tipe email.

Tipe ini memiliki fitur validasi di mana jika isian kita bukan berupa format email yang valid, maka form tidak bisa disubmit.

Perhatikan contoh berikut:

<form>
  <label for="isian-email">Masukkan email:</label> <br>
  <input id="isian-email" type="email" value="asdf"> <br> <br>

  <button>Submit</button>
</form>

Hasil keluaran:

Jika kita tekan tombol Button di atas sedangkan nilai atau value dari input tersebut bukan dalam format email, maka browser akan memberikan peringatan dan form tidak akan bisa disubmit.

Tipe password

Berikutnya adalah tipe password. Tipe ini akan mengubah semua karakter yang kita ketik ke dalam karakter bintang *.

Perhatikan contoh berikut:

<label for="isian-password">Masukkan password</label> <br>
<input id="isian-password" type="password" name="password">

Hasil keluaran:

Tipe number

Berikutnya adalah tipe number. Tipe ini membatasi isian user hanya pada karakter numerik saja. Sehingga user tidak bisa mengisi karakter huruf, karakter putih, dan lain sebagainya.

Plus: browser akan menambahkan dua buah tombol atas dan bawah untuk mengubah angka isian.

Perhatikan contoh berikut:

<label for="isian-usia">Masukkan usia anda!</label><br>
<input id="isian-usia" type="number" name="usia" min="18" max="60">

Hasil keluaran:

Catatan: selain mengklik tombol atas dan bawah, kita juga bisa menggunakan tombol navigasi atas bawah di keyboard untuk mengubah angka.

Beberapa atribut untuk type number:

• min - menentukan angka minimal
• max - menentukan angka maksimal
• step - menentukan kelipatan (nilai yang tidak sesuai kelipatan tidak bisa di-input, dan default dari atribut ini adalah 1)

Contoh penggunaan atribut step:

<label for="isian-1">Kelipatan 1000</label><br>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

Hasil keluaran:

Tipe url

Berikutnya adalah tipe url. Sesuai dengan namanya, tipe ini akan memvalidasi suatu isian apakah ia sudah sesuai format url yang valid atau tidak. Jika tidak sesuai, maka form tidak akan bisa disubmit.

Perhatikan contoh berikut:

<form>
  <label for="isian-url">Masukkan alamat ig anda!</label> <br>
  <input
    id="isian-url"
    type="url"
    name="instagram"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran:

Tipe tel

Tipe tel adalah sebuah input untuk memasukkan nomor telepon. Akan tetapi yang perlu diperhatikan adalah tipe tel ini tidak sama dengan tipe email mau pun tipe url yang otomatis memvalidasi isian user.

Pada tipe tel, kita masih harus mendefinisikan secara manual pola dari nomor telpon yang kita inginkan. Hal ini karena nomor telpon di berbagai negera memiliki format yang berbeda-beda [1].

Perhatikan contoh berikut:

<form>
  <label for="isian-telpon">Telpon Indo</label> <br>
  <input
    id="isian-telpon"
    type="tel"
    pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"
  >

  <br><br>

  <button>Submit</button>
</form>

Hasil keluaran:

Pada contoh di atas, isian hanya akan dikatakan valid jika untuk format seperti ini:

• 1234-1234-1234
• 0837-3021-3222
• dan seterusnya

Tipe date

Tipe input berikutnya yang bisa kita gunakan adalah tipe date.

Tipe ini akan menampilkan sebuah datepicker tergantung dari browser dan juga OS. Tampilan date picker di windows akan berbeda dengan yang ada di Mac OS, begitu juga datepicker di android akan berbeda dengan iOS.

Perhatikan contoh berikut:

<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br>
<input
  id="isian-tanggal-lahir"
  name="tanggal_lahir"
  type="date"
>

Hasil keluaran:

Kita juga bisa memanfaatkan atribut min dan max untuk mengatur tanggal minimum dan tanggal maximum.

Nilai min dan max tersebut ditulis dengan format: YYYY-MM-dd.

Selain itu kita juga bisa mengatur tanggal menggunakan atribut value dengan format yang sama.

Perhatikan contoh berikut:

<label for="isian-1">Tanggal Awal</label> <br>
<input
  id="isian-1"
  name="tanggal_awal"
  type="date"
  min="2021-01-01"
  value="2021-02-20"
>

<br><br>

<label for="isian-2">Tanggal Akhir</label> <br>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

Hasil keluaran:

Tipe datetime-local

Tipe input berikutnya adalah datetime-local.

Tipe ini akan menampilkan date picker + time picker. Jadi tidak hanya tanggal saja, tapi kita bisa juga memilih jam.

Kita tinggal ubah kode sebelumnya dari type date menjadi datetime-local:

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
>

Hasil keluaran:

Dan untuk mengatur nilai default, kita bisa menggunakan atribut value dengan format: YYYY:MM:DDThh:mm (dalam waktu UTC).

Jadi misal kita ingin mengatur nilai default menjadi tanggal 17 Agustus 2021 jam 7 WIB, maka kita bisa tulis seperti ini:

2021-08-17T01:00.

Contoh:

<label for="isian-waktu-bayar">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
  value="2021-08-17T01:00"
>

Hasil keluaran:

Penting: meskipun hasil keluarannya ditampilkan pukul 01:00 AM, tapi format waktu YYYY:MM:DDThh:mm adalah waktu UTC. Sehingga jika dikonversi ke waktu WIB (UTC+7), hasilnya menjadi pukul 07:00 pagi.

Tipe time

Tipe input berikutnya adalah tipe input time, tipe ini akan membuat kolom isian berupa pilihan jam.

Perhatikan contoh berikut:

<label for="isian-waktu">Waktu Pembayaran</label> <br>
<input
  id="isian-waktu"
  name="waktu_pembayaran"
  type="time"
>

Hasil keluaran:

Tipe month

Tipe berikutnya adalah tipe month, berfungsi untuk membuat kolom isian bulan.

Perhatikan contoh berikut:

<label for="isian-bulan">Bulan Lahir</label> <br>
<input
  id="isian-bulan"
  name="bulan_lahir"
  type="month"
>

Hasil keluaran:

Tipe week

Hampir sama dengan tipe input month, hanya saja tipe input week digunakan untuk mengambil pekan dalam tahun.

Jadi pekan pertama di bulan januari adalah pekan 1.

Sedangkan pekan kedua di bulan februari adalah pekan ke 5 dan seterusnya.

<label for="isian-pekan">Pekan Lahir</label> <br>
<input
  id="isian-pekan"
  name="pekan_lahir"
  type="week"
>

Hasil keluaran:

Note: sampai saat artikel ini ditulis, tidak ada tipe inputan year, hal itu karena kita bisa menggunakan tipe data number menggunakan atribut min dan max, misal: min=2000 dan max=2021.

Tipe radio

Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.

Perhatikan contoh berikut:

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="radio" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="radio" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="radio" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="radio" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="radio" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Hasil keluaran:

Pada pilihan di atas, kita hanya bisa memilih masing-masing satu saja.

Yang perlu diperhatikan adalah atribut name dari tiap radio button harus memiliki nilai yang sama dalam satu set pilihan. Pada contoh di atas, kita memiliki 2 buah set pilihan oleh karena itu namanya pun ada 2 yaitu: jenis_kelamin dan bahasa_asing.

Tipe checkbox

Selanjutnya adalah tipe input checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.

Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".

<form>
  Jenis kelamin: <br>
  
  <div>
    <input id="lk" type="checkbox" name="jenis_kelamin">
    <label for="lk">Laki-Laki</label>
  </div>

  <div>
    <input id="pr" type="checkbox" name="jenis_kelamin">
    <label for="pr">Perempuan</label>
  </div>

  Bahasa Asing Favorit: <br>
  
  <div>
    <input id="inggris" type="checkbox" name="bahasa_asing">
    <label for="inggris">Inggris</label>
  </div>

  <div>
    <input id="arab" type="checkbox" name="bahasa_asing">
    <label for="arab">Arab</label>
  </div>

  <div>
    <input id="jerman" type="checkbox" name="bahasa_asing">
    <label for="jerman">Jerman</label>
  </div>
</form>

Berikut ini hasil keluarannya:

Pada contoh di atas kita bisa memilih (mencentang) semua opsi yang ada. 😂

Tipe file

Selanjutnya adalah tipe input file, tipe ini akan membuat tombol “Browser” pada browser. Dan ketika tombol tersebut diklik, browser akan menampilkan jendela baru (bagi pengguna dekstop) untuk mengambil file, ada pun untuk android dan iOS, browser akan membuka file eksplorer atau aplikasi yang sejenis.

Perhatikan contoh berikut:

<label for="isian-foto">Upload Foto</label> <br>
<input
  id="isian-foto"
  name="foto"
  type="file"
>

Hasil keluaran:

Kita bisa menambahkan atribut accept untuk mengatur file apa saja yang boleh diupload. Misalkan kita ingin mengijinkan hanya file gambar seperti png, jpg atau jpeg, maka atribut accept akan terlihat seperti ini:

<label for="isian-foto">Upload Foto</label> <br>
<input
  id="isian-foto"
  name="foto"
  type="file"
  accept="image/png,image/jpg,image/jpeg"
>

Hasil keluaran:

Contoh accept untuk file-file lain:

• accept=".pdf" - file pdf
• accept=".doc, .docx" - untuk file doc atau docx
• accept=".ppt, .pptx" - untuk file ppt atau pptx
• dan lain sebagainya.

Catatan: validasi file di atas hanya terjadi di sisi client, dan kita tetap harus melakukan validasi file yang diupload di sisi server.

Tipe range

Berikutnya adalah tipe input range, ia adalah tipe isian berupa slider. Bisa kita temukan pada pengaturan volume.

Perhatikan contoh berikut:

<label for="isian-volume">Atur Volume</label> <br>
<input
  id="isian-volume"
  name="foto"
  type="range"
>

Hasil keluaran:

Rentang nilai default untuk tipe range adalah 0 sampai 100. Kita bisa menggantinya menggunakan atribut min dan max.

Tipe color

Berikutnya adalah tipe input color, tipe ini akan memunculkan sebuah color picker ketika diklik.

Perhatikan contoh berikut:

<label for="isian-warna">Atur Warna Latar</label> <br>
<input
  id="isian-warna"
  name="warna"
  type="color"
>

Hasil keluaran:

Tipe search

Tipe berikutnya adalah tipe search, tipe ini tidak memiliki fitur spesial tertentu. Ia mirip dengan text biasa akan tetapi jika kita mengetikkan sesuatu, maka akan muncul tombol x pada bagian kanan input.

Perhatikan contoh berikut:

<label for="isian-pencarian">Cari sesuatu</label> <br>
<input
  id="isian-pencarian"
  name="keyword"
  type="search"
>

Hasil keluaran:

Tipe submit

Tipe input berikutnya adalah tipe submit.

Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika tombol ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.

Perhatikan contoh berikut:

<form>
  <input type="text" name="nama" value="Joni"> <br>
  <input type="submit" value="Simpan">
</form>

Hasil keluaran:

Tipe reset

Selanjutnya adalah tipe reset. Tipe ini akan mengembalikan state atau data dari suatu form ke nilai awalnya.

Jika nilai awal sebuah input adalah kosong, maka ketika direset ia akan kembali kosong. Tapi jika nilai awalnya sudah terisi sesuatu, maka ketika direset datanya akan kembali seperti yang sudah diset sebelumnya.

Perhatikan contoh berikut:

<form>
  <label for="isian-nama">Nama</label> <br>
  <input
    id="isian-nama"
    name="nama"
    type="text"
    value="Andi Mukhlish"
  >

  <br><br>

  <input type="reset" value="Reset dari awal">
</form>

Hasil keluaran:

Coba ubah isi dari input di atas, kemudian klik tombol reset.

Tipe hidden

Yang terakhir tapi bukan yang paling akhir adalah tipe input hidden. Sesuai namanya, tipe input ini tidak akan menampilkan input apa pun pada halaman web. Akan tetapi, nama dan nilai dari kolom isian tersebut tetap akan dikirimkan ke server pada saat submit.

Perhatikan contoh berikut:

<input type="hidden" name="sebuah_nama" value="sebuah_nilai">

<input type="submit">

Hasil keluaran:

Yang tampil hanya tombol submit bukan?

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang atribut apa saja yang terdapat pada element input.

Stay tune!

Referensi

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#:~:text=%3Cinput%3E%20elements%20of,around%20the%20world. – diakses tanggal 27 Juli 2021