Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Added demo files
- Loading branch information
1 parent
31096ab
commit f5a1120
Showing
4 changed files
with
537 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,154 @@ | ||
/* Just some base styles not needed for example to function */ | ||
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; } | ||
|
||
body, form, ul, li, p, h2, h3, h4, h5 | ||
{ | ||
margin: 0; | ||
padding: 0; | ||
} | ||
body { background-color: #606061; color: #ffffff; } | ||
img { border: none; } | ||
p | ||
{ | ||
font-size: 1em; | ||
margin: 0 0 1em 0; | ||
} | ||
h2 { font-size: 14px; margin: 0 0 12px; } | ||
|
||
/* Form styles */ | ||
#signup | ||
{ | ||
margin: 20px auto; | ||
width: 610px; | ||
} | ||
#signup fieldset | ||
{ | ||
margin: 0 0 20px; | ||
padding: 20px; | ||
-webkit-border-radius: 5px; | ||
-moz-border-radius: 5px; | ||
border-radius: 5px; | ||
} | ||
#signup ol | ||
{ | ||
list-style-type: none; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
#signup li | ||
{ | ||
margin: 0 0 12px; | ||
position: relative; | ||
} | ||
#signup label | ||
{ | ||
width: 150px; | ||
display: inline-block; | ||
vertical-align: top; | ||
} | ||
#signup fieldset input, | ||
#signup fieldset textarea, | ||
#signup fieldset select | ||
{ | ||
background: #fff url(ico_validation.png) 379px 24px no-repeat; | ||
display: inline-block; | ||
width: 371px; | ||
border: 1px solid #fff; | ||
padding: 3px 26px 3px 3px; | ||
|
||
-moz-transition: background-color 1s ease; | ||
-webkit-transition: background-color 1s ease; | ||
-o-transition: background-color 1s ease; | ||
transition: background-color 1s ease; | ||
-webkit-border-radius: 5px; | ||
-moz-border-radius: 5px; | ||
border-radius: 5px; | ||
} | ||
#signup fieldset select { width: 401px; padding: 3px; } | ||
#signup fieldset #postcode { padding: 3px; width: 400px; } | ||
|
||
|
||
#signup input::-webkit-input-placeholder, | ||
#signup input:-moz-placeholder { | ||
color: #A6A6A6; | ||
} | ||
|
||
#signup .validation01 | ||
{ | ||
background: red; | ||
color: #fff; | ||
display: none; | ||
font-size: 12px; | ||
padding: 3px; | ||
position: absolute; | ||
right: -160px; | ||
text-align: center; | ||
top: 0; | ||
width: 150px; | ||
|
||
-moz-box-shadow: 0px 0px 4px #ffffff; | ||
-webkit-box-shadow: 0px 0px 4px #ffffff; | ||
box-shadow: 0px 0px 4px #ffffff; | ||
-webkit-border-radius: 5px; | ||
-moz-border-radius: 5px; | ||
border-radius: 5px; | ||
} | ||
#signup input:focus + .validation01 { display: block; } | ||
|
||
#signup input:focus:required:valid + .validation01, | ||
#signup input.valid:focus + .validation01 { background: green; } | ||
|
||
#signup input:focus:required:valid + .validation01 .invalid, | ||
#signup input.valid:focus + .validation01 .invalid { display: none; } | ||
|
||
#signup input:focus:required:valid + .validation01 .valid, | ||
#signup input.valid:focus + .validation01 .valid { display: block; } | ||
|
||
#signup input:focus:required:invalid + .validation01 .valid, | ||
#signup input.error:focus + .validation01 .valid, | ||
#signup input.required:focus + .validation01 .valid, | ||
#signup input:focus + .validation01 .valid { display: none; } | ||
|
||
#signup fieldset input:required:valid | ||
{ | ||
background-color: #fff; | ||
background-position: 379px -61px; | ||
} | ||
|
||
/* Enhanced error styling */ | ||
#errors { | ||
background: red; | ||
display: none; | ||
margin: 0 0 12px; | ||
padding: 10px; | ||
-moz-border-radius: 10px; | ||
-webkit-border-radius: 10px; | ||
border-radius: 10px; | ||
} | ||
#errors li | ||
{ | ||
font-size: 12px; | ||
margin: 0 0 5px 20px; | ||
} | ||
|
||
#signup input.error | ||
{ | ||
background-color: pink; | ||
background-position: 379px 3px; | ||
outline: none; | ||
} | ||
#signup input.required | ||
{ | ||
background-color: #fff; | ||
background-position: 379px -29px; | ||
} | ||
#signup input.valid | ||
{ | ||
background-color: #fff; | ||
background-position: 379px -61px; | ||
} | ||
|
||
#signup input.error::-webkit-input-placeholder, | ||
#signup inputerror :-moz-placeholder { | ||
color: #fff; | ||
} |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | ||
|
||
<html xmlns="http://www.w3.org/1999/xhtml"> | ||
|
||
<head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
|
||
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" /> | ||
|
||
<script type="text/javascript" src="_h5f.js"></script> | ||
|
||
<title>Validate those forms with CSS3 Basic UI module pseudo-classes and HTML5 Form attributes</title> | ||
|
||
</head> | ||
<body> | ||
|
||
<form id="signup"> | ||
<h1>Sign up now!</h1> | ||
|
||
<h2>Fields marked (*) are required</h2> | ||
|
||
<fieldset> | ||
<legend>Your details</legend> | ||
|
||
<ol> | ||
<li> | ||
<label for="fullname">Name *</label> | ||
<input type="text" id="fullname" name="fullname" placeholder="Full name" required aria-required="true" /> | ||
</li> | ||
<li> | ||
<label for="email">Email *</label> | ||
<input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required aria-required="true" /> | ||
<p class="validation01"> | ||
<span class="invalid">Please enter a valid email address e.g. ryan@example.com</span> | ||
<span class="valid">Thank you for entering a valid email</span> | ||
</p> | ||
</li> | ||
<li> | ||
<label for="tel">Phone *</label> | ||
<input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required aria-required="true" /> | ||
<p class="validation01"> | ||
<span class="invalid">No spaces or brackets e.g. 0390001234</span> | ||
<span class="valid">That's what we wanted!</span> | ||
</p> | ||
</li> | ||
</ol> | ||
</fieldset> | ||
|
||
<fieldset> | ||
<legend>Delivery address</legend> | ||
<ol> | ||
<li> | ||
<label for="address">Address *</label> | ||
<input id="address" name="address" type="text" required aria-required="true" /> | ||
</li> | ||
<li> | ||
<label for="suburb">Suburb *</label> | ||
<input id="suburb" name="suburb" type="text" required aria-required="true" /> | ||
</li> | ||
<li> | ||
<label for="postcode">Post code *</label> | ||
<input id="postcode" name="postcode" type="number" min="1001" max="8000" required maxlength="4" /> | ||
<p class="validation01"> | ||
<span class="invalid">Your postcode is out of range between 1001 - 8000</span> | ||
<span class="valid">Thank you your postcode is in the correct range</span> | ||
</p> | ||
</li> | ||
<li> | ||
<label for="state">State</label> | ||
<select name="state" id="state"> | ||
<option>ACT</option> | ||
<option>NSW</option> | ||
<option>NT</option> | ||
<option>QLD</option> | ||
<option>SA</option> | ||
<option>TAS</option> | ||
<option selected>VIC</option> | ||
<option>WA</option> | ||
</select> | ||
</li> | ||
</ol> | ||
</fieldset> | ||
|
||
<fieldset> | ||
<legend>Membership information</legend> | ||
<ol> | ||
<li> | ||
<label for="username">Username *</label> | ||
<input id="username" name="username" type="text" pattern="\w{4,}" placeholder="Atleast 4 alphanumeric characters" required aria-required="true" /> | ||
</li> | ||
<li> | ||
<label for="password">Password *</label> | ||
<input id="password" name="password" type="password" title="Minimum 8 characters, one number, one uppercase and one lowercase letter" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required aria-required="true" /> | ||
<p class="validation01"> | ||
<span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span> | ||
<span class="valid">Your password meets our requirements, thank you.</span> | ||
</p> | ||
</li> | ||
<li> | ||
<label for="url">Website *</label> | ||
<input type="url" name="url" id="url" required aria-required="true" /> | ||
</li> | ||
</ol> | ||
</fieldset> | ||
|
||
<input type="submit" value="Sign up" /> | ||
|
||
</form> | ||
|
||
<!-- Google analytics | ||
<script type="text/javascript"> | ||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); | ||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); | ||
</script> | ||
<script type="text/javascript"> | ||
var pageTracker = _gat._getTracker("UA-4638292-1"); | ||
pageTracker._initData(); | ||
pageTracker._trackPageview(); | ||
</script>--> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.