Membuat Formulir HTML: Input, Textarea, dan Button

Struktur Dasar Formulir di HTML

Untuk membuat formulir di HTML, kamu membutuhkan tag <form>. Di dalam tag ini, kamu akan menyisipkan berbagai elemen input, textarea, dan button. Berikut adalah struktur dasar dari sebuah formulir:

<form action="proses.php" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="pesan">Pesan:</label>
  <textarea id="pesan" name="pesan"></textarea>
  
  <button type="submit">Kirim</button>
</form>

Penjelasan:

• <form>: Tag utama yang membungkus elemen-elemen formulir.

• action: Menentukan URL tujuan untuk memproses data formulir setelah formulir disubmit.

• method: Menentukan metode HTTP yang digunakan untuk mengirimkan data formulir (biasanya GET atau POST).

• <label>: Digunakan untuk memberikan label yang menjelaskan setiap elemen input.

• <input>: Digunakan untuk berbagai jenis input data (seperti teks, email, password, dll.).

• <textarea>: Digunakan untuk menerima teks panjang dari pengguna.

• <button>: Digunakan untuk membuat tombol kirim formulir.

Elemen-elemennya:

1. Input Teks (<input>)

Elemen <input> adalah elemen dasar untuk menerima input dari pengguna. Ada banyak jenis input yang bisa digunakan, tergantung jenis data yang ingin dikumpulkan. Untuk contoh ini, kita akan menggunakan input tipe text dan email.

Contoh input teks:

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

Contoh input email:

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

Atribut yang umum digunakan pada elemen <input>:

• type: Menentukan jenis input, seperti text, email, password, number, dll.

• id: Menentukan ID elemen input yang digunakan untuk menghubungkan dengan tag <label>.

• name: Menentukan nama yang digunakan untuk mengidentifikasi data yang dikirimkan.

2. Textarea (<textarea>)

Jika kamu perlu menampung teks panjang, kamu bisa menggunakan elemen <textarea>. Elemen ini memungkinkan pengguna untuk mengetik lebih banyak teks, seperti komentar atau pesan.

Contoh textarea:

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan"></textarea>

Kamu juga bisa menentukan ukuran area teks dengan atribut rows dan cols:

<textarea id="pesan" name="pesan" rows="4" cols="50"></textarea>

3. Button (<button>)

Untuk mengirimkan data formulir, kamu membutuhkan tombol yang disebut submit button. Ini bisa dibuat menggunakan elemen <button> dengan tipe submit.  

Contoh tombol kirim:

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

Ketika tombol ini ditekan, data formulir akan dikirimkan ke server sesuai dengan URL yang ditentukan dalam atribut action.  

Atribut Penting dalam Formulir

Beberapa atribut pada tag <form> dan elemen formulir lainnya sangat penting untuk memastikan formulir berfungsi dengan baik dan aman:

• action: Menentukan URL yang menerima dan memproses data formulir. Misalnya, "proses.php" adalah URL yang memproses data formulir.

• method: Menentukan metode pengiriman data ke server. Biasanya menggunakan GET (untuk pengambilan data) atau POST (untuk mengirim data secara aman).

• name: Atribut ini digunakan pada elemen input untuk memberi nama data yang dikirimkan ke server.

• placeholder: Memberikan petunjuk atau contoh teks di dalam kolom input sebelum pengguna mengetik.  

Contoh dengan placeholder:

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

Validasi Formulir

HTML5 menawarkan beberapa fitur validasi formulir bawaan yang memungkinkan kamu untuk memverifikasi inputan pengguna sebelum data dikirimkan ke server. Sebagai contoh, kamu dapat menambahkan atribut seperti required, minlength, atau pattern untuk memastikan data yang dimasukkan sudah sesuai.

Contoh validasi menggunakan required dan email:

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

• required: Menandakan bahwa kolom input harus diisi.

• email: Menentukan bahwa input harus berbentuk alamat email yang valid.

• pattern: Menentukan pola tertentu yang harus dipatuhi oleh input (misalnya, nomor telepon atau kode pos).

Menyambung ke Elemen HTML Selanjutnya: Penggunaan Tag Div dan Span untuk Layout

Sekarang kita sudah memahami cara membuat formulir yang berfungsi dengan baik, langkah berikutnya adalah mengatur layout atau tata letak halaman. Untuk itu, kita akan membahas tentang tag <div> dan <span>. Kedua tag ini sangat berguna dalam pengaturan layout halaman web, terutama ketika kamu bekerja dengan CSS untuk membuat desain responsif. Pada artikel berikutnya, kita akan belajar bagaimana menggunakan <div> dan <span> untuk mengatur elemen-elemen dalam halaman agar tampil lebih rapi.