761 lines
28 KiB
HTML
761 lines
28 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Form Fields Cheatsheet</title>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="js/polyfills/html5shiv.min.js"></script>
|
||
|
|
<script src="js/polyfills/ie-array-slice-shim.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<link rel="stylesheet" href="css/bundle.min.css" />
|
||
|
|
<!--[if lt IE 8]>
|
||
|
|
<link rel="stylesheet" href="css/old-ie.css" />
|
||
|
|
<script src="js/polyfills/Dom/CSS_selector_engine.ielt8.js"></script>
|
||
|
|
<script>document.OLD_IE = true;</script>
|
||
|
|
<![endif]-->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>HTML Forms Best Practice Cheetsheet</h1>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<h2>Sections</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#user-auth">User authentication / signup</a></li>
|
||
|
|
<li><a href="#auth-pass-dupe">Authentication Password duplication (For signup or reset)</a></li>
|
||
|
|
<li><a href="#personal-info">Personal Information</a></li>
|
||
|
|
<li><a href="#organization-info">Organization / Business Information</a></li>
|
||
|
|
<li><a href="#phone-numbers">Phone Numbers</a></li>
|
||
|
|
<li><a href="#contact-info">Contact Information</a></li>
|
||
|
|
<li><a href="#addresses">Addresses</a></li>
|
||
|
|
<li><a href="#cc-info">Credit Card Information</a></li>
|
||
|
|
<li><a href="#money">Money / Currency</a></li>
|
||
|
|
<li><a href="#date-and-time">Date / Time</a></li>
|
||
|
|
<li><a href="#buttons">Buttons</a></li>
|
||
|
|
<li><a href="#other-elements">Other Form Elements</a></li>
|
||
|
|
<li><a href="#antipatterns">Anti-Patterns</a></li>
|
||
|
|
</ul>
|
||
|
|
<hr />
|
||
|
|
<div id="polyfills-loaded"></div>
|
||
|
|
<form action="#" oninput="result.value=parseInt(output1.value) * parseInt(output2.value)">
|
||
|
|
<div id="user-auth">
|
||
|
|
<h3>User authentication / signup</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="username">Username</label>
|
||
|
|
<input id="username" name="username" type="text" autocorrect="off" autocomplete="username" placeholder="timbl" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="new-pass">New Password</label>
|
||
|
|
<input id="new-pass" name="new-pass" type="password" maxlength="50" autocorrect="off" autocomplete="new-password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="current-pass">Current Password</label>
|
||
|
|
<input id="current-pass" name="current-pass" type="password" maxlength="50" autocorrect="off" autocomplete="current-password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="auth-pass-dupe">
|
||
|
|
<h3>Authentication Password duplication (For signup or reset)</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="confirm-pass-1">Password</label>
|
||
|
|
<input id="confirm-pass-1" name="confirm-pass-1" type="password" maxlength="50" autocorrect="off" autocomplete="new-password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="confirm-pass-2">Confirm Password</label>
|
||
|
|
<input id="confirm-pass-2" name="confirm-pass-2" type="password" maxlength="50" autocorrect="off" autocomplete="new-password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="personal-info">
|
||
|
|
<h3>Personal Information</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="name">Full Name</label>
|
||
|
|
<input id="name" name="name" type="text" autocorrect="off" autocomplete="name" placeholder="Sir Timothy John Berners-Lee, OM, KBE, FRS, FREng, FRSA" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Name Fields</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="prefix">Prefix or title</label>
|
||
|
|
<input id="prefix" name="prefix" type="text" autocorrect="off" autocomplete="honorific-prefix" placeholder="Sir" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="given-name">First / Given Name</label>
|
||
|
|
<input id="given-name" name="given-name" type="text" autocorrect="off" autocomplete="given-name" placeholder="Timothy" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="additional-name">Middle / Additional Name</label>
|
||
|
|
<input id="additional-name" name="additional-name" type="text" autocorrect="off" autocomplete="additional-name" placeholder="John" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="family-name">Last / Family Name</label>
|
||
|
|
<input id="family-name" name="family-name" type="text" autocorrect="off" autocomplete="family-name" placeholder="Berners-Lee" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="suffix">Suffix</label>
|
||
|
|
<input id="suffix" name="suffix" type="text" autocorrect="off" autocomplete="honorific-suffix" placeholder="OM, KBE, FRS, FREng, FRSA" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="nickname">Nickname</label>
|
||
|
|
<input id="nickname" name="nickname" type="text" autocorrect="off" autocomplete="nickname" placeholder="Tim" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="bday">Birthday</label>
|
||
|
|
<input id="bday" name="bday" type="date" autocorrect="off" autocomplete="bday" placeholder="1955-06-08" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Birthday</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="bday-day">Birthday Day of the Month</label>
|
||
|
|
<input id="bday-day" name="bday-day" type="number" min="1" max="31" step="1" autocorrect="off" autocomplete="bday-day" placeholder="8" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="bday-month">Birthday Month</label>
|
||
|
|
<input id="bday-month" name="bday-month" type="number" min="1" max="12" step="1" autocorrect="off" autocomplete="bday-month" placeholder="6" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="bday-year">Birthday Year</label>
|
||
|
|
<input id="bday-year" name="bday-year" type="number" min="1900" step="1" autocorrect="off" autocomplete="bday-year" placeholder="1955" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="sex">Sex</label>
|
||
|
|
<input id="sex" name="sex" type="text" autocomplete="sex" placeholder="Male" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="url">Favorite URL</label>
|
||
|
|
<input id="url" name="url" type="url" autocorrect="off" autocomplete="url" placeholder="https://www.w3.org/People/Berners-Lee/" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="photo-url">Photo / Portrait / Avatar</label>
|
||
|
|
<input id="photo-url" name="photo-url" type="url" autocorrect="off" autocomplete="photo" placeholder="https://www.w3.org/Press/Stock/Berners-Lee/2001-europaeum-eighth.jpg" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="organization-info">
|
||
|
|
<h3>Organization / Business Information</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="organization">Organization / Business</label>
|
||
|
|
<input id="organization" name="organization" type="text" autocorrect="off" autocomplete="organization" placeholder="World Wide Web Consortium" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="organization-title">Organization / Business Title</label>
|
||
|
|
<input id="organization-title" name="organization-title" type="text" autocorrect="off" autocomplete="organization-title" placeholder="Professor" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="phone-numbers">
|
||
|
|
<h3>Phone Numbers</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="phone">Phone Number</label>
|
||
|
|
<input id="phone" name="phone" type="tel" autocorrect="off" autocomplete="tel" placeholder="+1 617 253 5702" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="phone-ext">Phone extension</label>
|
||
|
|
<input id="phone-ext" name="phone-ext" type="text" autocorrect="off" autocomplete="tel-extension" pattern="\d*" placeholder="1000" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Phone Number</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-country-code">Country Code</label>
|
||
|
|
<input id="tel-country-code" name="tel-country-code" type="text" autocorrect="off" autocomplete="tel-country-code" pattern="\+\d+" placeholder="+1" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-national">National number</label>
|
||
|
|
<input id="tel-national" name="tel-national" type="text" autocorrect="off" autocomplete="tel-national" pattern="(\d+ ?)+" placeholder="617 253 5702" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split National Number</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-area-code">Area Code</label>
|
||
|
|
<input id="tel-area-code" name="tel-area-code" type="text" autocorrect="off" autocomplete="tel-area-code" pattern="\d*" placeholder="617" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-local">Local Number</label>
|
||
|
|
<input id="tel-local" name="tel-local" type="text" autocorrect="off" autocomplete="tel-local" pattern="\d*" placeholder="2535702" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Local Number</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-local-prefix">Local Prefix</label>
|
||
|
|
<input id="tel-local-prefix" name="tel-local-prefix" type="text" autocorrect="off" autocomplete="tel-local-prefix" pattern="\d*" placeholder="253" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="tel-local-suffix">Local Suffix</label>
|
||
|
|
<input id="tel-local-suffix" name="tel-local-suffix" type="text" autocorrect="off" autocomplete="tel-local-suffix" pattern="\d*" placeholder="5702" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
</fieldset>
|
||
|
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="contact-info">
|
||
|
|
<h3>Contact Information</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input id="email" name="email" type="email" autocapitalize="off" autocorrect="off" autocomplete="email" placeholder="timbl@w3.org" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="im-url">Instant Messaging URL</label>
|
||
|
|
<input id="im-url" name="im-url" type="url" autocorrect="off" autocomplete="impp" placeholder="irc://example.org/timbl,isuser" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="addresses">
|
||
|
|
<h3>Addresses</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="textarea-address">Street Address</label>
|
||
|
|
<textarea id="textarea-address" name="textarea-address" autocorrect="off" autocomplete="street-address" placeholder="32 Vassar Street MIT Room 32-G524"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Street Address</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="address-line">Address Line 1</label>
|
||
|
|
<input id="address-line" name="address-line" type="text" autocorrect="off" autocomplete="address-line1" placeholder="32 Vassar Street" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="address-line2">Address Line 2</label>
|
||
|
|
<input id="address-line2" name="address-line2" type="text" autocorrect="off" autocomplete="address-line2" placeholder="MIT Room 32-G524" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="address-line3">Address Line 3</label>
|
||
|
|
<input id="address-line3" name="address-line3" type="text" autocorrect="off" autocomplete="address-line3" placeholder="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="state">State / Province (Address Level 1)</label>
|
||
|
|
<input id="state" name="state" type="text" autocorrect="off" autocomplete="address-level1" placeholder="MA" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="city">City (Address Level 2)</label>
|
||
|
|
<input id="city" name="city" type="text" autocorrect="off" autocomplete="address-level2" placeholder="Cambridge" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="address-level-3">Address Level 3 (Administrative area smaller than level 2)</label>
|
||
|
|
<input id="address-level-3" name="address-level-3" type="text" autocorrect="off" autocomplete="address-level-3" placeholder="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="address-level-4">Address Level 4 (Administrative area smaller than level 3)</label>
|
||
|
|
<input id="address-level-4" name="address-level-4" type="text" autocorrect="off" autocomplete="address-level-4" placeholder="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="country">Country Name</label>
|
||
|
|
<input id="country" name="country" type="text" autocorrect="off" autocomplete="country-name" placeholder="United States" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="country-code">Country Code</label>
|
||
|
|
<input id="country-code" name="country-code" type="text" autocorrect="off" autocomplete="country" placeholder="US" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="zip">Postal Code (Pattern varies by country)</label>
|
||
|
|
<input id="zip" name="zip" type="text" pattern="\d*" autocorrect="off" autocomplete="postal-code" placeholder="02139" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="cc-info">
|
||
|
|
<h3>Credit Card Information</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-type">Credit Card Type</label>
|
||
|
|
<input id="cc-type" name="cc-type" type="text" autocorrect="off" autocomplete="cc-type" placeholder="Visa" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-name">Credit Card Name</label>
|
||
|
|
<input id="cc-name" name="cc-name" type="text" autocorrect="off" autocomplete="cc-name" placeholder="Tim Berners-Lee" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Split Credit Card Name</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-given-name">First / Given Name</label>
|
||
|
|
<input id="cc-given-name" name="cc-given-name" type="text" autocorrect="off" autocomplete="cc-given-name" placeholder="Tim" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-additional-name">Middle / Additional Name</label>
|
||
|
|
<input id="cc-additional-name" name="cc-additional-name" type="text" autocorrect="off" autocomplete="cc-additional-name" placeholder="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-family-name">Last / Family Name</label>
|
||
|
|
<input id="cc-family-name" name="cc-family-name" type="text" autocorrect="off" autocomplete="cc-family-name" placeholder="Berners-Lee" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-number">Credit Card Number</label>
|
||
|
|
<input id="cc-number" name="cc-number" type="text" pattern="\d*" novalidate="novaidate" autocorrect="off" autocomplete="cc-number" placeholder="4111111111111111" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-csc">Credit Card Security Code</label>
|
||
|
|
<input id="cc-csc" name="cc-csc" type="text" pattern="\d*" novalidate="novalidate" autocorrect="off" autocomplete="cc-csc" placeholder="419" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Combined Month Expiration</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-exp">Credit Card Expiration Month</label>
|
||
|
|
<input id="cc-exp" name="cc-exp" type="month" autocorrect="off" autocomplete="cc-exp" placeholder="2014-12" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Separate Month / Year Expiration</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-exp-month">Expiration Month</label>
|
||
|
|
<input id="cc-exp-month" name="cc-exp-month" type="number" autocorrect="off" min="1" max="12" step="1" autocomplete="cc-exp-month" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="cc-exp-year">Expiration Year</label>
|
||
|
|
<input id="cc-exp-year" name="cc-exp-year" type="number" autocorrect="off" min="2000" step="1" autocomplete="cc-exp-year" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="money">
|
||
|
|
<h3>Money / Currency</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="currency">Currency Code</label>
|
||
|
|
<input id="currency" name="currency" type="text" autocorrect="off" autocomplete="transaction-currency" placeholder="GBP" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="price">Price / Bid</label>
|
||
|
|
<input id="price" name="price" type="number" min="0.00" step="0.01" autocorrect="off" autocomplete="transaction-amount" placeholder="401.00" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="date-and-time">
|
||
|
|
<h3>Date / Time</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="date">Date</label>
|
||
|
|
<input id="date" name="date" type="date" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="buttons">
|
||
|
|
<h3>Buttons</h3>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="input-submit">Input Type Submit</label>
|
||
|
|
<input id="input-submit" name="input-submit" type="submit" value="Push me to send form" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="button-submit">Button Type Submit</label>
|
||
|
|
<button id="button-submit" name="button-submit" type="submit">Push me to send form</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="other-elements">
|
||
|
|
<h3>Other Form Elements</h3>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Input with Datalist</legend>
|
||
|
|
|
||
|
|
<p>Note: set <code>display:none</code> on <code>datalist</code> element to hide options from browsers that don't understand the <code>datalist</code> element.</p>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="favorite-browser">What's your favorite web browser?</label>
|
||
|
|
<input id="favorite-browser" name="favorite-browser" type="text" list="browser-list" />
|
||
|
|
<datalist id="browser-list">
|
||
|
|
<option value="Avant Browser"></option>
|
||
|
|
<option value="Brave"></option>
|
||
|
|
<option value="Google Chrome">Chrome</option>
|
||
|
|
<option value="Google Chromium">Chromium</option>
|
||
|
|
<option value="Citrio"></option>
|
||
|
|
<option value="Cốc Cốc">Coc Coc</option>
|
||
|
|
<option value="Dillo"></option>
|
||
|
|
<option value="Dooble"></option>
|
||
|
|
<option value="Microsoft Edge">Edge</option>
|
||
|
|
<option value="Epic"></option>
|
||
|
|
<option value="Mozilla Firefox">Firefox</option>
|
||
|
|
<option value="Gnuzilla"></option>
|
||
|
|
<option value="iCab"></option>
|
||
|
|
<option value="Gnu IceCat">IceCat</option>
|
||
|
|
<option value="Internet Explorer"></option>
|
||
|
|
<option value="Konqueror"></option>
|
||
|
|
<option value="K-Meleon"></option>
|
||
|
|
<option value="Links"></option>
|
||
|
|
<option value="Lunascape"></option>
|
||
|
|
<option value="Lynx"></option>
|
||
|
|
<option value="Maxthon"></option>
|
||
|
|
<option value="Midori"></option>
|
||
|
|
<option value="NetSurf"></option>
|
||
|
|
<option value="OmniWeb"></option>
|
||
|
|
<option value="Opera"></option>
|
||
|
|
<option value="Otter Browser"></option>
|
||
|
|
<option value="Pale Moon"></option>
|
||
|
|
<option value="QupZilla"></option>
|
||
|
|
<option value="Roccat Browser"></option>
|
||
|
|
<option value="Rekonq"></option>
|
||
|
|
<option value="Safari"></option>
|
||
|
|
<option value="Seamonkey"></option>
|
||
|
|
<option value="Servo"></option>
|
||
|
|
<option value="Sleipnir"></option>
|
||
|
|
<option value="surf"></option>
|
||
|
|
<option value="Torch"></option>
|
||
|
|
<option value="Uzbl"></option>
|
||
|
|
<option value="Vivaldi"></option>
|
||
|
|
<option value="w3m"></option>
|
||
|
|
<option value="WebPositive"></option>
|
||
|
|
<option value="xombrero"></option>
|
||
|
|
<option value="Yandex.Browser"></option>
|
||
|
|
</datalist>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Multiselect without Option Groups</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="select-no-optgroup-multi">Favorite Web Browsers</label>
|
||
|
|
<select id="select-no-optgroup-multi" name="select-no-optgroup-multi" multiple="multiple" size="15">
|
||
|
|
<option value="http://www.avantbrowser.com/">Avant Browser</option>
|
||
|
|
<option value="https://brave.com/" selected="selected">Brave</option>
|
||
|
|
<option value="https://www.google.com/chrome/">Chrome</option>
|
||
|
|
<option value="http://citrio.com/">Citrio</option>
|
||
|
|
<option value="https://coccoc.com/">Cốc Cốc</option>
|
||
|
|
<option value="http://www.dillo.org/">Dillo</option>
|
||
|
|
<option value="http://dooble.sourceforge.net/">Dooble</option>
|
||
|
|
<option value="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</option>
|
||
|
|
<option value="https://www.epicbrowser.com/">Epic</option>
|
||
|
|
<option value="https://www.mozilla.org/en-US/firefox/products/" selected="selected">Firefox</option>
|
||
|
|
<option value="http://www.icab.de/">iCab</option>
|
||
|
|
<option value="https://www.gnu.org/software/gnuzilla/">IceCat</option>
|
||
|
|
<option value="https://www.microsoft.com/en-us/download/internet-explorer.aspx">Internet Explorer</option>
|
||
|
|
<option value="https://konqueror.org/" selected="selected">Konqueror</option>
|
||
|
|
<option value="http://kmeleonbrowser.org/">K-Meleon</option>
|
||
|
|
<option value="http://links.twibright.com/">Links</option>
|
||
|
|
<option value="http://www.lunascape.tv/">Lunascape</option>
|
||
|
|
<option value="http://lynx.browser.org/">Lynx</option>
|
||
|
|
<option value="http://www.maxthon.com/">Maxthon</option>
|
||
|
|
<option value="http://midori-browser.org/">Midori</option>
|
||
|
|
<option value="http://www.netsurf-browser.org/">NetSurf</option>
|
||
|
|
<option value="https://www.omnigroup.com/more">OmniWeb</option>
|
||
|
|
<option value="http://www.opera.com/">Opera</option>
|
||
|
|
<option value="https://otter-browser.org/">Otter Browser</option>
|
||
|
|
<option value="https://www.palemoon.org/">Pale Moon</option>
|
||
|
|
<option value="http://www.qupzilla.com/">QupZilla</option>
|
||
|
|
<option value="http://runecats.com/roccat.html">Roccat Browser</option>
|
||
|
|
<option value="https://rekonq.kde.org/">Rekonq</option>
|
||
|
|
<option value="http://www.apple.com/safari/">Safari</option>
|
||
|
|
<option value="http://www.seamonkey-project.org/">Seamonkey</option>
|
||
|
|
<option value="https://servo.org/">Servo</option>
|
||
|
|
<option value="http://www.fenrir-inc.com/jp/sleipnir/">Sleipnir</option>
|
||
|
|
<option value="http://surf.suckless.org/">surf</option>
|
||
|
|
<option value="http://torchbrowser.com/">Torch</option>
|
||
|
|
<option value="https://www.uzbl.org/">Uzbl</option>
|
||
|
|
<option value="https://vivaldi.com/" selected="selected">Vivaldi</option>
|
||
|
|
<option value="http://w3m.sourceforge.net/">w3m</option>
|
||
|
|
<option value="https://www.haiku-os.org/docs/userguide/en/applications/webpositive.html">WebPositive</option>
|
||
|
|
<option value="https://github.com/conformal/xombrero/wiki">xombrero</option>
|
||
|
|
<option value="https://browser.yandex.com/desktop/">Yandex.Browser</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Select w/ Optgroups</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="movie-language">Favorite Movie Language</label>
|
||
|
|
<select id="movie-language">
|
||
|
|
<optgroup label="Western Languages">
|
||
|
|
<option value="en">English</option>
|
||
|
|
<option value="fr">French</option>
|
||
|
|
<option value="es">Spanish</option>
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="Eastern Languages">
|
||
|
|
<option value="cn">Chinese</option>
|
||
|
|
<option value="jp">Japanese</option>
|
||
|
|
<option value="kr">Korean</option>
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Checkboxes</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<h4>Select your favorite fruit(s)</h4>
|
||
|
|
<label>Apple <input id="cb-1" name="fruit[]" type="checkbox" value="apple" /></label>
|
||
|
|
<label>Orange <input id="cb-2" name="fruit[]" type="checkbox" value="orange" /></label>
|
||
|
|
<label>Watermelon <input id="cb-3" name="fruit[]" type="checkbox" value="watermelon" /></label>
|
||
|
|
<label>Something else <input id="cb-4" name="fruit[]" type="checkbox" value="other" /></label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Output/Display Elements</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="progress">Progress Bar</label>
|
||
|
|
<progress id="progress" value="70" max="100" title="70%">70 %</progress>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="meter">Meter Element</label>
|
||
|
|
<meter id="meter" name="meter" min="-50" low="-20" high="130" max="170" optimum="70" value="65">65 Degrees</meter>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>The Output Element</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output" title="MDN article on the 'Output' element">the MDN article</a>.</p>
|
||
|
|
<div class="example">
|
||
|
|
<label for="result">Output Element</label>
|
||
|
|
<input id="output1" name="output1" type="number" min="0" max="100" size="3" value="8" /> *
|
||
|
|
<input id="output2" name="output2" type="number" min="0" max="100" size="3" value="4"/> =
|
||
|
|
<output id="result" for="output1 output2">32</output>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
<hr />
|
||
|
|
<div id="antipatterns" class="antipattern">
|
||
|
|
<h3>Anti-Patterns</h3>
|
||
|
|
<fieldset>
|
||
|
|
<legend>Deprecated Elements</legend>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="keygen">Keygen</label>
|
||
|
|
<keygen id="keygen" name="keygen" keytype="rsa" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend>Multiple Select with Optgroups</legend>
|
||
|
|
|
||
|
|
<p>Note: Browser support varies. Recommend against for maximum compatibility.</p>
|
||
|
|
|
||
|
|
<div class="form-field">
|
||
|
|
<div class="example">
|
||
|
|
<label for="movie-favorite">Favorite Way(s) to watch a movie</label>
|
||
|
|
<select id="movie-favorite" multiple="multiple" size="10">
|
||
|
|
<optgroup label="Language">
|
||
|
|
<option value="sub">Subtitled</option>
|
||
|
|
<option value="orig-dub">Original Language - No subtitles</option>
|
||
|
|
<option value="dub">Dubbed in your Language</option>
|
||
|
|
</optgroup>
|
||
|
|
|
||
|
|
<optgroup label="Screen Shape">
|
||
|
|
<option value="fullscreen">Fullscreen</option>
|
||
|
|
<option value="widescreen">Widescreen</option>
|
||
|
|
</optgroup>
|
||
|
|
|
||
|
|
<optgroup label="Location">
|
||
|
|
<option value="theatre">Theatre</option>
|
||
|
|
<option value="home">At Home</option>
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</fieldset>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- Do the JavaScript magic -->
|
||
|
|
<script src="js/load-scripts.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|