HTML Fieldset Tag

Divide your forms into sections with HTML fieldset tag to make it clear to understand for the user.

HTML markup

<form>
    <fieldset>
	    <legend>User details:</legend>
    	<p>Name:</p>
    	<input type="text" />
	    <p>E-mail:</p>
	    <input type="text" />
	    <p>Telephone:</p>
	    <input type="text" />
    </fieldset>

    <fieldset>
	    <legend>Address:</legend>
    	<p>ZIP code:</p>
    	<input type="text" />
	    <p>City:</p>
	    <input type="text" />
	    <p>Street and house number:</p>
	    <input type="text" />
    </fieldset>

    <fieldset>
	    <legend>Message:</legend>
        <textarea></textarea>
    </fieldset>
</form>

CSS

<style type="text/css">
fieldset{
	border:1px solid #AAA;
	margin:20px;
}
fieldset p{
	margin:0;
	padding:0;
}
legend{
	font-weight:bold;
}
input{
	width:100%;
	height:22px;
	background:#FFF;
	border:1px solid #CCC;
	padding-left:5px;
	margin: 5px 0px 5px 0px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;	
}
textarea{
	width:100%;
	height:200px;
	background:#FFF;
	border:1px solid #CCC;
	padding:5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;	
}
</style>

 

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


1 comment

Gary Zielke2015-05-02 23:53

This is a great form. Is it possible to style individual elements in the message body? For example can some of the test in a line be made bold like the tag in HTML?
Thanks

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the airplane *


Back to Top