Membuat website bukan hanya untuk menampilkan informasi saja, Namun penting bagi pemilik website juga menampilkan Form seperti Kontak, Registrasi atau Login. Lalu bagaimana cara membuatnya? Pada kesempatan kali ini kami akan memberikan bagaimana caranya Membuat Form HTML dengan CSS. Langsung saja yuk kita bahas!
Apa itu Form HTML?
Form HTML adalah jenis data yang di inputkan pengguna yang akan diterima oleh pemilik website. Banyak kriteria form yang ada di website, Contohnya seperti, Registrasi Akun, Biodata Diri, Kontak Form dan lain sebagainya.
Form HTML sangatlah penting bagi pemilik website, Untuk disediakan dalam Website. Sesuai dengan jenis website itu sendiri.
Baca Juga : Cara Membuat Button Modern dengan HTML dan CSS
Cara Membuat Form HTML dengan CSS
Form di HTML memiliki tag <form>.
Tag <form> memiliki beberapa atribut didalamnya, seperti:
- action untuk menentukan aksi pada isian dikirimkan ke file selanjutnya;
- method metode pengiriman data.
Form Penjualan Buku
Buatlah file index.html dan style.css. Lalu tuliskan syntax berikut ini:
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Input Buku</title> <link rel="stylesheet" href="style.css"> </head> <body> <form method="POST" action="input_buku.php"> <label for="nama_buku">Nama Buku:</label> <input type="text" name="namabuku" id="namabuku" required> <label for="stok">Stok:</label> <input type="number" name="stok" id="stok" required> <label for="harga">Harga Buku:</label> <input type="number" name="hargabuku" id="hargabuku" required> <label for="tanggal_terbit">Tanggal Terbit:</label> <input type="date" name="tanggalterbit" id="tanggalterbit" required> <input type="submit" value="Submit"> </form> </body> <footer>COPYRIGHT 2023 alafgani.web.id</footer> </html>
Style.css
body { font-family: Arial, sans-serif; } form { width: 300px; margin: 20px auto; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="number"], input[type="date"] { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } input[type="submit"]:hover { background-color: #45a049; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }
Setelah Kamu menuliskan syntax diatas, maka jalankan index.html di browser dan Hasilnya akan menjadi seperti ini:
Form diatas adalah form penjualan buku yang kita buat, kamu bisa memodifikasinya dengan form yang lain.
Baca Juga : Gampang! Cara Membuat Favicon Website HTML
Form HTML Pendaftaran Mahsiswa Baru
Contoh ke dua yang akan kita buat adalah form pendaftaran mahasiswa baru, Buat file index.html dan style.css dan tuliskan syntax dibawah ini:
index.html
<!DOCTYPE html> <html> <head> <title>Form Pendaftaran Mahasiswa</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Form Pendaftaran Mahasiswa</h1> <form action="#" method="post"> <label for="nama">Nama:</label> <input type="text" id="nama" name="nama" required> <br> <label for="nim">NIM:</label> <input type="text" id="nim" name="nim" required> <br> <label for="jurusan">Jurusan:</label> <select id="jurusan" name="jurusan" required> <option value="" disabled selected>Pilih Jurusan</option> <option value="Teknik Informatika">Teknik Informatika</option> <option value="Sistem Informasi">Sistem Informasi</option> <option value="Manajemen Informatika">Manajemen Informatika</option> <!-- Tambahkan pilihan jurusan lainnya di sini --> </select> <br> <label>Jenis Kelamin:</label> <input type="radio" id="laki-laki" name="jenis_kelamin" value="Laki-laki" required> <label for="laki-laki">Laki-laki</label> <input type="radio" id="perempuan" name="jenis_kelamin" value="Perempuan" required> <label for="perempuan">Perempuan</label> <br> <label for="alamat">Alamat:</label> <textarea id="alamat" name="alamat" rows="4" required></textarea> <br> <label for="no_hp">Nomor HP:</label> <input type="tel" id="no_hp" name="no_hp" pattern="[0-9]{10,12}" required> <br> <input type="submit" value="Submit"> </form> </body> </html>
Style.css
body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } h1 { text-align: center; margin-top: 20px; } form { max-width: 500px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="tel"], select, textarea { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 14px; } textarea { resize: vertical; } input[type="radio"] { margin-right: 5px; } input[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; }
Penutup
Akhir dari pembahasan membuat form html dengan css, Hanya dengan melihat dan menuliskan syntax dengan benar kamu sudah pasti memahami dengan cepat, Cobalah dengan try in error. Maka, Kamu akan lebih cepat memahaminya. Jika ada pertanyaan lain terkait membuat form html tulis dikolom komentar ya!
Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.
trmksh