Bikin Formulir dan Pemisah Baris dengan Mudah menggunakan Elemen Input dan Break
Mau bikin form di website dengan HTML? Gampang kok! Formulir itu penting buat interaksi pengguna, misalnya buat ngumpulin data kayak nama, email, atau pesan. Di HTML, kita bisa pakai elemen <form>
dan <input>
buat bikin form.
Langkah-langkah Bikin Formulir:
Tambah Elemen <input>
: Dipakai buat berbagai jenis input, kayak teks, email, atau password. Atribut type
nunjukin jenis input, name
kasih nama ke input, dan placeholder
kasih petunjuk ke pengguna.
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda"><br>
<input type="submit" value="Kirim">
Di contoh di atas, <label>
dipakai buat kasih label ke input, dan <br>
dipakai buat bikin baris baru setelah tiap input, biar tampilannya lebih rapi.
Buat Elemen <form>
: Ini wadah buat semua elemen input. Atribut action
nunjukin URL tujuan data dikirim, dan method
nunjukin metode pengiriman (GET
atau POST
).
<form action="proses.php" method="POST">
<!-- Elemen input taruh di sini -->
</form>
Pakai Elemen <br>
buat Pemisah Baris:
Elemen <br>
dipakai buat nyisipin baris baru di HTML, mirip kayak pencet "Enter" di keyboard. Ini berguna kalau kamu mau misahin elemen tanpa mulai paragraf baru.
Contoh penggunaan <br>
:
<p>Baris pertama.<br>Baris kedua.</p>
Hasilnya bakal nampilin "Baris pertama." diikuti "Baris kedua." di baris berikutnya.
Contoh Formulir Lengkap:
Berikut contoh form pendaftaran sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Formulir Pendaftaran</title>
</head>
<body>
<h2>Formulir Pendaftaran</h2>
<form action="proses.php" method="POST">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Masukkan email Anda" required><br><br>
<label for="password">Kata Sandi:</label><br>
<input type="password" id="password" name="password" placeholder="Masukkan kata sandi" required><br><br>
<input type="submit" value="Daftar">
</form>
</body>
</html>
Di contoh ini, tiap elemen input dipisahin pake <br>
buat bikin baris baru, dan atribut required
ditambahin buat pastiin pengguna ngisi semua field sebelum kirim form.
Tips Tambahan:
- Pakai
<label>
dengan atributfor
: Ini ngaitin label dengan input tertentu, ningkatin aksesibilitas dan kemudahan penggunaan. - Validasi Data: Pastiin buat validasi data yang dimasukin pengguna, baik di sisi klien (pake JavaScript) maupun di sisi server, buat jaga keamanan dan integritas data.
- Desain Responsif: Pastiin form kamu tampil dengan baik di berbagai perangkat dengan pake CSS yang responsif.
Dengan ngerti cara pake elemen <form>
, <input>
, dan <br>
, kamu bisa bikin form yang fungsional dan user-friendly di website kamu.