Cara Membuat Form Input Atraktif Dengan CSS
Halo teman – teman kembali lagi dengan saya Hernowo di tips dan trik Source Code Aplikasi, di kesempatan yang bagus ini lagi – lagi saya akan memberikan tips dan trik nya bagi kalian segala yang dikala ini sedang mendalami ilmu html dan css yaitu mengenai Cara Membuat Form Input Atraktif Dengan CSS dimana sebuah form mempunyai 2 placeholder yang hanya akan di bikin dengan html dan css. Di bawah ini yakni screenshoot nya yang nanti kita akan bikin latihan
Ketika di klik diantara form karenanya placeholder pertama-tama akan di minimize dan akan tampil placeholder ke dua
Segala akan di atur oleh css, kini kita akan implementasikan mengenai Cara Membuat Form Input Atraktif Dengan CSS dan membuatnya persis seperti gambar di atas ini, langkah pertama-tama teman – teman siapkan text editornya dan teman – teman unduh terlebih dahulu kumpulan css yang saya sediakan, Dapat klik di link ini, lalu siapkan folder bagi project nya bagi menaruh segala file termasuk kumpulan css yang teman – teman unduh. Kemudian copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Cara Merancang Form Input Atraktif Dengan CSS</title>
</head>
<body>
<fieldset>
<legend>Sign up</legend>
<div class=input-group>
<div class=has-float-label>
<input id=first type=text placeholder=Name/>
<label for=first>First</label>
</div>
<div class=has-float-label>
<input id=last type=text placeholder=Surname/>
<label for=last>Last</label>
</div>
</div>
<label class=has-float-label>
<input type=email placeholder=email@example.com/>
<span>Email</span>
</label>
<label class=has-float-label>
<input type=password placeholder=•••••••/>
<span>Password</span>
</label>
<div class=input-group>
<label class=has-float-label>
<select>
<option>United States</option>
<option>Canada</option>
</select>
<span>Country</span>
</label>
<div class=has-float-label>
<select id=state>
<option>New York</option>
<option>Texas</option>
</select>
<label for=state>State</label>
</div>
</div>
<label class=has-float-label>
<textarea placeholder=No newsletter please!></textarea>
<span>Notes</span>
</label>
<input type=submit placeholder=••••••• value=Sign up />
</fieldset>
</body>
</html>
Lalu save dengan nama index.html, berikutnya kita panggil css yang tadi teman – teman unduh
Bila telah, save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini
Karenanya hasilnya belum menyerupai seperti contoh, langkah terakhir kita tambahkan css nya bagi membangun tampilannya sama seperti contoh. Dan kita berikan css secara internal saja, atau kita letakkan di pada tag <head> yang di apit tag <style>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
max-width: 20rem;
background: #eee;
margin: 2rem auto;
}
fieldset {
padding: 1.5rem;
background: white;
}
input, select {
width: 100%;
margin-bottom: .5rem;
}
input[type=submit]{
background: #333;
color: white;
border: 0;
padding: .5em 1em;
margin-top: 1rem;
}
.input-group {
display: table;
width: 100%;
}
.input-group > * {
display: table-cell;
width: 50%;
}
</style>
Bila telah save dan refresh di browsernya, karenanya hasilnya telah seperti contoh di atas
Dan mempunyai dua placeholder, yang membuatnya lebih atraktif.
Bagus, lumayan demikian artikel kali ini mengenai Cara Membuat Form Input Atraktif Dengan CSS kita berjumpa kembali di artikel yang akan datang.
Semoga bermanfaat, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
