Cara - Formulir Bertumpuk
Pelajari cara membuat formulir bertumpuk dengan CSS.
Formulir Bertumpuk
Formulir yang ditumpuk secara vertikal (di mana input dan label ditempatkan di atas satu sama lain, bukan di samping satu sama lain):
Cara Membuat Formulir Bertumpuk
Langkah 1) Tambahkan HTML
Gunakan elemen <form> untuk memproses input. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami.
Tambahkan input (dengan label yang cocok) untuk setiap bidang:
Contoh
<form action="/action_page.php">
<label for="fname">First
Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country"
name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
Langkah 2) Tambahkan CSS:
Contoh
/* Style inputs */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing:
border-box;
}
/* Style the submit
button */
input[type=submit] {
width: 100%;
background-color: #04AA6D;
color: white;
padding: 14px
20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Add a background color to the submit button on
mouse-over */
input[type=submit]:hover {
background-color: #45a049;
}
Tip: Buka Tutorial Formulir HTML kami untuk mempelajari lebih lanjut tentang Formulir HTML.
Tip: Buka Tutorial Formulir CSS kami untuk mempelajari lebih lanjut tentang cara menata elemen formulir.