Bagaimana membuat: formulir responsif
- Halaman sebelumnya Form yang dipadatkan
- Halaman berikutnya Form pop-up
Belajar bagaimana membuat formulir responsif menggunakan CSS.
Formulir responsif
Tolong atur ukuran jendela browser untuk melihat efeknya (pada layar yang kecil, label dan kotak input akan dikelompokkan, bukannya diatur bersama-sama):
Bagaimana membuat formulir responsif
Langkah pertama - Tambahkan HTML:
Gunakan elemen <form> untuk menangani input. Anda dapat mengetahui lebih lanjut tentang pelatihan PHP kami.
Tambahkan input untuk setiap field (dengan label yang sesuai) dan gunakan elemen <div> untuk mewrapper label dan input, untuk mengatur lebar yang ditentukan dengan CSS:
<div class="container"> <form action="action_page.php"> <div class="row"> <div class="col-25"> <label for="fname">Nama Depan</label> </div> <div class="col-75"> <input type="text" id="fname" name="firstname" placeholder="Nama Anda.."> </div> </div> <div class="row"> <div class="col-25"> <label for="lname">Nama Belakang</label> </div> <div class="col-75"> <input type="text" id="lname" name="lastname" placeholder="Nama belakang Anda.."> </div> </div> <div class="row"> <div class="col-25"> <label for="country">Negara</label> </div> <div class="col-75"> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> </div> </div> <div class="row"> <div class="col-25"> <label for="subject">Subjek</label> </div> <div class="col-75"> <textarea id="subject" name="subject" placeholder="Tulis sesuatu.." style="height:200px"></textarea> </div> </div> <div class="row"> <input type="submit" value="Submit"> </div> </form> </div>
Langkah kedua - Tambahkan CSS:
/* Atur gaya kotak input, elemen pilihan, dan area teks */ input[type=text], select, textarea{ width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; resize: vertical; } /* Atur gaya label untuk menampilkannya di samping kotak input */ label { padding: 12px 12px 12px 0; display: inline-block; } /* Atur gaya tombol submit */ input[type=submit] { background-color: #04AA6D; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } /* Atur gaya kontainer */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } /* Kolom floating label: lebar 25% */ .col-25 { float: left; width: 25%; margin-top: 6px; } /* Kolom floating input: lebar 75% */ .col-75 { float: left; width: 75%; margin-top: 6px; } /* Membersihkan gelombang setelah kolom */ .row:after { content: ""; display: table; clear: both; } /* Bentuk responsif - ketika lebar layar kurang dari 600px, dua kolom diatur menumpuk, bukannya diatur paralel */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }
Halaman yang relevan
Panduan:Form HTML
Panduan:Form CSS
- Halaman sebelumnya Form yang dipadatkan
- Halaman berikutnya Form pop-up