HTML5 - Formulir Web 2.0

Formulir Web 2.0 merupakan perpanjangan dari fitur formulir yang ditemukan di HTML4. Elemen formulir dan atribut di HTML5 memberikan tingkat mark-up semantik yang lebih tinggi daripada HTML4 dan membebaskan kami dari banyak skrip dan gaya yang membosankan yang diperlukan di HTML4.

Elemen <input> di HTML4

Elemen masukan HTML4 menggunakan type atribut untuk menentukan tipe data.HTML4 menyediakan tipe berikut -

Sr.No.	Jenis & Deskripsi
1	text Bidang teks bentuk bebas, biasanya bebas dari jeda baris.
2	password Bidang teks format bebas untuk informasi sensitif, biasanya bebas dari jeda baris.
3	checkbox Sekumpulan nilai nol atau lebih dari daftar yang ditentukan sebelumnya.
4	radio Nilai yang disebutkan.
5	submit Bentuk gratis dari tombol memulai pengiriman formulir.
6	file File arbitrer dengan tipe MIME dan secara opsional nama file.
7	image Koordinat, relatif terhadap ukuran gambar tertentu, dengan semantik tambahan yang harus menjadi nilai terakhir yang dipilih dan memulai pengiriman formulir.
8	hidden String arbitrer yang biasanya tidak ditampilkan kepada pengguna.
9	select Nilai yang disebutkan, seperti jenis radio.
10	textarea Bidang teks bentuk bebas, secara nominal tanpa batasan jeda baris.
11	button Bentuk tombol gratis yang dapat memulai acara apa pun yang terkait dengan tombol.

Berikut adalah contoh sederhana menggunakan label, tombol radio, dan tombol kirim -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

Elemen <input> di HTML5

Terlepas dari atribut yang disebutkan di atas, elemen input HTML5 memperkenalkan beberapa nilai baru untuk typeatribut. Ini tercantum di bawah.

NOTE - Coba semua contoh berikut menggunakan versi terbaru Opera browser.

Sr.No.	Jenis & Deskripsi
1	tanggal Waktu Tanggal dan waktu (tahun, bulan, hari, jam, menit, detik, sepersekian detik) dienkode menurut ISO 8601 dengan zona waktu disetel ke UTC.
2	datetime-local Tanggal dan waktu (tahun, bulan, hari, jam, menit, detik, sepersekian detik) yang dikodekan sesuai dengan ISO 8601, tanpa informasi zona waktu.
3	tanggal Tanggal (tahun, bulan, hari) yang dikodekan sesuai dengan ISO 8601.
4	bulan Tanggal yang terdiri dari satu tahun dan satu bulan yang dikodekan menurut ISO 8601.
5	minggu Tanggal yang terdiri dari angka satu tahun dan minggu yang dienkode menurut ISO 8601.
6	waktu Waktu (jam, menit, detik, pecahan detik) yang dikodekan sesuai dengan ISO 8601.
7	jumlah Ini hanya menerima nilai numerik. Atribut step menentukan presisi, default ke 1.
8	jarak Jenis rentang digunakan untuk bidang masukan yang harus berisi nilai dari berbagai angka.
9	surel Ini hanya menerima nilai email. Jenis ini digunakan untuk bidang masukan yang harus berisi alamat email. Jika Anda mencoba mengirimkan teks sederhana, itu memaksa untuk memasukkan hanya alamat email dalam format [email protected].
10	url Ini hanya menerima nilai URL. Jenis ini digunakan untuk bidang masukan yang harus berisi alamat URL. Jika Anda mencoba untuk mengirimkan teks sederhana, itu memaksa untuk memasukkan hanya alamat URL baik dalam format http://www.example.com atau dalam format http://example.com.

Elemen <output>

HTML5 memperkenalkan elemen baru <output> yang digunakan untuk mewakili hasil dari berbagai jenis keluaran, seperti keluaran yang ditulis oleh skrip.

Anda dapat menggunakan foratribut untuk menentukan hubungan antara elemen output dan elemen lain dalam dokumen yang memengaruhi penghitungan (misalnya, sebagai input atau parameter). Nilai atribut for adalah daftar ID elemen lainnya yang dipisahkan spasi.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut placeholder

HTML5 memperkenalkan atribut baru yang disebut placeholder. Atribut pada elemen <input> dan <textarei> memberikan petunjuk kepada pengguna tentang apa yang bisa dimasukkan di bidang. Teks placeholder tidak boleh berisi carriage return atau line-feed.

Berikut adalah sintaks sederhana untuk atribut placeholder -

<input type = "text" name = "search" placeholder = "search the web"/>

Atribut ini hanya didukung oleh versi terbaru browser Mozilla, Safari, dan Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Atribut fokus otomatis

Ini adalah pola satu langkah sederhana, mudah diprogram dalam JavaScript pada saat memuat dokumen, secara otomatis memfokuskan satu bidang formulir tertentu.

HTML5 memperkenalkan atribut baru yang disebut autofocus yang akan digunakan sebagai berikut -

<input type = "text" name = "search" autofocus/>

Atribut ini hanya didukung oleh versi terbaru browser Mozilla, Safari dan Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Atribut yang dibutuhkan

Sekarang Anda tidak perlu memiliki JavaScript untuk validasi sisi klien seperti kotak teks kosong tidak akan pernah dikirimkan karena HTML5 memperkenalkan atribut baru yang disebut required yang akan digunakan sebagai berikut dan akan bersikeras memiliki nilai -

<input type = "text" name = "search" required/>

Atribut ini hanya didukung oleh versi terbaru browser Mozilla, Safari dan Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -