Modul Pembelajaran: Membuat Form HTML Dasar
Modul Pembelajaran: Membuat Form HTML Dasar
Belajar membuat form HTML dengan penjelasan baris per baris kode
Form HTML adalah salah satu elemen terpenting dalam pengembangan web. Modul ini akan menjelaskan cara membuat form HTML dasar dengan penjelasan setiap baris kode, sehingga mudah dipahami oleh pemula.
Mengapa Belajar Form HTML?
Form HTML digunakan untuk mengumpulkan input dari pengguna. Form dapat digunakan untuk berbagai keperluan seperti:
- Formulir kontak
- Pendaftaran akun
- Pemesanan produk
- Kuis dan survei
- Dan banyak lagi
Struktur Dasar Form HTML
Berikut adalah contoh kode form HTML dasar dengan penjelasan setiap baris:
<!DOCTYPE html> <!-- Deklarasi tipe dokumen sebagai HTML5 --> <html lang="id"> <!-- Tag pembuka html dengan atribut bahasa Indonesia --> <head> <!-- Bagian kepala dokumen: berisi metadata dan informasi halaman --> <meta charset="UTF-8"> <!-- Pengaturan karakter encoding untuk mendukung huruf Latin dan khusus --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Pengaturan viewport agar tampilan responsif di perangkat mobile --> <title>Formulir Pendaftaran Siswa</title> <!-- Judul halaman yang muncul di tab browser --> </head> <body> <!-- Bagian tubuh dokumen: berisi konten yang ditampilkan di browser --> <h1>Formulir Pendaftaran Siswa Baru</h1> <!-- Heading level 1 sebagai judul utama halaman --> <p>Silakan isi formulir berikut dengan data yang benar.</p> <!-- Paragraf untuk instruksi pengisian form --> <form action="proses.php" method="POST"> <!-- Tag pembuka form dengan atribut: action: tujuan pengiriman data (ke file proses.php) method: metode pengiriman data (POST) --> <label for="nama">Nama Lengkap:</label> <!-- Label untuk input nama, atribut for menghubungkan ke input id --> <input type="text" id="nama" name="nama" required> <!-- Input teks untuk nama, atribut required menandakan wajib diisi --> <br><br> <!-- Baris baru dan spasi --> <label for="email">Alamat Email:</label> <input type="email" id="email" name="email" required> <!-- Input email dengan validasi format email --> <br><br> <label for="password">Kata Sandi:</label> <input type="password" id="password" name="password" required> <!-- Input password (teks tersembunyi) --> <br><br> <button type="submit">Daftar</button> <!-- Tombol untuk mengirimkan form --> </form> <!-- Tag penutup form --> </body> <!-- Tag penutup body --> </html> <!-- Tag penutup html -->
Contoh Form yang Dihasilkan
Berikut adalah contoh form HTML yang dihasilkan dari kode di atas:
Formulir Pendaftaran Siswa Baru
Silakan isi formulir berikut dengan data yang benar.
Tugas untuk Siswa
Setelah mempelajari contoh form di atas, silakan kerjakan tugas berikut:
1. Memodifikasi Form yang Sudah Ada
- Tambahkan field baru (minimal 3 field) seperti tanggal lahir, jenis kelamin, atau alamat
- Ubah warna atau tata letak form dengan menambahkan CSS
- Tambahkan validasi pada field tertentu
2. Membuat Form Baru dengan Tema
- Formulir kontak website
- Formulir pemesanan makanan
- Formulir pendaftaran event
- Formulir pengaduan/layanan masyarakat
3. Kriteria Penilaian
- Struktur HTML yang benar
- Penggunaan atribut yang tepat
- Kreativitas dalam desain form
- Keberfungsian form (dapat diisi dan dikirim)
Simpan hasil pekerjaan Anda dalam folder html-dasar dengan nama file form-saya.html
Tips untuk Siswa
- Selalu gunakan tag <label> untuk setiap input
- Gunakan atribut required untuk field yang wajib diisi
- Pilih type input yang sesuai dengan data yang diminta
- Kelompokkan field yang terkait dengan <fieldset> dan <legend>
- Test form Anda di berbagai browser (Chrome, Firefox, Edge)
- Gunakan placeholder untuk memberikan contoh pengisian
Langkah Selanjutnya
Setelah menguasai pembuatan form HTML dasar, pelajari juga:
- CSS untuk memperindah tampilan form
- JavaScript untuk validasi form yang lebih kompleks
- PHP untuk memproses data form di server
- Framework CSS seperti Bootstrap untuk form yang responsif
Komentar
Posting Komentar