Skip to content

Instantly share code, notes, and snippets.

@matijagrcic
Created June 25, 2016 12:36
Show Gist options
  • Save matijagrcic/2eeb44822d31cf6f770974aa171d1afb to your computer and use it in GitHub Desktop.
Save matijagrcic/2eeb44822d31cf6f770974aa171d1afb to your computer and use it in GitHub Desktop.
<form method="post" id="usrForm">
<fieldset>
<legend>Name and Company</legend>
<label for="name">Name</label>
<input type="text" name="name" id="name" autocomplete="name">
<label for="honorific-prefix">Honorific Prefix (e.g. "Mr.", "Ms.", "Dr.", "Mlle")</label>
<input type="text" name="honorific-prefix" id="honorific-prefix" autocomplete="honorific-prefix">
<label for="given-name">Given Name</label>
<input type="text" name="given-name" id="given-name" autocomplete="given-name">
<label for="additional-name">Additional Name</label>
<input type="text" name="additional-name" id="additional-name" autocomplete="additional-name">
<label for="family-name">Family Name</label>
<input type="text" name="family-name" id="family-name" autocomplete="family-name">
<label for="honorific-suffix">Honorific Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II")</label>
<input type="text" name="honorific-suffix" id="honorific-suffix" autocomplete="honorific-suffix">
<label for="nickname">Nickname</label>
<input type="text" name="nickname" id="nickname" autocomplete="nickname">
<label for="organization-title">Job Title</label>
<input type="text" name="organization-title" id="organization-title" autocomplete="organization-title">
<label for="organization">Organization</label>
<input type="text" name="organization" id="organization" autocomplete="organization">
</fieldset>
<fieldset>
<legend>Credentials</legend>
<label for="username">Username</label>
<input type="text" name="username" id="username" autocomplete="username">
<label for="new-password">New Password</label>
<input type="password" name="new-password" id="new-password" autocomplete="new-password">
<label for="current-password">Current Password</label>
<input type="password" name="current-password" id="current-password" autocomplete="current-password">
</fieldset>
<fieldset>
<legend>Shipping Address</legend>
<label for="street-address">Street Address</label>
<textarea name="street-address" autocomplete="shipping street-address"></textarea>
<label for="address-line1">Address Line 1</label>
<input type="text" name="address-line1" id="address-line1" autocomplete="shipping address-line1">
<label for="address-line2">Address Line 2</label>
<input type="text" name="address-line2" id="address-line2" autocomplete="shipping address-line2">
<label for="address-line3">Address Line 3</label>
<input type="text" name="address-line3" id="address-line3" autocomplete="shipping address-line3">
<label for="address-level4">Address Level 4</label>
<input type="text" name="address-level4" id="address-level4" autocomplete="shipping address-level4">
<label for="address-level3">Address Level 3</label>
<input type="text" name="address-level3" id="address-level3" autocomplete="shipping address-level3">
<label for="address-level2">City (Address Level 2)</label>
<input type="text" name="address-level2" id="address-level2" autocomplete="shipping address-level2">
<label for="address-level1">State/Province (Address Level 1)</label>
<input type="text" name="address-level1" id="address-level1" autocomplete="shipping address-level1">
<label for="country">Country Code</label>
<input type="text" name="country" id="country" autocomplete="shipping country">
<label for="country-name">Country Name</label>
<input type="text" name="country-name" id="country-name" autocomplete="shipping country-name">
<label for="postal-code">Postal Code</label>
<input type="text" name="postal-code" id="postal-code" autocomplete="shipping postal-code">
</fieldset>
<fieldset>
<legend>Payment Information <b>DO NOT USE A REAL CARD NUMBER!!!</b></legend>
<label for="cc-name">Name on Card</label>
<input type="text" name="ccname" id="ccname" autocomplete="cc-name">
<label for="cc-given-name">Given Name on Card</label>
<input type="text" name="cc-given-name" id="cc-given-name" autocomplete="cc-given-name">
<label for="cc-additional-name">Additional Name on Card</label>
<input type="text" name="cc-additional-name" id="cc-additional-name" autocomplete="cc-additional-name">
<label for="cc-family-name">Family Name on Card</label>
<input type="text" name="cc-family-name" id="cc-family-name" autocomplete="cc-family-name">
<label for="cc-number">Credit Card Number</label>
<input type="text" name="ccnumber" id="ccnumber" autocomplete="cc-number">
<label for="cc-exp">Expiration Date</label>
<input type="month" name="expdate" id="expdate" autocomplete="cc-exp">
<label for="cc-exp-month">Expiration Month</label>
<input type="number" name="cc-exp-month" id="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" name="cc-exp-year" id="cc-exp-year" autocomplete="cc-exp-year">
<label for="cc-csc">CSC</label>
<input type="text" name="cc-csc" id="cc-csc" autocomplete="cc-csc">
<label for="cc-type">Credit Card Type</label>
<input type="text" name="cc-type" id="cc-type" autocomplete="cc-type">
<fieldset>
<fieldset>
<legend>Transaction information: The use case for this isn't a typical autofill. The expectation would be that these fields are hidden and the user agent might "use this information to suggest a credit card that it knows has sufficient balance and that supports the relevant currency."</legend>
<label for="transaction-currency">Transaction Currency</label>
<input type="text" name="transaction-currency" id="transaction-currency" autocomplete="transaction-currency">
<label for="transaction-amount">Transaction Amount</label>
<input type="number" name="transaction-amount" id="transaction-amount" autocomplete="transaction-amount">
<label for="language">language</label>
</fieldset>
<fieldset>
<legend>Personal information</legend>
<label for="language">Preferred Language</label>
<input type="text" name="language" id="language" autocomplete="language">
<label for="bday">Birthday</label>
<input type="date" name="bday" id="bday" autocomplete="bday">
<label for="bday-day">Birthday Day</label>
<input type="number" name="bday-day" id="bday-day" autocomplete="bday-day">
<label for="bday-month">Birthday Month</label>
<input type="number" name="bday-month" id="bday-month" autocomplete="bday-month">
<label for="bday-year">Birthday year</label>
<input type="number" name="bday-year" id="bday-year" autocomplete="bday-year">
<label for="sex">Gender Identity</label>
<input type="text" name="sex" id="sex" autocomplete="sex">
<label for="url">URL</label>
<input type="url" name="url" id="url" autocomplete="url">
<label for="photo">Photo URL</label>
<input type="url" name="photo" id="photo" autocomplete="photo">
</fieldset>
<fieldset>
<legend>Home contact info</legend>
<label for="tel">Telephone Number</label>
<input type="tel" name="tel" id="tel" autocomplete="home tel">
<label for="tel-country-code">Country Code</label>
<input type="text" name="tel-country-code" id="tel-country-code" autocomplete="home tel-country-code">
<label for="tel-national">Telephone number without the county code</label>
<input type="text" name="tel-national" id="tel-national" autocomplete="home tel-national">
<label for="tel-area-code">Area Code</label>
<input type="text" name="tel-area-code" id="tel-area-code" autocomplete="home tel-area-code">
<label for="tel-local">Telephone number without the country code and area code components</label>
<input type="text" name="tel-local" id="tel-local" autocomplete="home tel-local">
<label for="tel-local-prefix">Local Prefix</label>
<input type="text" name="tel-local-prefix" id="tel-local-prefix" autocomplete="home tel-local-prefix">
<label for="tel-local-suffix">Local Suffix</label>
<input type="text" name="tel-local-suffix" id="tel-local-suffix" autocomplete="home tel-local-suffix">
<label for="tel-extension">Extension</label>
<input type="text" name="tel-extension" id="tel-extension" autocomplete="home tel-extension">
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="home email">
<label for="impp">Chat</label>
<input type="url" name="impp" id="impp" autocomplete="home impp">
</fieldset>
<input type="submit" value="Submit" name="submit" id="submit">
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment