HTML5 Forms

PDKT sama HTML5 Forms

 

Pembahasan kali ini masih tentang HTML5, yaa namanya HTML5 forms berarti tentang pembuatan form seperti yang kita ketahui atau lihat di halaman pendaftaran website, blog dan banyak lagi. Yang beda dari HTML5 Forms itu kita bisa menggunakan semua jenis inputan dan atribute baru yang dapat digunakan untuk mempercantik tampilan form kita di web. Dengan menggunakan ini kita bahkan tidak memerlukan Shivs, hacks, atau workarounds.

Nah, berikut beberapa atribut baru HTML5 Forms yang akan di bahas :

HTML5 form attributes

• Placeholder

  Merupakan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah field input (misalnya nilai sampel atau deskripsi singkat dari format yang diharapkan) dan akan ditampilkan dalam kolom input sebelum pengguna memasukkan sebuah nilai atau inputan. Placeholder bekerja dengan jenis input sebagai berikut : text, search, email, url, password, tel.
  Contoh kode :
  

  <input type="text" name="user-name" id="user-name" placeholder="at least 3 characters">
  
  nih contohnya seperti dibawah ini :D

  
  

• Autofocus
  

  Merupakan atribut boolean. Ketika digunakan, ia menentukan bahwa <input> elemen harus secara otomatis mendapatkan fokus ketika meng-load halaman website tersebut
  Sebelumnya untuk autofokus biasanya menggunakan javascript.
  Contoh kode  :
  

  <input type="text" name="first-name" id="first-name" autofocus>
  
  taraaaa ini hasilnya :

  
  

• Autocomplete

  Merupakan atribut yang membantu pengguna mengisi form berdasarkan inputan sebelumnya. Atribut ini sebenarnya telah ada sejak penggunaan IE 5.5 namun telah di bakukan sebagai HTML5
  Contoh kode :
  <input type="text" name="tracking-code" id="tracking-code" autocomplete="off">
  
  Cara menjalankannya itu modelnya seperti menginputkan username kemudian ketika di submit ternyata gagal, nah pas balik ke halaman input itu username yang diketikkan tadi masih tetap ada
  
  
  

• Required


  Merupakan atribut yang digunakan untuk mengharuskan pengguna untuk memasukkan sebuah nilai dan merupakan atribut boolean
  Contoh kode :
  

  <input type="text" id="given-name" name="given-name" required>

  Nah hasilnya sama seperti gambar utama postingan ini .

• Pattern

  Merupakan atribut yang digunakan untuk validasi khusus seperti kode produk, kode faktur atau lainnya.
  
  Contoh kode :
  

  <label>Product Number:<input pattern="[0-9][A-Z]{3}" name="product" type="text" title="Single digit followed by three uppercase letters."/>
  </label>

  Product Number:
  

• List

  Daftar atribut mengacu pada <datalist> elemen yang berisi telah ditetapkan pilihan untuk <input> elemen.
  Contoh kode :
  

  <label>Your favorite fruit:<datalist id="fruits">
    <select name="fruits">
      <option value="Blackberry">Blackberry</option>
      <option value="Blackcurrant">Blackcurrant</option>
      <option value="Blueberry">Blueberry</option>
      <!-- … -->
    </select>
  If other, please specify:</datalist>
    <input type="text" name="fruit" list="fruits">
  </label>

  Your favorite fruit:

   untuk test klik kolomnya kemudian klik tombol keyboar panah bawah :3

• Novalidate & Formnovalidate

  Atribut novalidate dan formnovalidate menunjukkan bahwa form tidak harus divalidasi ketika diajukan. Mereka berdua atribut Boolean. formnovalidate dapat diterapkan untuk mengirimkan atau jenis input gambar. The novalidate atribut dapat diatur hanya pada bentuk elemen.
  Sebuah contoh kasus penggunaan untuk atribut formnovalidate bisa pada tombol "menyimpan konsep", di mana bentuk memiliki bidang yang diperlukan untuk mengajukan rancangan tetapi tidak diperlukan untuk menyimpan draft. novalidate akan digunakan dalam kasus di mana Anda tidak ingin untuk memvalidasi form tetapi ingin mengambil keuntungan dari lebih berguna perangkat tambahan antarmuka pengguna yang menawarkan jenis masukan baru.
  Contoh berikut menunjukkan cara menggunakan formnovalidate:
  
  

  <form action="process.php">
    <label for="email">Email:</label>
    <input type="text" name="email" value="gordo@example.com">
    <input type="submit" formnovalidate value="Submit">
  </form>

  Dan ini contoh menggunakan novalidate :
  

  <form action="process.php" novalidate>
    <label for="email">Email:</label>
    <input type="text" name="email" value="gordo@example.com">
    <input type="submit" value="Submit">
  </form>

  
  
   Selamat mencoba, semoga bermanfaat ('.')9