Tutorial Membuat Formulir yang Keren Menggunakan HTML

HTML merupakan bahasa markup yang digunakan untuk membuat halaman web. Salah satu elemen penting dalam HTML adalah form. Form digunakan untuk memungkinkan pengguna memasukkan data formulir dan mengirimkannya ke server.

Cara Membuat Formulir HTML yang Benar

Sebelum kita mempraktekkannya, alangkah baiknya ketahui terlebih dahulu beberapa cara yang harus diterapkan untuk membuat formulir. Berikut adalah cara membuat form HTML yang benar:

Menentukan Tujuan Form

Sebelum membuat form, tentukan terlebih dahulu tujuan dari form tersebut. Apakah form ini digunakan untuk mengumpulkan informasi kontak, mengirim pesan, atau melakukan transaksi?

Menentukan Elemen Form

Setelah menentukan tujuan dari form, tentukan elemen-elemen yang akan dimasukkan ke dalam form. Elemen-elemen form yang umum digunakan antara lain input teks, input password, input radio, input checkbox, dan tombol submit.

Menulis Kode HTML

Mulai menulis kode HTML untuk form. Gunakan tag <form> untuk memulai form dan tag </form> untuk mengakhiri form. Setiap elemen form dapat ditulis dengan menggunakan tag <label> dan <input>. Contohnya:

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

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

Memberikan Label pada Elemen Form

Berikan label pada setiap elemen form untuk membantu pengguna mengerti tujuan dari setiap elemen form. Seperti yang sudah saya katakan, label dapat ditulis menggunakan tag <label>.

Menambahkan Tombol Submit

Tambahkan tombol submit pada form untuk memungkinkan pengguna mengirimkan data yang dimasukkan. Tombol submit dapat ditambahkan dengan menggunakan tag <input type="submit">.

Menentukan Aksi Form

Tentukan aksi form dengan menambahkan atribut action pada tag <form>. Aksi form menentukan lokasi di mana data form akan dikirimkan.

Menentukan Metode Form

Tentukan metode form dengan menambahkan atribut method pada tag <form>. Metode form menentukan bagaimana data form akan dikirimkan ke server, biasanya menggunakan metode POST atau GET.

Contoh Formulir yang Keren Menggunakan HTML

Membuat formulir yang keren menggunakan HTML sebenarnya cukup mudah dilakukan. Berikut adalah contoh formulir yang keren menggunakan HTML yang dapat kamu lakukan:

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Formulir Keren</title>
    <style>
      form {
        background-color: #f2f2f2;
        padding: 20px;
        border-radius: 5px;
        max-width: 500px;
        margin: auto;
      }

      input[type=text], input[type=email], select, textarea {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
      }

      input[type=submit] {
        background-color: #4CAF50;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      input[type=submit]:hover {
        background-color: #45a049;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .column {
        float: left;
        width: 50%;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Contoh Formulir Keren</h1>
    <form>
      <div class="row">
        <div class="column">
          <label for="fname">Nama Depan</label>
          <input type="text" id="fname" name="fname" placeholder="Nama Depan">

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

          <label for="country">Negara</label>
          <select id="country" name="country">
            <option value="id">Indonesia</option>
            <option value="us">Amerika Serikat</option>
            <option value="jp">Jepang</option>
            <option value="sg">Singapura</option>
          </select>
        </div>

        <div class="column">
          <label for="lname">Nama Belakang</label>
          <input type="text" id="lname" name="lname" placeholder="Nama Belakang">

          <label for="subject">Subjek</label>
          <textarea id="subject" name="subject" placeholder="Tulis sesuatu..." style="height:200px"></textarea>

          <input type="submit" value="Kirim">
        </div>
      </div>
    </form>
  </body>
</html>

Formulir ini memiliki desain yang clean dan mudah dibaca. Terdapat input field untuk nama depan, nama belakang, email, negara, dan subjek. Terdapat juga tombol "Kirim" untuk mengirimkan data formulir. Formulir ini juga memiliki layout yang responsif dan dapat menyesuaikan ukuran layar. Semoga membantu!

Future Creative Blog