Skip to content

Instantly share code, notes, and snippets.

@leemark
Last active December 15, 2015 01:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leemark/5183384 to your computer and use it in GitHub Desktop.
Save leemark/5183384 to your computer and use it in GitHub Desktop.
Some example form code - html5 input types, validation, etc.
<form>
<!-- email input type, required - the form won't submit if empty -->
<input type="email" id="youremail" placeholder="you@example.com" required />
<label for="youremail">your email</label>
<!-- url input type, optional - form will submit if empty, but if you do enter a value it needs to conform to URL type validation -->
<input type="url" id="yourwebsite" placeholder="http://example.com" />
<label for="yourwebsite">your website</label>
<input type="submit" />
</form>
/* when required form filed is active, make BG pink until it validates */
input:focus:required:invalid {
background-color: pink;
}
/* also add an asterisk to indicated required-ness */
input:required + label:before {
content: "* ";
}
/* just some basic label styling*/
label {
color: #888;
font-style: italic;
}
/* clear after each label */
label:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment