Beautiful Registration Form with HTML5 and CSS3

Beautiful Registration Form with HTML5 and CSS3

Today I will show you a beautiful registration form using HTML5 and CSS3 properties, this sample design you may using in purpose visitor registration online. HTML5 have new feature  elements properties, we can defines new input types that you can use in your forms validation in stead of using java script. But those  HTML5 and CSS3 properties support only new modern browser, i recommend (google chrome) is great browser support with HTML5 and CSS3.

You may also like this post: Free HTML5 Templates
html registration formDemo download

In my previous tutorials, i also show you  HTML5 and CSS3 Contact Form, and  with this sample registration form template, you will know more about HTML5 form property.

Please note that this will only work properly in modern browsers that support the HTML5 and CSS3 properties in use.

 The Markup

The HTML registration form will have the following structure:


The Cascading Style Sheets (CSS) will have the following structure:

	background:#f1f1f1; width:470px; margin:0 auto; padding-left:50px; padding-top:20px;
.form fieldset{border:0px; padding:0px; margin:0px;}
.form { font-size: 12px; margin:0px 0px 10px 0;line-height: 14px; font-family:Arial, Helvetica;}

.form input[type="text"] { width: 400px; }
.form input[type="email"] { width: 400px; }
.forminput[type="password"] { width: 400px; }
.form input.birthday{width:60px;}
.form input.birthyear{width:120px;}
.form label { color: #000; font-weight:bold;font-size: 12px;font-family:Arial, Helvetica; }
.form label.month {width: 135px;}
.form input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(122, 192, 0, 0.15); padding: 7px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 14px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; }
.form input:focus, textarea:focus { border: 1px solid #ff5400; background-color: rgba(255, 255, 255, 1); }
.form .select-style {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 0px solid #FFF;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;}
.form .gender {
.form input.buttom{ background: #4b8df9; display: inline-block; padding: 5px 10px 6px; color: #fbf7f7; text-decoration: none; font-weight: bold; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; box-shadow: 0 1px 3px #999; text-shadow: 0 -1px 1px #222; border: none; position: relative; cursor: pointer; font-size: 14px; font-family:Verdana, Geneva, sans-serif;}
.form input.buttom:hover	{ background-color: #2a78f6; }

Now! We have a beautiful registration form with HTML5 and CSS3. Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!

Click to rate this post!
[Total: 0 Average: 0]
Notify of
0 Góp ý
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x