Halo Semuanya!
Karena kalian sudah memahami dasar-dasar HTML seperti apa itu tag, atribut, dan struktur dasar halaman, kali ini kita tidak akan membahas teori panjang lebar. Kita akan langsung praktik.
Hari ini kita akan membuat sebuah Halaman Kontak (Contact Form). Tapi bukan sekadar kotak isian biasa, kita akan menggunakan fitur HTML5 agar formulir ini memiliki validasi otomatis (misalnya: menolak jika email tidak valid) tanpa perlu coding JavaScript.
Apa yang Akan Kita Buat?
Sebuah formulir yang berisi:
Input Nama Lengkap.
Input Email (dengan validasi format).
Dropdown untuk memilih Subjek pesan.
Area teks untuk pesan.
Tombol kirim yang interaktif.
Kode Sumber (Source Code)
Salin kode di bawah ini, simpan sebagai file .html (misalnya: latihan_form.html), lalu buka di browser kalian.
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan Praktik HTML - Contact Form</title>
<style>
/* Sedikit CSS agar tampilan tidak kaku */
body { font-family: sans-serif; background-color: #f4f4f4; padding: 20px; }
.container { max-width: 500px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h2 { text-align: center; color: #333; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #218838; }
</style>
</head>
<body>
<div class="container">
<h2>Hubungi Kami</h2>
<p>Silakan isi formulir di bawah ini untuk pertanyaan atau kerjasama.</p>
<form action="#" method="POST">
<div class="form-group">
<label for="nama">Nama Lengkap:</label>
<input type="text" id="nama" name="nama" placeholder="Masukkan nama Anda" required>
</div>
<div class="form-group">
<label for="email">Alamat Email:</label>
<input type="email" id="email" name="email" placeholder="contoh@email.com" required>
</div>
<div class="form-group">
<label for="subjek">Subjek Pesan:</label>
<select id="subjek" name="subjek">
<option value="tanya">Pertanyaan Umum</option>
<option value="kerjasama">Penawaran Kerjasama</option>
<option value="lapor">Lapor Bug/Masalah</option>
</select>
</div>
<div class="form-group">
<label for="pesan">Pesan Anda:</label>
<textarea id="pesan" name="pesan" rows="5" placeholder="Tuliskan pesan Anda di sini..." required></textarea>
</div>
<button type="submit">Kirim Pesan</button>
</form>
</div>
</body>
</html>
Bedah Fitur (Apa yang Baru?)
Jika kalian perhatikan kode di atas, ada beberapa atribut HTML yang sangat berguna dalam praktik dunia nyata:
type="email": Cobalah mengisi kolom email dengan teks asal (tanpa simbol @). Browser akan otomatis memunculkan peringatan "Please include an '@' in the email address". Ini fitur bawaan HTML5, jadi kita tidak perlu pusing membuat validasi manual.required: Atribut ini memaksa pengguna untuk mengisi kolom tersebut. Jika dikosongkan dan tombol "Kirim" ditekan, browser akan menolak pengiriman data.placeholder: Teks samar di dalam kotak input yang memberikan petunjuk kepada pengguna tentang apa yang harus ditulis (contoh: "contoh@email.com").select&option: Elemen ini membuat menu dropdown. Sangat penting dipahami karena menghemat ruang layar dibandingkan menampilkan semua pilihan sekaligus.
Tantangan Untukmu!
Kode di atas sudah jadi, tapi masih bisa dikembangkan. Coba lakukan modifikasi berikut untuk melatih skill kalian:
Tambahkan Input Tanggal: Gunakan
<input type="date">agar pengguna bisa memilih tanggal janji temu.Tambahkan Input Nomor HP: Gunakan
<input type="tel">.Ubah Warna: Coba ubah warna tombol dari hijau menjadi biru dengan mengedit bagian
<style>.
Selamat mencoba dan happy coding! Jangan lupa bagikan hasil oprekan kalian di kolom komentar.
Tips Cara Posting di Blogger:
Masuk ke dashboard Blogger.
Klik Postingan Baru.
Pilih mode Tampilan HTML (ikon pensil/kurung siku di kiri atas editor), bukan Tampilan Menulis.
Paste kode di atas jika ingin menampilkan demonya langsung, atau gunakan fitur Blockquote / Code snippet jika ingin menampilkan kodenya sebagai teks bacaan.
Untuk kode yang ditampilkan agar bisa dicopy pembaca, pastikan kamu menggunakan syntax highlighter atau masukkan ke dalam tag
<pre><code> ... </code></pre>agar rapi.
Apakah kamu ingin saya buatkan versi lanjutannya yang menghubungkan formulir ini ke Google Sheets (sebagai database sederhana)?
Tidak ada komentar:
Posting Komentar