quickgrid/Html5-form.markdown

## Html5-form.markdown

      
    Raw
  

              Html5-form.markdown
            
          
    Html5 form

A simple sign up form design doesn't include any validation code.
A Pen by Asif Ahmed on CodePen.
License.

  
## index.html
 <body>
        <div class="wrap">

            <div class="success">
                <h2>thank you for signing up</h2>
                <p>we sent you email so you can verify your account</p>
                <p><a href="#" class="close">continue</a></p>
            </div>

            <h1>sign up form</h1>
            <p>sign up for our service</p>

            <form id="myForm" action="javascript:void;">
                <label>first name</label>
                <input type="text" name="firstname" placeholder="john" id="first"/>
                <div class="error" id="first_error">
                    you forgot your first name
                </div>
                <br/>

                <label>last name</label>
                <input type="text" name="lastname" placeholder="smith" id="last"/>
                <div class="error" id="last_error">
                    you forgot your last name
                </div>
                <br/>

                <label>email address</label>
                <input type="email" name="username" placeholder="example@example.com" id="un"/>
                <div class="error" id="un_error">
                    you forgot your email address
                </div>
                <br/>

                <label>password</label>
                <input type="password" name="password" id="pass"/>
                <div class="error" id="pass_error">
                    please input password
                </div>
                <br/>

                <input type="submit" value="sign up" id="submit"/>
            </form>

            <div id="warning">
                looks like you missed something
            </div>

            <div class="terms">
                by signing up you agree to our <a href="#">terms and conditions</a>
            </div>

        </div>

    </body>

## script.js
$(function() {
	$("#myForm").submit(function() {

		//assuming no errors on the form
		var errors = false;

		//hide all error messages
		$(".error").hide();

		//check to make sure fields are not blank
		if ($("#first").val() === "") {
			$("#first_error").show("slow");
			errors = true;
		}

		if ($("#last").val() === "") {
			$("#last_error").show("slow");
			errors = true;
		}

		if ($("#un").val() === "") {
			$("#un_error").show("slow");
			errors = true;
		}

		if ($("#pass").val() === "") {
			$("#pass_error").show("slow");
			errors = true;
		}

		//if errors then show general error message
		if (errors) {
			$("#warning")
					.show("slow")
                    .delay(6000)
					.hide("slow");
			return false;
		}

		//if no errors present then show success message
		else {
			$(".success").fadeIn();
			return true;
		}
	});

	//make the close button work
	$(".close").click(function() {
		$(".success").fadeOut();
        $(".wrap").fadeOut(2000);
	});

});

## style.css
/*
 *Author:Asif Ahmed;
 *
 *Description: html5 form;
 *
 */


p,h1{
    text-align: center;
}

.terms:first-letter,
.wrap>h1,
.wrap>p{
    text-transform: capitalize;
    font-family:Helvatica, serif;
}

.wrap>h1{
    width: 4em;
    background: skyblue;
    /*outline:0.25em solid skyblue;*/
    margin:-1em 1em;
    text-shadow:0px 1px 0.5px #fff;
    padding: 0.1em;
}

.wrap>p{
    width:11em;
    border: 0.5em solid thistle;
    border-top: 1.75em solid thistle;
    padding: 1em;
    margin: -2em 16em;
}

/*
 *webkit linear gradient hack
 */
html{
    min-height: 100%;
    position:relative;
}

body{
    color: #555;
    font-family: Georgia, sans-serif;
    background: -webkit-linear-gradient(rgb(160, 120, 200) 0%, rgb(220, 180, 200) 100%);
    background:         linear-gradient(rgb(160, 120, 200) 0%, rgb(220, 180, 200) 100%);
}

/*
 *contains all elements
 */
.wrap{
    width: 32em;
    margin: -1em auto;
    padding: 2em;
    background: #fff;
    border: 0.5em solid skyblue;
    border-top: 2em solid skyblue;
    /*
    -webkit-box-shadow: -0.2em 0.3em 1.5em 0em #000;
    box-shadow: -0.2em 0.3em 1.5em 0em #000;
    */

}

.terms{
    font-size:0.75em;
    padding:2em 1em;
    margin-bottom: -3em;
    margin-top:1em;
    text-align: center;
}
/*
 *
 */
form{
    background-color: white;
    border: 0.5em solid thistle;
    border-top: none;
    margin-top: 4em;
    border-top: 1.5em solid thistle;
}

/*
 *all label styling
 */
label{
    font-family:Georgia, serif;
    font-weight: bold;
    text-transform: capitalize;
    background: #fff;
    padding:0.45em;
    color:#000;
    text-shadow:0px 1px 1px #dcaafc;
    margin-left: 6em;
    line-height:3em;
    border-bottom:0.3em solid skyblue;
    border-left:1em solid skyblue;
}

/*
 *input box styling
 */
input[type="password"],
input[type="text"],
input[type="email"]{
    padding:0.49em 1em;
    border:none;
    border-bottom:0.3em solid hsla(230, 30%, 50%, 0.9);
    border-right:1.2em solid hsla(230, 30%, 50%, 0.9);
    text-align:center;
    /*-webkit-box-shadow:0em 0em 0.4em 0.05em #aa9010;*/
    margin-left:-0.3em;
}

/*
 *input boxes width fix
 */
input[type="password"]{
    width:14.3em;
}
input[type="text"]{
    width:13.5em;
}
input[type="text"]:first-of-type{
    width:13.2em;
}

/*
 *on input box focus
 */
input[type="password"]:focus,
input[type="text"]:focus,
input[type="email"]:focus{
    outline:none;
    border-color:#dea420;
}

/*
 *submit button styling
 */
input[type="submit"]{
    padding: 1.5em 2.5em;
    font-weight:bold;
    font-family:Georgia;
    word-spacing: 0.2em;
    margin-top:3em;
    margin-left:14em;
    border:none;
    background: skyblue;
    cursor:pointer;
    margin-bottom:2em;
    border-bottom: 0.5em solid hsla(230, 30%, 50%, 0.9);
    /*-webkit-box-shadow: 0em 1.5em 0em 1.1em thistle;*/
}

input[type="submit"]:hover{
    background: #dea420;
    /*border-bottom-color: #dea420;*/
    /* margin-top: 1em; */
}

/*
 *shows error message below every label
 */
.error{
    display: none;
    color: #ff5c5c;
    font-style: italic;
    background: #ffe6e6;
    font-size: 0.8em;
    /*error on the right side #e4a906
        float: right;
        text-align:right;
    */
    padding:0.5em 1em;
    border-left:0.8em solid red;
    text-shadow: 0px 1px 1px white;
    margin: 0.8em;
}

/*
 *shows a warning message for failed sign up attempts just above the terms and conditions
 */
#warning{
    text-align: center;
    display: block;
    font-weight: bolder;
    margin: 0.8em;
    color: #fa1f0f;
    padding:0.5em 1em;
    border-left:2em solid red;
    border-right:2em solid red;
    text-shadow: 0px 1px 1px white;
    background: #ffe6e6;
    font-size: 0.8em;
    display: none;
    clear: both;
}

/*
 *appears only after sign up
 */
.success{
    background:rgba(111,250,245,0.95);
    padding:3em 4em;
    margin: 0;
    position: absolute;
    z-index: 1000;
    text-align: center;
    display:none;
    width:30%;
    height: 35%;
    top:14%;
    left:30.3%;
    border-left:0.5em solid tomato;
    /*
    -webkit-box-shadow: 0em 0em 1.1em 0.2em #004;
    box-shadow: 0em 0em 1.8em 0.2em #004;
    */
}

.success>p,
.success>h2:first-letter{
    text-transform: capitalize;
}

/*
 *class for continue button which appear inside the .success class after sign up
 */
.close{
    text-decoration: none;
    /*
    background: -webkit-linear-gradient(#8ff3f1 0%,#888  100%);
    background:         linear-gradient(#8ff3f1 0%,#888  100%);
    */
    padding: 1em;
    display: block;
    color: rgba(0,0,0,0.9);
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 3em;
    /*
    -webkit-box-shadow: 0em 0em 0.5em 0.2em rgba(84,218,260,1);
    box-shadow: 0em 0em 0.5em 0.2em rgba(84,218,260,1);
    */
    text-shadow: 0px 1px 1px #dedede;
    border-left: 0.5em solid tomato;
    background:skyblue;
}
	<body>
	<div class="wrap">

	<div class="success">
	<h2>thank you for signing up</h2>
	<p>we sent you email so you can verify your account</p>
	<p><a href="#" class="close">continue</a></p>
	</div>

	<h1>sign up form</h1>
	<p>sign up for our service</p>

	<form id="myForm" action="javascript:void;">
	<label>first name</label>
	<input type="text" name="firstname" placeholder="john" id="first"/>
	<div class="error" id="first_error">
	you forgot your first name
	</div>
	<br/>

	<label>last name</label>
	<input type="text" name="lastname" placeholder="smith" id="last"/>
	<div class="error" id="last_error">
	you forgot your last name
	</div>
	<br/>

	<label>email address</label>
	<input type="email" name="username" placeholder="example@example.com" id="un"/>
	<div class="error" id="un_error">
	you forgot your email address
	</div>
	<br/>

	<label>password</label>
	<input type="password" name="password" id="pass"/>
	<div class="error" id="pass_error">
	please input password
	</div>
	<br/>

	<input type="submit" value="sign up" id="submit"/>
	</form>

	<div id="warning">
	looks like you missed something
	</div>

	<div class="terms">
	by signing up you agree to our <a href="#">terms and conditions</a>
	</div>

	</div>

	</body>
	$(function() {
	$("#myForm").submit(function() {

	//assuming no errors on the form
	var errors = false;

	//hide all error messages
	$(".error").hide();

	//check to make sure fields are not blank
	if ($("#first").val() === "") {
	$("#first_error").show("slow");
	errors = true;
	}

	if ($("#last").val() === "") {
	$("#last_error").show("slow");
	errors = true;
	}

	if ($("#un").val() === "") {
	$("#un_error").show("slow");
	errors = true;
	}

	if ($("#pass").val() === "") {
	$("#pass_error").show("slow");
	errors = true;
	}

	//if errors then show general error message
	if (errors) {
	$("#warning")
	.show("slow")
	.delay(6000)
	.hide("slow");
	return false;
	}

	//if no errors present then show success message
	else {
	$(".success").fadeIn();
	return true;
	}
	});

	//make the close button work
	$(".close").click(function() {
	$(".success").fadeOut();
	$(".wrap").fadeOut(2000);
	});

	});
	/*
	*Author:Asif Ahmed;
	*
	*Description: html5 form;
	*
	*/


	p,h1{
	text-align: center;
	}

	.terms:first-letter,
	.wrap>h1,
	.wrap>p{
	text-transform: capitalize;
	font-family:Helvatica, serif;
	}

	.wrap>h1{
	width: 4em;
	background: skyblue;
	/outline:0.25em solid skyblue;/
	margin:-1em 1em;
	text-shadow:0px 1px 0.5px #fff;
	padding: 0.1em;
	}

	.wrap>p{
	width:11em;
	border: 0.5em solid thistle;
	border-top: 1.75em solid thistle;
	padding: 1em;
	margin: -2em 16em;
	}

	/*
	*webkit linear gradient hack
	*/
	html{
	min-height: 100%;
	position:relative;
	}

	body{
	color: #555;
	font-family: Georgia, sans-serif;
	background: -webkit-linear-gradient(rgb(160, 120, 200) 0%, rgb(220, 180, 200) 100%);
	background: linear-gradient(rgb(160, 120, 200) 0%, rgb(220, 180, 200) 100%);
	}

	/*
	*contains all elements
	*/
	.wrap{
	width: 32em;
	margin: -1em auto;
	padding: 2em;
	background: #fff;
	border: 0.5em solid skyblue;
	border-top: 2em solid skyblue;
	/*
	-webkit-box-shadow: -0.2em 0.3em 1.5em 0em #000;
	box-shadow: -0.2em 0.3em 1.5em 0em #000;
	*/

	}

	.terms{
	font-size:0.75em;
	padding:2em 1em;
	margin-bottom: -3em;
	margin-top:1em;
	text-align: center;
	}
	/*
	*
	*/
	form{
	background-color: white;
	border: 0.5em solid thistle;
	border-top: none;
	margin-top: 4em;
	border-top: 1.5em solid thistle;
	}

	/*
	*all label styling
	*/
	label{
	font-family:Georgia, serif;
	font-weight: bold;
	text-transform: capitalize;
	background: #fff;
	padding:0.45em;
	color:#000;
	text-shadow:0px 1px 1px #dcaafc;
	margin-left: 6em;
	line-height:3em;
	border-bottom:0.3em solid skyblue;
	border-left:1em solid skyblue;
	}

	/*
	*input box styling
	*/
	input[type="password"],
	input[type="text"],
	input[type="email"]{
	padding:0.49em 1em;
	border:none;
	border-bottom:0.3em solid hsla(230, 30%, 50%, 0.9);
	border-right:1.2em solid hsla(230, 30%, 50%, 0.9);
	text-align:center;
	/-webkit-box-shadow:0em 0em 0.4em 0.05em #aa9010;/
	margin-left:-0.3em;
	}

	/*
	*input boxes width fix
	*/
	input[type="password"]{
	width:14.3em;
	}
	input[type="text"]{
	width:13.5em;
	}
	input[type="text"]:first-of-type{
	width:13.2em;
	}

	/*
	*on input box focus
	*/
	input[type="password"]:focus,
	input[type="text"]:focus,
	input[type="email"]:focus{
	outline:none;
	border-color:#dea420;
	}

	/*
	*submit button styling
	*/
	input[type="submit"]{
	padding: 1.5em 2.5em;
	font-weight:bold;
	font-family:Georgia;
	word-spacing: 0.2em;
	margin-top:3em;
	margin-left:14em;
	border:none;
	background: skyblue;
	cursor:pointer;
	margin-bottom:2em;
	border-bottom: 0.5em solid hsla(230, 30%, 50%, 0.9);
	/-webkit-box-shadow: 0em 1.5em 0em 1.1em thistle;/
	}

	input[type="submit"]:hover{
	background: #dea420;
	/border-bottom-color: #dea420;/
	/* margin-top: 1em; */
	}

	/*
	*shows error message below every label
	*/
	.error{
	display: none;
	color: #ff5c5c;
	font-style: italic;
	background: #ffe6e6;
	font-size: 0.8em;
	/*error on the right side #e4a906
	float: right;
	text-align:right;
	*/
	padding:0.5em 1em;
	border-left:0.8em solid red;
	text-shadow: 0px 1px 1px white;
	margin: 0.8em;
	}

	/*
	*shows a warning message for failed sign up attempts just above the terms and conditions
	*/
	#warning{
	text-align: center;
	display: block;
	font-weight: bolder;
	margin: 0.8em;
	color: #fa1f0f;
	padding:0.5em 1em;
	border-left:2em solid red;
	border-right:2em solid red;
	text-shadow: 0px 1px 1px white;
	background: #ffe6e6;
	font-size: 0.8em;
	display: none;
	clear: both;
	}

	/*
	*appears only after sign up
	*/
	.success{
	background:rgba(111,250,245,0.95);
	padding:3em 4em;
	margin: 0;
	position: absolute;
	z-index: 1000;
	text-align: center;
	display:none;
	width:30%;
	height: 35%;
	top:14%;
	left:30.3%;
	border-left:0.5em solid tomato;
	/*
	-webkit-box-shadow: 0em 0em 1.1em 0.2em #004;
	box-shadow: 0em 0em 1.8em 0.2em #004;
	*/
	}

	.success>p,
	.success>h2:first-letter{
	text-transform: capitalize;
	}

	/*
	*class for continue button which appear inside the .success class after sign up
	*/
	.close{
	text-decoration: none;
	/*
	background: -webkit-linear-gradient(#8ff3f1 0%,#888 100%);
	background: linear-gradient(#8ff3f1 0%,#888 100%);
	*/
	padding: 1em;
	display: block;
	color: rgba(0,0,0,0.9);
	font-weight: bold;
	font-size: 1.1em;
	margin-top: 3em;
	/*
	-webkit-box-shadow: 0em 0em 0.5em 0.2em rgba(84,218,260,1);
	box-shadow: 0em 0em 0.5em 0.2em rgba(84,218,260,1);
	*/
	text-shadow: 0px 1px 1px #dedede;
	border-left: 0.5em solid tomato;
	background:skyblue;
	}