Belajar HTML Form Part 5 - Tipe-Tipe Elemen Input HTML 5

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Pada Belajar HTML Form kali ini kita akan melanjutkan artikel sebelumnya tentang Tipe-Tipe Input pada Form HTML. Namun kali ini tipe-tipe elemen input yang kita pelajari adalah Tipe-Tipe Elemen Input pada Form HTML 5. Ada beberapa tipe-tipe input baru yang ditambahkan pada HTML 5. yaitu :

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

Sebagaimana kita ketahui, HTML 5 ini tidak support jika dijalankan pada browser versi terdahulu. Dan jika hal itu terjadi (browser tidak support), maka tipe-tipe input tersebut akan ditampilkan dalam bentuk Tipe input text biasa.

A. NUMBER

Seperti namanya, tipe input number bisa digunakan untuk membuat sebuah inputan yang diisi nilai berupa angka.

Contoh :

<form>
  Masukkan angka antara 1 sampai 5:
  <input type="number" name="angka" min="1" max="5">
</form>

Penjelasan :

• Pada contoh di atas, kita membuat sebuah input field bertipe number yang hanya bisa diisi angka antara 1 sampai 5.
• type ="number" menunjukkan tipe input field.
• name="angka"menunjukkan nama input field tersebut adalah angka.
• min="1" max="5" menunjukkan bahwa input field tersebut hanya bisa diisi oleh angka di antara 1 sampai 5

Coba sendiri di sini

B. DATE

Tipe input date digunakan untuk membuat input field berupa inputan tanggal.

Contoh :

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

Penjelasan :

• type="date" menunjukkan tipe input field yang dibuat adalah date
• name="tanggallahir" menunjukkan nama dari field tersebut adalah tanggallahir
• max="1979-12-31" menunjukkan bahwa tanggal yang bisa diinput hanya dari 31 Desember 1979 dan sebelumnya
• min="2000-01-02" menunjukkan bahwa tanggal yang bisa diinput hanya dari 2 Januari 2000 dan setelahnya.

Coba sendiri di sini

C. COLOR

Tipe input color digunakan untuk memunculkan popup pilihan warna.

Contoh :

<form>
  Pilih warna favoritmu:
  <input type="color" name="warnafavorit">
</form>

Penjelasan :

• type="color" menunjukkan bahwa tipe input field yang dibuat bertipe color
• name="warnafavorit" menunjukkan nama dari input field yang dibuat adalah warnafavorit

Coba sendiri di sini

D. RANGE

Tipe range digunakan untuk membuat input field dengan jarak nilai yang telah ditentukan.

Contoh :

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

Penjelasan :

• type="range" menunjukkan bahwa tipe input field yang dibuat adalah range
• name="points" menunjukkan input field yang dibuat adalah points
• min="0" max="10" menunjukkan jarak nilai dari input field adalah mulai dari 0 sampai 10

Coba sendiri di sini

E. MONTH

Tipe input month digunakan untuk membuat input field bulan dan tahun.

Contoh :

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

Penjelasan :

• type="month" menunjukkan tipe dari input field adalah month.
• name="bulanlahir" menunjukkan input field yang dibuat diberi nama bulanlahir

Coba sendiri di sini

F. WEEK

Tipe input week digunakan untuk membuat input field berupa minggu dan tahun.

Contoh :

<form>
  pilih minggu:
  <input type="week" name="minggutahun">
</form>

Penjelasan ;

• type="week" menunjukkan input field yang dibuat bertipe week
• name="minggutahun" memberi nama minggutahun terhadap input field yang kita buat.

Coba sendiri di sini

G. TIME

Tipe input time digunakan untuk membuat input field untuk waktu(tanpa zona waktu).

Contoh :

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

Penjelasan :

• type="time" menunjukkan tipe inputan yang dibuat adalah time.
• name="waktu" menunjukkan nama inputan yang diberikan pada input field adalah waktu.

Coba sendiri di sini

H. DATETIME

Tipe input datetime digunakan untuk membuat input field waktu dan tanggal (dengan zona waktu). Sebagai catatan, tipe input datetime telah dihapus dari standar HTML. Maka lebih disarankan menggunakan tipe datetime-local.

Contoh :

<form>
  Masukkan waktu dan tanggal:
  <input type="datetime" name="waktutanggal">
</form>

Penjelasan :

• type="datetime" menunjukkan tipe input field yang dibuat adalah datetime.
• name="waktutanggal" menunjukkan nama dari input field adalah waktutanggal

Coba sendiri di sini

I. DATETIME-LOCAL

Tipe input datetime digunakan untuk membuat input field waktu dan tanggal (tanpa zona waktu).

Contoh :

<form>
  Masukkan waktu dan tanggal:
  <input type="datetime-local" name="waktutanggal">
</form>

Penjelasan :

• type="datetime" menunjukkan tipe input field yang dibuat adalah datetime.
• name="waktutanggal" menunjukkan nama dari input field adalah waktutanggal

Coba sendiri di sini

J. EMAIL

Tipe input email digunakan untuk membuat input field untuk inputan alamat e-mail. Jika browser yang digunakan support, secara otomatis browser akan memvalidasi apakah format e-mail yang dimasukkan sudah benar.

Contoh :

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

Penjelasan :

• type="email" menunjukkan input field yang dibuat bertipe email
• name="email" berarti memberi nama input field yang dibuat dengan email.

Coba sendiri di sini

K. SEARCH

Tipe input search digunakan untuk membuat input field yang digunakan untuk melakukan pencarian. Dari segi tampilan, input field ini akan ditampilkan seperti text field biasa.

Contoh :

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

Penjelasan :

• type="search" menunjukkan input field yang dibuat bertipe search
• name="pencarian" menunjukkan input field yang dibuat diberi nama pencarian

Coba sendiri di sini

L. TEL

Tipe input tel digunakan untuk membuat input field yang diisi nomer telepon.
Contoh :

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

Penjelasan :

• type="tel" menunjukkan tipe input field yang dibuat adalah tel
• name="telepon" menunjukkan input field yang dibuat diberi nama telepon.

Coba sendiri di sini

M. URL

Tipe input url digunakan untuk membuat input field url. Jika browser yang digunakan support, maka browser akan memvalidasi format url yang digunakan secara otomatis.

Contoh :

<form>
  Masukkan alamat url:
  <input type="url" name="alamaturl">
</form>

Penjelasan :

• type="url" menunjukkan tipe dari input field yang dibuat adalah url.
• name="alamaturl" menunjukkan input field yang dibuat diberi nama alamaturl.

Coba sendiri di sini

Demikian Belajar HTML Form tentant tipe-tipe input pada HTML 5. Semoga bermanfaat.

Terima kasih dan

wassalamu'alaikum warohmatullaahi wabarokaatuh.