Registration Form with Tool Tip & Date Picker

CSS Styling to Text Boxes & Form Date Picker & Tool Tip

by nijinvinodan

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class='register-form'>
    <form action="">
        <label>First Name</label>
        <input type='text' name='firstName' title='Enter your First Name'/>
        <label>Last Name</label>
        <input type='text' name='lastName' title='Enter your Last Name'/>
        <label>Email</label>
        <input type='text' name='email' title='Enter your Email Id' />
        <label>Password</label>
        <input type='password' name='password' title='Enter your Password'/>
        <label>Date of Birth</label>
        <input type='text' name='dob' id="datepicker" title='Enter your Date of Birth'/>
        <label>Contact Number</label>
        <input type='text' name='contact' title='Enter your Contact Number'/>
        <input type='submit' value='Register' />
    </form>
</div>

CSS

body {
    font-family:arial;
}
.register-form {
    width:300px;
    height:auto;
    margin:auto;
}
.register-form label {
    font-size:12px;
}
.register-form input {
    width:100%;
    height:28px;
    font-size:14px;
    margin-bottom:10px;
    padding-left:5px;
}
.register-form input[type='submit'] {
    width:100px;
    float:right;
    height:28px;
    margin-bottom:10px;
    font-size:14px;
    border-radius:5px;
    background: orange;
}
input:focus {
    border:1px solid blue;
}
/* modified tool tip styling */
.ui-tooltip {
	padding:5px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
    font-size:12px;

}

JavaScript

$(function() {
     $(document).tooltip();
     $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true
    });
  });