input
Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 52 dari 76.
Tantangan
MudahDalam pelajaran ini, kita akan memperbaiki tampilan field input agar mudah digunakan.
Atur style field <input>. Ikuti langkah-langkah berikut:
- Buat lebarnya 100% agar pas dengan form.
- Tambahkan padding agar teks di dalamnya tidak menyentuh tepi.
- Terapkan border dengan warna lembut.
- Buat sudutnya membulat.
- Tambahkan margin di antara field input agar jaraknya tidak terlalu rapat.
- Gunakan box-sizing: border-box; agar lebar mencakup padding dan border.
Coba sendiri
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Semua pelajaran di Menata dengan CSS
5Warna dan Latar Belakang
Warna Latar BelakangWarna HEXWarna RGBTransparansi dengan RGBATantangan Rangkuman #13Selektor Dasar
Pengantar SelektorSelektor TipeSelektor classSelektor IDSelektor GrupSelektor UniversalTantangan Seleksi9Flexbox
Apa itu Flexbox?Arah FlexJustify ContentAlign ItemsTitik Tengah yang SempurnaTantangan Flexbox12Dasar-Dasar Desain Responsif
Apa Itu Desain Responsif?Tag Meta ViewportTata Letak FluidaUnit ViewportDasar-Dasar Media QueriesGambar FleksibelLatihan sendiri: Playground Web