Registration Form
Build of a Registration Form in HTML & CSS
<!DOCTYPE html>
<html>
<head>
<title>Registration Form with HTML5 and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="demo.css" media="all" />
</head>
<body>
<div class="container">
<header>
<h1><span>Tutorials</span> Registration Form with HTML5 and CSS3</h1>
</header>
<div class="form">
<form id="contactform">
<p class="contact"><label for="name">Name</label></p>
<input id="name" name="name" placeholder="First and last name" required="" tabindex="1" type="text">
<p class="contact"><label for="email">Email</label></p>
<input id="email" name="email" placeholder="example@domain.com" required="" type="email">
<p class="contact"><label for="username">Create a username</label></p>
<input id="username" name="username" placeholder="username" required="" tabindex="2" type="text">
<p class="contact"><label for="password">Create a password</label></p>
<input type="password" id="password" name="password" required="">
<p class="contact"><label for="repassword">Confirm your password</label></p>
<input type="password" id="repassword" name="repassword" required="">
<fieldset>
<label>Birthday</label>
<label class="month">
<select class="select-style" name="BirthMonth">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12" >December</option>
</label>
</select>
<label>Day<input class="birthday" maxlength="2" name="BirthDay" placeholder="Day" required=""></label>
<label>Year <input class="birthyear" maxlength="4" name="BirthYear" placeholder="Year" required=""></label>
</fieldset>
<select class="select-style gender" name="gender">
<option value="select">i am..</option>
<option value="m">Male</option>
<option value="f">Female</option>
<option value="others">Other</option>
</select><br><br>
<p class="contact"><label for="phone">Mobile phone</label></p>
<input id="phone" name="phone" placeholder="phone number" required="" type="text"> <br>
<input class="buttom" name="submit" id="submit" tabindex="5" value="Sign me up!" type="submit">
</form>
</div>
</div>
</body>
</html>
.form{
background:#f1f1f1; width:470px; margin:0 auto; padding-left:50px; padding-top:20px;
}
.form fieldset{border:0px; padding:0px; margin:0px;}
.form p.contact { 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; }
.form input[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/),
-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 {
width:410px;
}
.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; }
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height: 100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
img {
border:0;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
header{
display: block;
}
/* General Demo Style */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background:url(images/);
font-weight: 400;
font-size: 15px;
color: #3a2127;
overflow-y: scroll;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
height: 100%;
position: relative;
}
.clr{
clear: both;
}
.container > header{
padding: 20px 30px 20px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1{
position: relative;
color: #498ea5;
font-weight: 700;
font-style: normal;
font-size: 30px;
padding: 0px 0px 5px 0px;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h1 span{
font-family: 'Alegreya SC', Georgia, serif;
font-size: 20px;
line-height: 20px;
display: block;
font-weight: 400;
font-style: italic;
color: #719dab;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.container > header h2{
font-size: 16px;
font-style: italic;
color: #2d6277;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}