#HTML

Belajar HTML Dasar #9 - Membuat Form

Fahras Nur Hidayat
blog thumbnails

Form

Hai sobat koding, sekian lama kita hibernasi akhirnya kali ini bisa nulis artikel lagi untuk kalian hehehe 😁.

Kali ini kita akan belajar tentang form, setiap website pasti memerlukan form entah untuk membuat login, mendaftar website, atau form untuk kebutuhan lainnya.

Fungsi pada form adalah menginput data-data user.

Cara membuat sebuah form adalah dengan mengawali penulisan two-sided menggunakan tag <form> ... </form>. Di antara tag <form> itu, kalian bisa meletakan elemen yang terdiri dari komponen-komponen form, seperti text-box, radio button, dan lain sebagainya.

Agar form tersebut lengkap dan fungsional, maka harus ada komponen-komponen. Berikut tag-tag untuk menghadirkan komponen-komponen ke dalam sebuah situs.

  1. <input type="text" name="namasaya"/> yang digunakan untuk membuat text-box.
  2. <input type="email" name="emailsaya"/> yang digunakan untuk tempat menulis email.
  3. <input type="URL" name="websitesaya"/> yang digunakan untuk tempat menulis alamat situs.
  4. <input type="checkbox" name="pilihan"/> yang digunakan untuk membuat kotak cek.
  5. <input type="radio" name="hobi" value="main layangan"/> yang dipakai untuk mebuat radio button.
  6. <textarea name="masukan" rows="3" cols="60"/> yang digunakan untuk mebulis teks yang lebih banyak lagi, biasanya dipakai untuk mebuat kolom komentar.
  7. <select name="kota" size="1"/> yang digunakan untuk membuat daftar pilihan (list).

Coba kalian ketik kode dibawah ini agar kaliah bisa mengenal tag pada form. berikut ini codenya :

  
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Belajar membuat Form</title>
      </head>
      <body>
        <header>
          Membuat Form
        </header>
        <form action="formulir.html">
          <label>Label Nama :</label>
          <input type="text" name="nama" value="Nama Kamu">
          <br/>

          <label>Password :</label>
          <input type="password" name="password">
          <br/>

          <label>Jenis Kelamin :</label>
          <input type="radio" name="jenisKelamin" value="laki-laki"> Laki - Laki
          <input type="radio" name="jenisKelamin" value="perempuan"> Perempuan
          <br/>

          <label>Hobi :</label>
          <input type="checkbox" name="hobi_baca"> Membaca Buku
          <input type="checkbox" name="hobi_nulis"> Menulis Artikel
          <input type="checkbox" name="hobi_mancing"> Memancing
          <br/>
          
          <label>Asal Kota :</label>
          <select name="kotaAsal">
            <option value="jakarta">Jakarta</option>
            <option value="bandung">Bandung</option>
            <option value="solo">Kota Solo</option>
            <option value="tegal">Kota Tegal</option>
          </select>
          <br/>

          <label>Komentar Anda :</label>
          <textarea name="komentar" rows="3" cols="60">
          <br/>

          <input type="submit" value="Mulai Proses!">
        </body>
      </body>
    </html>
  

Berikut ini adalah hasil dari code diatas :

image Form

Agar berfungsi dengan baik tag form harus dilengkapi dengan beberapa atribut. Pertama, atribut action yang berfungsi untuk mengatur nama file untuk memperoses data-data yang dikumpulkan oleh form.

Biasanya, nama file yang ditulis pada atribut action ini dibuat menggunakan bahasa pemrograman berbasis website, seperti PHP, ASP, Coldfusion, atau bahasa lainnya yang memang memiliki kemampuan untuk memperoses data-data yang dikumpulkan oleh form.

Atribut berikutnya adalah method yang berfungsi untuk mengatur bagaimana data-data form akan dikirim oleh web browser menuju ke file yang telah diatur pada atribut action.

Nilai dari atribut method ada dua pilihan, yaitu bisa berupa get dan post.

Perbedaan method get dan post terletak pada mekanisme pengiriman data. Jika kita memilih get maka data-data form akan dikirim melalui URL. Method get biasanya digunakan untuk mengirim data singkat.

Pada pilihan post, data tidak dikirim melaluin URL. Method post biasanya digunakan untuk data yang bersifat sensitif, seperti username dan password, nomer kartu kredit, dan data-data lainnya yang sangat panjang.

Oke sampai sini dulu artikel kita tentang cara membuat form dan perkenalan tag-tag beserta atribut pada form, semoga bermanfaat.