Advance Form

Pada praktek sebelumnya, telah dijelaskan langkah dasar membuat form, pada praktek ini akan dijelaskan secara lebih detil beberapa objek form yang dapat memudahkan user dalam memberikan data sehingga dapat lebih cepat dan efisien.

Advance Form

tipe objek form yang lain

  • search
    • perbedaannya dengan text
    • dia akan menampilkan tombol clear secara otomatis
    • pada orang yang menggunakan mobile user(HP / tablet) akan ditampilkan tombol search pada keypadnya
  • email
    • perbedaannya dengan text
    • pada mobile user akan ditampilkan simbol @
  • url
    • perbedaannya dengan text
    • pada mobile user akan ditampilkan tombol slash dan .com
  • date
    • perbedaannya dengan text
    • akan ditampilkan dropdown untuk memudahkan memilih tanggal
  • time
    • akan ditampilkan format pemilihan jam
  • number
    • perbedaannya dengan text
    • hanya bisa memasukkan data angka
  • color
    • akan ditampilkan pilihan warna RGB

form atribute

  • placeholder
    • informasi label di dalam kotak input
    • saat user melakukan klik nilai tersebut hilang dengan sendirinya
  • autofocus
    • saat pertama kali page di render secara otomatis kursor akan autofocus
    • biasanya ditempatkan di field pertama dalam suatu form.
  • required
    • suatu field harus diisi
  • size
    • besar kotak input
  • maxLength
    • jumlah maximum char yang bisa diketik
  • checked
    • secara otomatis pilihan itu akan terpilih secara default
  • selected
    • secara otomatis pilihan akan terpilih secara default
  • disabled
    • kotak pilihan ditampilkan nilainya tapi user tidak bisa mengubah dan saat form di kirim data yang di-disabled tidak ikut terkirim
  • readonly
    • kotak pilihan ditampilkan nilainya tapi user tidak bisa mengubah dan saat form dikirim data yang di-readonly IKUT terkirim

Langkah praktek siswa

  • buka kembali file contact.html
  • dengan menggunakan teknik emmet sisipkan tag html berikut setelah memasukkan data email:
  <label for="id-kota">Kota</label>  
  <input type="text" list="daftarkota"><br>
  <datalist id="daftarkota">
    <option value="Surabaya">
    <option value="Jakarta">
    <option value="Semarang">     
  </datalist>
  <label for="id-pekerjaan">Pekerjaan</label>
  <p>  
    <select name="pekerjaan" id="id-pekerjaan">
      <optgroup label="Programmer">
        <option label="programmer" value="programmer"></option>
        <option label="Designer" value="designer" selected ></option>
      </optgroup>
      <optgroup label="Management">
        <option label="Manager" value="mgr"></option>
        <option label="Direktur" value="direktur"></option>
      </optgroup> 
    </select>
  </p>
  <br>
  <p>
     <label for="id-jk">Jenis Kelamin</label>
      <input type="radio" name="jk" id="id-jk" value="pria">Pria</input>
      <input type="radio" name="jk" id="id-jk" value="wanita">Perempuan</input>
  </p>
  <p>
    <label for="id-info">Subscribe</label>
      <input type="checkbox" name="subscribe" id="id-info" value="news">berita update</input>
      <input type="checkbox" name="subscribe" id="id-info" value="offer">penawaran kerja-sama</input>
  </p>

  • pada input nama, tambahkan atribute autofocus dan placeholder="Masukkan Nama"
  • pada input email, tambahkan atribute required
  <input type="text" name="Name" id="id-nama" autofocus placeholder="Masukkan Nama"><br>
  <input type="text" name="email" id="id-email" required><br>
  • buka file style.css
    • pada bagian paling bawah tambahkan perintah berikut:
#id-pekerjaan {
  height: 20px;
  font-size: 1.2em;
}
#id-jk, #id-info {
  margin-left: 1em;
  width: 1.5em;
}