membuat form menggunakan HTML

 Formulir atau form adalah salah satu elemen penting dalam pembuatan halaman web. Dalam artikel ini, kita akan membahas bagaimana cara membuat form menggunakan HTML.

1. Membuat Tag Form Untuk membuat form di HTML, kita perlu menambahkan tag <form> yang menunjukkan bahwa kita akan membuat form pada halaman web. Contohnya seperti berikut ini:

html
<form>
   <!-- Konten form akan ditambahkan di sini -->
</form>

2. Menambahkan Input Field Setelah menambahkan tag form, selanjutnya kita perlu menambahkan input field atau field masukan. Input field adalah area di dalam form yang digunakan untuk memasukkan data seperti nama, email, dan lain-lain. Ada beberapa jenis input field yang bisa ditambahkan pada form di antaranya adalah:

• Text Input: Input field untuk memasukkan teks. Contohnya seperti berikut ini:

html
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">

• Email Input: Input field untuk memasukkan alamat email. Contohnya seperti berikut ini:

html
<label for="email">Email:</label>
<input type="email" id="email" name="email">

• Password Input: Input field untuk memasukkan password. Contohnya seperti berikut ini:

html
<label for="password">Password:</label>
<input type="password" id="password" name="password">

• Checkbox Input: Input field untuk memilih satu atau beberapa pilihan. Contohnya seperti berikut ini:

html
<label for="hobi">Hobi:</label>
<input type="checkbox" id="hobi1" name="hobi1" value="Membaca">
<label for="hobi1">Membaca</label>
<input type="checkbox" id="hobi2" name="hobi2" value="Menulis">
<label for="hobi2">Menulis</label>

• Radio Input: Input field untuk memilih satu dari beberapa pilihan. Contohnya seperti berikut ini:

html
<label for="gender">Jenis Kelamin:</label>
<input type="radio" id="laki" name="gender" value="Laki-laki">
<label for="laki">Laki-laki</label>
<input type="radio" id="perempuan" name="gender" value="Perempuan">
<label for="perempuan">Perempuan</label>

• Select Input: Input field untuk memilih salah satu opsi dari daftar opsi. Contohnya seperti berikut ini:

html
<label for="kota">Kota:</label>
<select id="kota" name="kota">
  <option value="Jakarta">Jakarta</option>
  <option value="Bandung">Bandung</option>
  <option value="Surabaya">Surabaya</option>
</select>

3. Menambahkan Button Setelah menambahkan input field, selanjutnya kita perlu menambahkan button atau tombol. Button digunakan untuk mengirimkan data yang dimasukkan pada form ke server atau melakukan tindakan lain seperti reset form. Ada beberapa jenis button yang bisa ditambahkan pada form di antaranya adalah:

• Submit Button: Button untuk mengirimkan data pada form ke server. Contohnya seperti berikut ini:

html
<input type="submit" value="Kirim">

• 4. Menambahkan Label Label digunakan untuk memberikan deskripsi pada setiap input field yang ada pada form. Label biasanya ditempatkan di sebelah input field. Label bisa ditambahkan dengan menggunakan tag <label>. Berikut contohnya:

  html
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  

  5. Menambahkan Attribute pada Input Field Selain tag yang telah dijelaskan di atas, input field juga memiliki beberapa attribute yang bisa ditambahkan. Attribute ini bisa digunakan untuk memberikan informasi tambahan pada input field, seperti placeholder, required, dan lain-lain. Berikut contohnya:
  • Placeholder Attribute: Attribute untuk menambahkan teks pada input field yang memberikan petunjuk apa yang harus dimasukkan pada input field tersebut. Contohnya seperti berikut ini:

  html
  <input type="text" id="nama" name="nama" placeholder="Masukkan nama anda">
  

  • Required Attribute: Attribute untuk menandai bahwa input field tersebut harus diisi. Contohnya seperti berikut ini:

  html
  <input type="email" id="email" name="email" required>
  

  6. Menambahkan Form Action dan Method Setelah menambahkan input field dan button, kita perlu menambahkan form action dan method. Form action adalah URL yang dituju ketika form dikirimkan, sedangkan method adalah metode yang digunakan untuk mengirimkan data dari form. Method yang umum digunakan adalah GET dan POST. Berikut contohnya:

  html
  <form action="/proses-form.php" method="POST">
     <!-- Konten form akan ditambahkan di sini -->
     <input type="submit" value="Kirim">
  </form>

  7. Menambahkan Fieldset dan Legend Fieldset dan legend digunakan untuk mengelompokkan beberapa input field pada form. Fieldset digunakan untuk membuat kotak atau bingkai di sekitar beberapa input field yang memiliki fungsi atau tujuan yang sama, sedangkan legend digunakan untuk memberikan judul atau deskripsi pada fieldset. Berikut contohnya:

  html
  <form action="/proses-form.php" method="POST">
     <fieldset>
        <legend>Data Diri</legend>
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
     </fieldset>
     <br>
     <fieldset>
        <legend>Hobi</legend>
        <label for="hobi1">Membaca</label>
        <input type="checkbox" id="hobi1" name="hobi1" value="Membaca">
        <br>
        <label for="hobi2">Menulis</label>
        <input type="checkbox" id="hobi2" name="hobi2" value="Menulis">
     </fieldset>
     <br>
     <input type="submit" value="Kirim">
  </form>

  Dalam contoh di atas, terdapat dua fieldset yang memiliki input field yang berbeda-beda.

  Itulah cara membuat form menggunakan HTML. Dengan memahami cara membuat form, Anda dapat membuat form yang sesuai dengan kebutuhan Anda pada halaman web yang Anda buat