Halo teman-teman berjumpa lagi dengan saya, pada artikel kemarin kita belajar tentang membuat Membuat Menu Dengan HTML,CSS dan Jquery. Dan di artikel kali ini kita akan membuat Form Menarik dan Responsive Dengan HTML,CSS berikut adalah demo yang akan nanti kita buat
Bagaimana,,?? cukup menarik bukan, Oke mari kita langsung membuatnya. Teman-teman ikuti langkah-langkahnya ya, pertama-tama jangan lupa siapkan text editornya dan copy kan script html nya di bawah ini
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Form Style 10</title>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="form-style-10">
<h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>
<form>
<div class="section"><span>1</span>First Name & Address</div>
<div class="inner-wrap">
<label>Your Full Name <input type="text" name="field1" /></label>
<label>Address <textarea name="field2"></textarea></label>
</div>
<div class="section"><span>2</span>Email & Phone</div>
<div class="inner-wrap">
<label>Email Address <input type="email" name="field3" /></label>
<label>Phone Number <input type="text" name="field4" /></label>
</div>
<div class="section"><span>3</span>Passwords</div>
<div class="inner-wrap">
<label>Password <input type="password" name="field5" /></label>
<label>Confirm Password <input type="password" name="field6" /></label>
</div>
<div class="button-section">
<input type="submit" name="Sign Up" value="Login"/>
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy.
</span>
</div>
</form>
</div>
</body>
</html>
Dan pastekan pada text editornya, kemudian save dengan nama index.html. Jika sudah buka pada browsernya, maka akan menghasilkan output seperti gambar di bawah ini
Langkah berikutnya kita berikan css nya untuk mengatur struktur HTML yang sudah kita buat, teman-teman copy kan script css di bawah ini di dalam tag <head>
<style type="text/css">
body{
background:#AEE4FF;
}
.form-style-10{
max-width:450px;
padding:30px;
margin:40px auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap{
padding: 30px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
}
.form-style-10 h1{
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-10 h1 > span{
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label{
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
.form-style-10 .section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.form-style-10 .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
.form-style-10 input[type="button"],
.form-style-10 input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
.form-style-10 input[type="button"]:hover,
.form-style-10 input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy{
float: right;
width: 250px;
font: 12px Arial, Helvetica, sans-serif;
color: #4D4D4D;
margin-top: 10px;
text-align: right;
}
</style>
Jika sudah, di save dan refresh pada browsernya. Maka hasilnya seperti gambar di bawah ini
Nah teman-teman coba kecilkan layar monitornya, disini saya menggunakan ukuran 272 x 589
Form akan mengikuti layar jika di perkecil atau di perbesar (responsive) karena adanya fungsi max-width
Jika saya ganti max-width menjadi width maka form akan terpotong tampilan ukurannya 187×579
Nah cukup mudah bukan, berikut adalah contoh untuk pembuatan form yang menarik dan responsive dengan menggunakan html dan css. Teman-teman juga bisa memodifikasinya sendiri dari contoh diatas yang kita buat tadi supaya kalian lebih banyak refrensi untuk membuat layout website lebih menarik. Oke mungkin sekian dulu di artikel kali ini tentang Form Menarik dan Responsive Dengan HTML,CSS kita berjumpa lagi di artikel berikutnya. Terima Kasih dan Sampai jumpa.
Semoga bermanfaat 🙂
Baca juga artikel tentang Cara Membuat Quotes dengan HTML dan CSS