Skip to content

Instantly share code, notes, and snippets.

@quickgrid

quickgrid/Html5-form.markdown

Created September 8, 2013 19:22
Show Gist options
  • Save quickgrid/6487618 to your computer and use it in GitHub Desktop.
Save quickgrid/6487618 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Asif Ahmed.
Raw
Html5-form.markdown
Raw
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="[email protected]" 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>
Raw
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);
});
});
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment