Langsung ke konten

Element Form Dasar di HTML: `<form>` dan Input Types

Pelajari element form dasar di HTML menggunakan tag <form>. Pahami attribute action, method, dan berbagai input types seperti text, email, password, dan number.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah menyelesaikan seri tabel, kita masuk ke modul form. Form adalah elemen interaktif yang mengumpulkan input dari pengguna.

Apa itu Form HTML?

Form adalah elemen HTML untuk mengumpulkan data dari pengguna. Data ini bisa dikirim ke server untuk diproses, misalnya disimpan ke database atau dikirim via email.

Form cocok untuk:

  • Form registrasi
  • Form login
  • Form kontak
  • Form pencarian
  • Checkout toko online

Container <form>

Tag <form> jadi container semua elemen form. Dua attribute utama:

  • action — URL tujuan data dikirim
  • method — Cara mengirim data (GET atau POST)
<form action="/proses-form" method="POST">
  <!-- Elemen form di sini -->
</form>

GET vs POST

AspekGETPOST
Data dikirimDi URL (query string)Di body request
KeamananKurang aman (terlihat di URL)Lebih aman
Ukuran dataTerbatas (~2000 karakter)Tidak terbatas
PenggunaanPencarian, filterForm registrasi, upload

Gunakan GET untuk form pencarian. Gunakan POST untuk form yang mengirim data sensitif.

Input Types

Tag <input> adalah elemen paling sering digunakan dalam form. Attribute type menentukan jenis input:

Text

Input teks biasa untuk nama, alamat, dll:

<input type="text" placeholder="Masukkan nama" />

Password

Input yang menyembunyikan karakter:

<input type="password" placeholder="Masukkan password" />

Email

Input yang memvalidasi format email:

<input type="email" placeholder="Masukkan email" />

Number

Input angka dengan kontrol tambahan (tombol panah):

<input type="number" min="0" max="100" placeholder="Masukkan umur" />

Tel

Input nomor telepon (keyboard numerik di mobile):

<input type="tel" placeholder="Masukkan nomor telepon" />

URL

Input yang memvalidasi format URL:

<input type="url" placeholder="Masukkan website" />

Input pencarian dengan tombol clear:

<input type="search" placeholder="Cari..." />

Contoh Form Sederhana

<form action="/kirim" method="POST">
  <div>
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" placeholder="Masukkan nama" />
  </div>

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

  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Masukkan password" />
  </div>

  <div>
    <button type="submit">Kirim</button>
  </div>
</form>

Attribute pada Input

name

name adalah identifier data yang dikirim ke server. Wajib ada agar server bisa membaca nilai input:

<input type="text" name="nama_lengkap" />

Server akan menerima data dengan key nama_lengkap.

placeholder

placeholder menampilkan teks bantuan di dalam input:

<input type="text" placeholder="Contoh: Budi Santoso" />

value

value mengatur nilai awal input:

<input type="text" value="Jakarta" />

readonly

readonly membuat input tidak bisa diubah tapi tetap dikirim:

<input type="text" value="Tidak bisa diubah" readonly />

disabled

disabled membuat input tidak aktif dan tidak dikirim:

<input type="text" value="Tidak aktif" disabled />

Tombol Submit

Tag <button> atau <input type="submit"> untuk mengirim form:

<!-- Menggunakan button -->
<button type="submit">Kirim</button>

<!-- Menggunakan input -->
<input type="submit" value="Kirim" />

Contoh Form Login

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Form Login</title>
  </head>
  <body>
    <h1>Login</h1>

    <form action="/login" method="POST">
      <div>
        <label for="email">Email:</label><br />
        <input type="email" id="email" name="email" placeholder="Masukkan email" required />
      </div>

      <div>
        <label for="password">Password:</label><br />
        <input type="password" id="password" name="password" placeholder="Masukkan password" required />
      </div>

      <div>
        <button type="submit">Login</button>
      </div>
    </form>
  </body>
</html>

Best Practice Form

  • Selalu gunakan name pada input agar server bisa membaca data
  • Gunakan type yang sesuai untuk validasi otomatis
  • Kombinasikan dengan <label> untuk aksesibilitas
  • Gunakan required untuk input wajib
  • Pisahkan form dengan <div> untuk styling lebih mudah

Ringkasan

  • <form> jadi container form dengan attribute action dan method
  • GET untuk data tidak sensitif, POST untuk data sensitif
  • Input types: text, password, email, number, tel, url, search
  • Attribute: name (wajib), placeholder, value, readonly, disabled
  • <button type="submit"> untuk mengirim form

Langkah Selanjutnya

Kamu sudah memahami form dasar. Artikel selanjutnya membahas form input lengkap, termasuk textarea, select, radio, checkbox, dan lainnya.