CandraLab

IT Pro & Developer Resource

Menu Close

Tutorial HTML5 Form

HTML5 LogoSaat kita belajar dasar dasar pemrograman berbasis web, maka hal penting yang harus dikuasai adalah masalah input tipe dan validasinya. Dalam HTML versi sebelumnya, input hanya terbatas pada text,file,dan password. Lalu untuk memvalidasi misalkan input harus angka, kita harus menggunakan javascript, jQuery ataupun menggunakan teknik serverside programming. Dengan munculnya HTML5, input form diweb menjadi lebih kaya dan lebih mudah dipakai.

Dalam artikel kali ini, saya fokus ke dua hal; pertama, masalah attribute baru di input dan yang kedua tentang input baru di HTML5.

Attribute baru di HTML5 Form

Di Html5, ada  3 attribute baru yang bisa langsung dipakai dan sangat bermanfaat bagi user dan developer. Attribute itu adalah placeholder, autofocus dan required.

Placeholder.

Placeholder adalah text abu abu yang muncul di input form. Text ini hanya akan muncul jika input belum di isi, placeholder juga sangat bermanfaat untuk layar kecil karena placeholder bisa dijadikan pengganti label.

 autofocus

Fitur HTML5 yang membuat input langsung tersorot saat membuka form, biasanya input pertama. Ini sangat bermanfaat sehingga user tidak perlu meletekan kursor secara manual di input form.

required

Fitur ini adalah fitur validasi dasar di HTML5, Jika sebuah attribute ditambah  attribute required, maka jika input kosong, maka akan muncul pesan “Please fill this out” atau kalimat sejenis. Pesan error akan muncul berbeda tergantung browser.

Berikut ini contoh penggunakan 3 attribute tadi

<form class="pure-form pure-form-stacked">
	<fieldset>
		<label for="name">Your Name</label>
		<input id="name" type="text" placeholder="Your Name" 
		autofocus 
		>
		<label for="email">Your Email</label>
		<input id="email" type="email" placeholder="Your Email" required>

		<label for="password">Your Password</label>
		<input id="password" type="password" placeholder="Your Password">

		<button type="submit" class="pure-button">
		Sign Up
		</button>
         </fieldset>
</form>

Output tampilan kurang lebih seperti ini :

HTML5 form

HTML5 form

Input baru di HTML5

Selain 3 attribute diatas, HTML5 juga mempunyai banyak input baru.
Berikut ini adalah daftar input baru di HTML5

  1. color, input warna
  2. date, input tanggal, mirip dengan jquery UI date
  3. datetime, tanggal dan waktu
  4. datetime-local, tanggal dan waktu dengan format lokal.
  5. email, email input
  6. month, bulan
  7. number, angka
  8. range, slider nilai antara min sampai max.
  9. search , input pencarian
  10. tel, input nomor telepon
  11. time, input waktu (jam:menit:detik)
  12. url, input URL, website
  13. week, input week , minggu dalam satu tahun.

Hal penting disini, tidak semua browser mendukung semua input diatas. Jika browser tidak mendukung input baru di HTML5, maka input akan kembali kedafult yaitu input='text' Jika anda ingin mengecek apakah browser anda mendukung, cek html5test.com.

Sample code
Berikut ini adalah contoh penggunaan HTML5 input di Form.

<form class="pure-form pure-form-stacked">
	<fieldset>

	<label for="name">Nama event</label>
	<input id="name" type="text" placeholder="Nama event" 
	autofocus required >

     <!-- input waktu -->
	<label for="jam">Jam </label>
	<input id="jam" type="time" placeholder="Your time">
	
	<!--input warna-->
	<label for="warna">Warna pakaian </label>
	<input id="warna" type="color" placeholder="masukan warna">

	<!-- input harus angka -->
	<label for="time">Maximal teman yang diajak</label>
	<input id="time" type="number" required placeholder="masukan jumlah teman">
	
<!-- input dalam format slider, misalkan nilai siswa antara 0-100.
Jika nilai ingin ditampilkan saat slider digeser, 
tetap harus minta bantuan javascript -->
	<label for="tiket">Tiket</label>
	<input id="tiket" type="range"  min='1' max='100' placeholder="Harga tiket">

<!--- ini yang keren, tanpa jquery UI calendar, 
sekarang kita bisa menampilkan calendar dengan mudah, cukup gunakan input date--->
	<label for="tanggal">Tanggal Masuk</label>
	<input id="tanggal" type="date" placeholder="Your tanggal" required>
	
	<button type="submit" class="pure-button">
	Simpan
</button>
</fieldset>
</form>

Contoh tampilan HTML5 date input di Google chrome

contoh tampilan date calendar html5, TANPA JQUERY

contoh tampilan date calendar html5, TANPA JQUERY

Bagian ini baru pengantar, dari pengantar ini tampak ada kekurangan diantarnya masalah validasi, bagaimana jika kalimat error yang muncul kita buat sendiri (custom validation), bagaimana saya mendeteksi format text yang benar? misalkan input kode post atau pattern tertentu, apakah HTML5 memvasilitasi hal tersebut? Silahkan baca artikel selanjutnya
 
Demo dan informasi lanjut bisa dilihat disini:

  1. Demo HTML5
  2. W3schools html5 input type