Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 73 views

    HTML Forms Best Practices

    Uploaded by

    Hruday charan
    The document provides best practices for HTML forms, including using meaningful HTML elements like <form> and <label> appropriately. It recommends adding attributes like required and autocomplete to improve accessibility and usability. The document also suggests techniques to help users enter valid information easily and avoid mistakes, such as using the appropriate input type and constraining values.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    HTML Forms Best Practices

    Uploaded by

    Hruday charan
    73 views16 pages
    The document provides best practices for HTML forms, including using meaningful HTML elements like <form> and <label> appropriately. It recommends adding attributes like required and autocomplete to improve accessibility and usability. The document also suggests techniques to help users enter valid information easily and avoid mistakes, such as using the appropriate input type and constraining values.

    Original Description:

    HTML Forms Best Practices

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides best practices for HTML forms, including using meaningful HTML elements like <form> and <label> appropriately. It recommends adding attributes like required and autocomplete to improve accessibility and usability. The document also suggests techniques to help users enter valid information easily and avoid mistakes, such as using the appropriate input type and constraining values.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    73 views16 pages

    HTML Forms Best Practices

    Uploaded by

    Hruday charan
    The document provides best practices for HTML forms, including using meaningful HTML elements like <form> and <label> appropriately. It recommends adding attributes like required and autocomplete to improve accessibility and usability. The document also suggests techniques to help users enter valid information easily and avoid mistakes, such as using the appropriate input type and constraining values.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 16

    George Moller

    _georgemoller

    1 4 H T M L

    F O R M S

    B E S T

    PRACTICES
    01
    George Moller
    _georgemoller

    Use meaningful HTML


    Use the elements and attributes built for the job:

    <form>
    Email
    <input>

    Password <label>

    SIGN UP <button>
    02 Always use a <form> element.
    Why?

    It gives you access to a powerful set of built-in features


    across all modern browsers.
    Can help make your site accessible to screen readers and
    other assistive devices.
    Makes it simpler to build basic functionality for older
    browsers with limited JavaScript support.

    If you have more than one page component for user input,
    make sure to put each in its own <form> element
    03
    George Moller
    _georgemoller

    Use <label> to label elements


    Associate a label with an input by giving the label's for attribute the
    same value as the input's id .

    A tap or click on a label moves focus to the input it's


    associated with, and screenreaders announce label text when
    the label or the label's input gets focus.
    04
    George Moller
    _georgemoller

    Make the most of HTML attributes


    Use the appropriate input type attribute to provide the right keyboard
    on mobile and enable basic built-in validation by the browser.

    type=”email” type=”tel”
    05
    George Moller
    _georgemoller

    Help users avoid missing required data


    Use the required attribute on inputs for mandatory values.

    Add an asterisk to the label for every required field, and add a note at the
    start of the form to explain what the asterisk means.

    Full name *
    When a form is submitted modern browsers
    e.g. John Doe automatically prompt and set focus on required
    fields with missing data, and you can use the
    :required pseudo-class to highlight required
    fields. No JavaScript required!
    06 Help users enter the right data
    George Moller
    _georgemoller

    You can add constraint attributes to form elements to specify


    acceptable values, including min, max, and pattern.
    Make use of the :valid and :invalid CSS pseudo-classes which
    can be used to style elements with valid or invalid values.

    Year of birth:
    1800
    07
    George Moller
    _georgemoller

    Don’t always use type="number"


    type="number" adds an up/down arrow to increment numbers, which
    makes no sense for data such as telephone, payment card or account
    numbers.
    For numbers that don’t require an up/down arrow use
    inputmode=”numeric” , this prompts a numeric keyboard on mobile.
    08
    George Moller
    _georgemoller

    Use the enterkeyhint attribute on inputs.


    Use the enterkeyhint attribute on form inputs to set the
    mobile keyboard enter key label.

    <input enterkeyhint=” next ” /> Takes the user to the next field that accepts text

    <input enterkeyhint=” prev ” /> Takes the user to the previous field that accepts text

    <input enterkeyhint=” search ” /> Takes the user to the results of searching for the text
    they have typed
    <input enterkeyhint=” done ” /> Last input on the form
    08
    George Moller
    _georgemoller

    Use the enterkeyhint attribute on inputs.

    enterkeyhint=” next ” enterkeyhint=” done ”


    George Moller

    _georgemoller

    09 Use a single name input

    Unless you have a ver y good reason:

    Don’t have two separate fields for the name (like first name, last name).

    Don’t add a separate input for a prefix or title (like Mrs, Dr or Lord)

    Full name *

    e.g. John Doe

    When a user starts to type in a field, the browser should display

    options to fill in the field, in this case only name related options
    10
    George Moller
    _georgemoller

    Help users avoid re-entering payment data


    Add appropriate autocomplete values in payment card forms, including
    the payment card number, name on the card, and the expiry month and
    year:

    <input autocomplete=” cc-number ” />


    <input autocomplete=” cc-name ” />
    <input autocomplete=” cc-exp-month ” />
    <input autocomplete=” cc-exp-year ” />
    11
    George Moller
    _georgemoller

    Make buttons helpful


    For submit buttons you can use <button> or <input type="submit">,
    but don't use a div or some other random element acting as a button.
    Also:
    Don't disable a submit button waiting on form completion or validation.

    Do disable a submit button once the user has tapped or clicked it.

    Give each form submit button a value that says what it does.

    e.g.

    Label the submit button on your delivery address form ‘Proceed to Payment’
    rather than ‘Continue’ or ‘Save’.

    12
    George Moller
    _georgemoller

    Use autocomplete attribute


    Use autocomplete to improve accessibility and help users avoid
    re-entering data.

    Some common values;


    <input autocomplete=” on ” /> Autocomplete is enabled but no
    guidance is given to the browser.
    <input autocomplete=” country ” /> A country or territory code.

    <input autocomplete=” organization ” /> A company or organization name.

    <input autocomplete=” username ” /> A username or account name.

    For a full list of autocomplete values:


    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    13
    George Moller
    _georgemoller

    Choose the best input type


    Choose the most appropriate input type for your data to simplify input.

    <input type=” url ” /> <input type=” email ” />

    For entering a URL. It must start with a For entering email addresses, and hints
    valid URI scheme, for example http://, that the @ should be shown on the
    ftp:// or mailto:. keyboard by default.
    14
    George Moller
    _georgemoller

    Make your forms accessible:


    At the bare minimum, make sure:
    To set autofocus on the first form input.
    You can navigate your form with just the Tab key.

    To use a label, in cases you can’t use a label, add it anyways and hide it with CSS.
    To include any instructions with specific fields using aria-describedby.

    You might also like