Di bawah ini kita akan mempelajari cara membuat formulir kontak dengan CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> </head> <body> <h3>Contact Form</h3> <div class="container"> <form action="/action_page.php"> <label for="fname">Nama Depan</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Nama Belakang</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Negara</label> <select id="country" name="country"> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="korea">Korea</option> </select> <label for="subject">Subjek</label> <textarea id="subject" name="subject" placeholder="tulis sesuatu.." style="height:200px"></textarea> <input type="submit" value="Submit"> </form> </div> </body> </html>
Langkah 1) Tambahkan HTML
Gunakan elemen untuk memproses masukan. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami. Kemudian tambahkan masukan (denganyang cocok) untuk setiap bidang:
Contoh
<div class="container"> <form action="/action_page.php"> <label for="fname">Nama Depan</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Nama Belakang</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Negara</label> <select id="country" name="country"> <option value="indonesia">Indonesia</option> <option value="malaysia">Malaysia</option> <option value="korea">Korea</option> </select> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea> <input type="submit" value="Submit"> </form> </div>
Langkah 2) Tambahkan CSS:
Contoh
/* style input dengan type = "text", pilih elemen dan area teks */input[type=text], select, textarea { width: 100%; /* lebar maksimum */ padding: 12px; /* padding */ border: 1px solid #ccc; /* border abu-abu */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Pastikan padding dan lebar tetap pada tempatnya */ margin-top: 6px; /* Tambahkan margin atas*/ margin-bottom: 16px; /* margin bawah */ resize: vertical /* Izinkan pengguna untuk mengubah ukuran textarea secara vertikal (bukan horizontal) */} /* Style submit button dengan warna background tertentu, dll */input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* Saat menggerakkan mouse ke atas button submit, tambahkan warna hijau yang lebih gelap*/input[type=submit]:hover { background-color: #45a049; } /* Tambahkan warna background dan beberapa padding di sekitar contack form */.container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }