CSS Forms

CSS Forms – Now you can create forms without help of html table, if we create the forms with help of CSS, then we can modify easily and also gives benefit for responsiveness. So from last some years, good designers don’t use html table, they always use CSS for forms and others.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form </title>
<style type="text/css">
.form{
width:500px;
margin:0 auto;
}
input[type=text]
{
width:300px;
height:30px;
border:1px solid #ddd;
border-radius:5px;
margin:7px 0;
}
textarea{
width:300px;
height:100px;
border:1px solid #ddd;
border-radius:5px;
margin:7px 0;
}
::-webkit-input-placeholder {
padding-left:5px;
}
::-moz-input-placeholder {
padding-left:5px;
}
button{
background-color:#009933;
border:none;
color:#FFFFFF;
padding:10px 15px;
border-radius:5px;
cursor:pointer;

}
</style>
</head>

<body>
<form action="" class="form">
<label>Name</label><br>
<input type="text" placeholder="Name"><br>
<label>Mobile no.</label><br>
<input type="text" placeholder="Mobile no."><br>
<label>Email id</label><br>
<input type="text" placeholder="Email id"><br>
<label>Message</label><br>
<textarea placeholder="Message"></textarea><br>
<button>Submit</button>
</form>
</body>
</html>

Please copy above code and paste in your website or webpage, in above code you can easily change any field or modify as your requirement, you can change color, placeholder, field name or add new field name. If you are facing any problem so please share your issue with us, our technical team always support you !!

RESULT:




Leave a Reply

avatar
  Subscribe  
Notify of