In this tutorial styling on a form will be discussed.
Styling will be applied on the all field of a simple
form. For example
1) input[type=text]
2) input[type=password]
3) input[type=number]
Some styling properties like padding , margin , max-width ,
background-color , border and outline will be applied on a
form to make more attractive and very easy to use.
Example of form with styling
<styletype="text/css">.hp33-r2-in{background-color:white;padding:20px 20px 20px 30px;margin:25px 10px 25px 10px;font-size:18px;box-shadow:none;border:1px solid grey;outline:3px solid lightgreen;color:black;}.hp33-r2-ininput{margin:10px;border-radius:5px;border-color:lightgreen;}.hp33-r2-inlabel{margin:10px;border-radius:5px;border-color:lightgreen;font-size:20px;font-weight:300px;}.hp33-r2-ininput:hover{background-color:lightgrey;border-color:green;}.s-form{cursor:pointer;}.s-form:hover{background-color:lightgreen;}</style>
<!DOCTYPE html><html><head><title>Get in tuch Signup</title><metacharset="utf-8"></head><body><h1>Get in tuch Signup</h1><formclass="hp33-r2-in"action="#"method="post"><legend>Join our email list</legend><p>Get news about webtags.com.pk</p><ol><li><labelfor="firstlast">Name:</label><inputtype="text"name="username"></li><li><labelfor="">Email:</label><inputtype="text"name=""></li></ol><inputclass="s-form"type="submit"value="Submit"></form></body></html>
Output of above code
Get in tuch Signup
Get news about webtags.com.pk
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
