Elemen Dasar 5 Form

Pada aktifitas pekerjaan sehari-hari kita sering menggunakan form dalam pendataan. misalnya untuk masuk ke perguruan tinggi tentunya harus melalui berbagai ujian penerimaan mahasiswa baru. sebelum melakukan ujian tersebut terlebih dahulu peserta tes atau calon mahasiswa melakukan pendaftaran dengan mengisi form yang telah disediakan oleh pihak kampus.

Contohnya lagi ketika kita ke bank akan melakukan pengiriman uang maka terlebih dahulu kita menuliskan data pada formulir pengiriman uang sebelum diserahkan kepada teller bank. dengan adanya form ini mempermudah dalam memperoleh data yang telah diisi oleh pengguna.

sebelum melakukan tag html mengenai form terlebih dahulu kita belajar membuat elemen form dengan google form, silahkan akses google form kemudian buatlh form seperti lini ini https://forms.gle/A8TF5APF46Pcsp2c6 Dan http://bit.ly/surveipublikasiilmiah2019

ada 3 hal yang terpenting dalam form yaitu: method, action dan submit button. method yaitu proses bagaimana data tersebut dikirim, ada 2 kategori method yaitu menggunakan get atau post. action yaitu aksi proses pengiriman data jika data berhasil dikirim maka file mana yang akan diakses begitu juga jika gagal. submit button yaitu aksi pengiriman data akan dilakukan jika pengguna menekan tombol button submit. sekarang kita akan membahas mengenai elemen-elemen form.

Input Text: elemen ini berupa inputan form dengan type text. seperti contoh penggunaan username, nama, npm dan sebagainya menggunakan elemen text. untuk membatasi panjang karakter gunakan maxlength. untuk menentukan lebar kotak input menggunakan size.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Form</title>
</head>
<body>
<p>Elemen Form</p>
  <form> 
  Nama : <input type="text" size="8" maxlength="10">
    NPM  : <input type="text" size="8" maxlength="10">
  </form>
</body>
</html>

 Input Password: elemen ini tidak menampilkan karakter yang diinputkan melainkan berupa katakter “*” yang ditampilkan sehingga pengguna lain tidak mengetahui password yang dimasukkan oleh pengguna lainnya.

<!DOCTYPE html>
<html>
<head>
<title>Belajar Form</title>
</head>
<body>
<p>Elemen Form</p>
  <form> 
  Username : <input type="text" size="8" maxlength="10">
    Password : <input type="password" size="8" maxlength="10">
  </form>
</body>
</html>

Radio Button: elemen ini digunakan untuk memilih hanya satu pilihan inputan. misalnya memilih jenis kelamin, hanya boleh memilih salah satu yaitu Laki-laki atau perempuan dan tidak ada keduanya.

<html>
<head>
<title>Belajar Form</title>
</head>
<form> 
  Jenis kelamin :
  <input type="radio" name="j_kel" value="laki-laki">Laki-Laki
  <input type="radio" name="j_kel" value="perempuan">Perempuan
</form>
</body>
</html>

 Checkbox: elemen ini digunakan untuk memilih lebih dari satu inputan. misalnya Hobi,  dimana hobi setiap orang bisa saja memiliki lebih dari satu seperti main game, jalan-jalan dan lainnya.

<html>
<head>
<title>Belajar Form</title>
</head>
 <form> 
  Hobi :
    <input type="checkbox" value="Main Game">Main Game <br/>
    <input type="checkbox" value="Jalan-Jalan">Jalan- Jalan  <br/>
    <input type="checkbox" value="Masak">Masak  <br/>
    <input type="checkbox" value="Baca Buku">Baca buku
 </form>
</body>
</html>

Select: elemen yang memberikan pilihan kepada pengguna dimana pengguna hanya bisa memilih sebanyak 1 option. tampilan menu ini ditampilkan secara vertikal

<html>
<head>
<title>Belajar Form</title>
</head>
 <form> 
  Program Studi: <br>
   <select name="prodi">
     <option value="D4TRPL">D4 Teknologi Rekayasa Perangkat Lunak <br>
     <option value="D4Elka"> D4 Teknik Elektronika <br>
     <option value="D4TMM"> D4 Teknik Mesin dan Manufaktur <br>
     <option value="D3Elka"> D3 Teknik Elektronika <br>
     <option value="D3PPM"> D3 Teknik Perawatan dan Perbaikan <br>
     <option value="D3PCM"> D3 Teknik Perancangan Mekanik <br>

    
   
   </select>

 </form>
</body>
</html

 

Textarea: elemen yang berupa kolom yang digunakan untuk menampung karakter teks, textarea biasanya digunakan untuk menuliskan sebuah komentar yang pannjang.

<html>
<head>
<title>Belajar Form</title>
</head>
 <form> 
  Komentar : <textarea name=“psn” rows=“5” cols=“70”></textarea>

 </form>
</body>
</html>

 Button: elemen berupa tombol yang akan dieksekusi jika user menekan tombol tersebut. ada beberapa type tombol: submit, reset, button.

<input type=”submit” value=”OK”>

<input type=”reset”  value=”Batal”>

<input type=”button”  value=”Hitung”>

fieldset dan Legend: elemen yang digunakan untuk mengelompokkan beberapa objek

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset> 
   <legend>Hobi: </legend>
 
     <input type="checkbox" name="hobi" />Kuliner
     <br />
     
     <input type="checkbox" name="hobi" />Jalan - Jalan
     <br />
     
     <input type="checkbox" name="hobi" />Memancing
     <br />
     
     <input type="checkbox" name="hobi" />Goes
     <br />
   
   </fieldset>
   </form>
 </fieldset>
</form>

</body>
</html>