Postingan
Tutorial HTML Lanjutan: Cara Mudah Membuat Form Input & Tombol Kirim
Assalamualaikum Wr. Wb.
Tutorial HTML Lanjutan: Cara Mudah Membuat Form Input & Tombol Kirim | Belajar Web Dasar Part 2 | Melanjutkan materi sebelumnya yang sudah membahas tag dasar, paragraf, dan tabel, sekarang kita akan masuk ke bagian yang paling sering digunakan dalam pembuatan website yaitu Form & Input. Kurang lengkap rasanya sebuah web kalau pengunjung tidak bisa login, mendaftar akun, atau mengirim pesan, jadi kali ini admin akan membagikan panduan step-by-step membuat form input yang rapi dan dijamin work 100%.
1. Mengenal Tag <form>
Tag <form> berfungsi sebagai wadah untuk menampung seluruh elemen input. Di dalam tag ini biasanya terdapat atribut action (tujuan file pemroses data) dan method (metode pengiriman data seperti GET atau POST).
<form action="proses.php" method="POST">
<!-- Elemen input dimasukkan di sini -->
</form>2. Menambahkan Input Teks, Password, dan Email
Elemen paling utama adalah tag <input>. Kita bisa membedakan fungsinya lewat atribut type.
- type="text" : untuk input teks standar seperti Nama atau Username.
- type="email" : khusus input alamat email (otomatis validasi format email).
- type="password" : karakter yang diketik akan disamarkan menjadi titik-titik (dots).
Berikut contoh kodenya jika digabungkan dengan tag <label> agar rapi:
<form action="proses.php" method="POST">
<label for="nama">Nama Lengkap:</label><br>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama anda..." required><br><br>
<label for="email">Alamat Email:</label><br>
<input type="email" id="email" name="email" placeholder="contoh@gmail.com" required><br><br>
<label for="pass">Kata Sandi:</label><br>
<input type="password" id="pass" name="password" placeholder="Minimal 8 karakter" required>
</form>[Maka akan tampil window / form seperti di bawah ini]
3. Pilihan Dropdown (<select>) dan Textarea
Jika anda butuh input yang berupa pilihan dropdown atau area teks panjang untuk kritik & saran:
- Gunakan
<select>dan<option>untuk menu dropdown. - Gunakan
<textarea>untuk kolom komentar atau pesan panjang.
<!-- Dropdown Pilihan -->
<label for="kota">Pilih Kota Asal:</label><br>
<select id="kota" name="kota">
<option value="jakarta">Jakarta</option>
<option value="bogor">Bogor</option>
<option value="bandung">Bandung</option>
<option value="semarang">Semarang</option>
</select><br><br>
<!-- Textarea Pesan -->
<label for="pesan">Pesan / Catatan Tambahan:</label><br>
<textarea id="pesan" name="pesan" rows="4" cols="40" placeholder="Tulis pesan anda di sini..."></textarea>4. Menambahkan Tombol Submit & Full Code
Langkah terakhir adalah memberikan tombol pengirim agar data bisa dikirim ke server. Gunakan <button type="submit"> atau <input type="submit">.
Berikut adalah source code lengkap form kontak / registrasi sederhana yang bisa langsung anda copy dan coba di text editor (Notepad, Sublime Text, atau VS Code):
<!DOCTYPE html>
<html>
<head>
<title>Contoh Form HTML Dasar</title>
</head>
<body>
<h2>Formulir Pendaftaran Member</h2>
<form action="proses.php" method="POST">
<p>
<label>Nama Lengkap:</label><br>
<input type="text" name="nama" placeholder="Nama anda" required>
</p>
<p>
<label>Email Aktif:</label><br>
<input type="email" name="email" placeholder="email@domain.com" required>
</p>
<p>
<label>Password:</label><br>
<input type="password" name="password" required>
</p>
<p>
<label>Jenis Kelamin:</label><br>
<input type="radio" id="pria" name="gender" value="L">
<label for="pria">Laki-laki</label>
<input type="radio" id="wanita" name="gender" value="P">
<label for="wanita">Perempuan</label>
</p>
<p>
<label>Domisili:</label><br>
<select name="kota">
<option value="JKT">Jakarta</option>
<option value="BGR">Bogor</option>
<option value="BDG">Bandung</option>
</select>
</p>
<p>
<label>Alamat Lengkap:</label><br>
<textarea name="alamat" rows="3" cols="30"></textarea>
</p>
<p>
<input type="submit" value="Kirim Data">
<input type="reset" value="Reset Form">
</p>
</form>
</body>
</html>Itulah tutorial lanjutan HTML dasar mengenai pembuatan Form & Input. Jika ada error saat dijalankan di browser, periksa kembali penulisan tag penutupnya.
Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.
Terima Kasih.
Wassalamualaikum Wr. Wb.
0 Komentar
Posting Komentar
Pengunjung yang baik selalu meninggalkan komentar
Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.
Terima Kasih