Membuat Form Isian Responsive dengan HTML dan CSS
Pada kesempatan kali ini saya akan membagikan tips dan trik untuk membuat design formulir digital menggunakan HTML dan CSS, formulir atau yg disebut juga form biasanya digunakan untuk mengirimkan pesan dari pembacanya untuk berinteraksi dengan pemilik website tersebut. disini saya hanya akan membuat design nya saja nanti untuk kelanjutannya silahkan anda kembangkan lagi.
Oke langsung saja buka notepad anda kemudian ketikkan seperti berikut, dan simpan dengan nama form.html :
Untuk file css nya :
<html>
<head>
<title> Form </title>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<form>
<div id="box">
<h2>REGISTRASI DI FORM BAWAH INI</h2>
<label>
<span>Full Name</span>
<input type="text" placeholder="Full Name" class="input_text" name="name" id="name"/>
</label>
<label>
<span>Email</span>
<input type="text" placeholder="Email" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Address</span>
<input type="text" placeholder="Address" class="input_text" name="email" id="email"/>
</label>
<label>
<span>No. Telp</span>
<input type="text" placeholder="No Telp" class="input_text" name="email" id="email"/>
</label>
<label>
<span>Subject</span>
<input type="text" placeholder="Subject" class="input_text" name="subject" id="subject"/>
</label>
<label> <span> Message</span>
<textarea class="message" placeholder="Message" name="feedback" id="feedback"></textarea>
<a href="#"><input type="button" class="button" value="submit"/></a>
</label>
</div>
</form>
</body>
</html>
body{Untuk hasilnya kurang lebih seperti ini :
font-family:open sans;
background-color:#dfdfdf;
}
#box{
margin:0 auto;
width:35%;
background:cadetblue;
}
#box label{
width:100%;
display:block;
background:transparan;
padding:10px 0px 10px 10px;
}
#box label span{
display:block;
color:white;
float:left;
width:100%;;
text-align:left;
}
#box .input_text{
padding:10px 10px;
width:50%;
background:white;
}
input{
color:grey;
height:30px;
}
#box .message{
padding:7px 7px;
width:90%;
height:20%;
}
#box .button{
width:35%;
color:cadetblue;
text-transform:uppercase;
font-weight:bold;
position:relative;
margin-top:10px;
position:relative;
left:55%;
}
#box .button:hover{
background-color:cadetblue;
color:white;
}
#box h2{
text-align:center;
color:;
background-color:white; }
Selamat mencoba :)
Download File
Jika link rusak segera laporkan ke Admin
0 komentar: