Belajar Koding HTML & CSS Bagian 4: Membuat Desain Formulir / Komentar
.png)
Formulir
CSS adalah formulir yang dibuat dengan menggunakan Cascading Style Sheets
(CSS) untuk mengatur tampilan dan format formulir. CSS adalah bahasa
pemrograman yang digunakan untuk menentukan tampilan website.
Manfaat
CSS untuk formulir
- Mengubah warna, ukuran, margin, dan
elemen visual lainnya
- Memberikan tampilan yang menarik dan
modern
- Memberikan tampilan yang elegan
dengan box shadow dan border-radius
- Memberikan efek interaktif dengan
hover pada tombol submit
Komponen
formulir CSS
Elemen
teks input, Kotak centang, Radio, Area teks, Pilihan, Unggahan file, Tombol
alih.
Cara
menggunakan CSS untuk formulir
- Tambahkan beberapa gaya dengan CSS
untuk membuat formulir terlihat menarik dan modern
- Gunakan .form-control pada elemen
input, textarea, dan select untuk menjangkau seluruh lebar halaman dan
membuatnya responsif
Berikut adalah langkah-langkah untuk membuat Formulir Komentar sederhana menggunakan HTML dan CSS, yang memungkinkan pengguna untuk memasukkan dan mengirimkan komentar:
1. Struktur HTML
Buat file HTML dengan struktur
berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Formulir
Komentar</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<div class="comment-section">
<h2>Tambahkan
Komentar</h2>
<form class="comment-form">
<div class="form-group">
<label for="username">Nama:</label>
<input type="text"
id="username" name="username" required>
</div>
<div class="form-group">
<label for="comment">Komentar:</label>
<textarea id="comment"
name="comment" rows="4" required></textarea>
</div>
<button type="submit">Kirim
Komentar</button>
</form>
</div>
</body>
</html>
2. Gaya CSS
Buat file styles.css
dan tambahkan gaya berikut untuk mempercantik tampilan formulir komentar:
body {
font-family: Arial,
sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
.comment-section {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px
rgba(0,0,0,0.1);
}
.comment-section h2 {
margin-bottom: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #5cb85c;
color: white;
border: none;
padding: 10px 15px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
Hasil Output
Penjelasan:
- Struktur
HTML:
- <div
class="comment-section">: Wadah utama untuk formulir komentar.
- <form
class="comment-form">: Formulir untuk input nama dan komentar.
- <div
class="form-group">: Grup untuk setiap label dan input field.
- <label>: Label deskriptif untuk
input.
- <input
type="text">: Input teks untuk nama pengguna.
- <textarea>: Area teks untuk isi
komentar.
- <button
type="submit">: Tombol untuk mengirimkan komentar.
- Gaya
CSS:
- body: Mengatur font dasar dan
latar belakang halaman.
- .comment-section: Mengatur lebar maksimum,
margin, warna latar, padding, border-radius, dan bayangan untuk wadah
formulir.
- .form-group: Memberikan margin bawah
untuk setiap grup input.
- label: Menampilkan label sebagai
blok dengan margin bawah.
- input[type="text"] dan textarea: Mengatur lebar, padding,
border, dan border-radius untuk input.
- button: Mengatur warna latar, teks,
border, padding, border-radius, dan efek hover untuk tombol.
Formulir ini memungkinkan pengguna
untuk memasukkan nama dan komentar mereka. Untuk membuat komentar yang
dikirimkan tampil di halaman secara dinamis, Anda memerlukan JavaScript untuk
menangani penambahan elemen komentar baru ke dalam DOM. Jika Anda tertarik
untuk menambahkan fungsionalitas tersebut, saya dapat membantu menyediakan
contoh kode JavaScript yang sesuai.
Referensi;
0 Response to "Belajar Koding HTML & CSS Bagian 4: Membuat Desain Formulir / Komentar"
Post a Comment