Validate user input using HTML5 elements

HTML5 input elements

The <input> element in HTML denotes input controls. This element contains a type attribute that specifies the type of input element to render.

The exceptions to the <input type=’’> rule are the <textarea> and <button> elements, which have their own element support.

The following Table outlines the input elements supported in HTML5:

Element	Description
color*	Provides a color picker
date*	Provides a date picker
datetime*	Provides a date/time picker
month*	Enables users to select a numeric month and year
week*	Enables users to select a numeric week and year
time*	Enables users to select a time of day
number*	Forces the input to be numeric
Range	Allows users to select a value within a range by using a slider bar
tel*	Formats entered data as a phone number
url	Formats entered data as a properly formatted URL
Radio"	Enables users to select a single value for a list of choices
Checkbox"	Enables users to select multiple values in a list of choices
Password"	Captures a password and glyphs the entered characters
Button"	Enables users to perform an action such as run script
Reset"	Resets all HTML elements within a form
Submit"	Posts the form data to a destination for further processing

*Not supported currently by Internet Explorer

"Not new in HTML5

Using text input control

The text input control allow users to enter any text that they want into a regular text box. A text box provides a single-line text entry.

The following HTML shows the markup for the text input control:

<body>
    <form>
        <label for="name" >Name: </label>
        <input type="text" id="name"/>  <br />
    </form>
</body>

Using textarea input control

The textarea input control allow users to enter any text for a multiline data entry.

The following HTML shows the markup for the textarea input control:

<body>
    <form>
        <label for="message" >Your message: </label>
        <textarea id="message" cols="50" rows="5"> </textarea>
    </form>
</body>

Using url input type

The <input> type of url displays a text box similar to what the <input> type of text provides.

However, the renderer is instructed that the input type is url, so when users try to submit a form with this type of information on it, it validates that the text in the box matches the format of a valid URL.

The following HTML shows the markup for the url input type:

<body>
    <form>
        <label for="urlType">Website: </label>
        <input type="url" id="urlType" />
    </form>
</body>

Using the password input control

The password input control is the standard method of prompting users for sensitive information.

As you type your password, each character is replaced with a glyph so that any onlookers can’t see your password.

The following code demonstrates the password input control:

<body>
    <form>
        <label for="pass">Your Password: </label>
        <input type="password" id="pass" />
    </form>
</body>

Using the email input type

You can use the email input type to ensure that the format of the text entered into the text box matches that of a valid email address.

If you type text that doesn’t match the format of an email address, you receive a warning message.

The following code demonstrates the email input type:

<body>
    <form>
        <label for="emailInput">Email: </label>
        <input type="email" id="emailInput" />
        <input type="submit" value="Send" />
    </form>
</body>

Using the checkbox input type

the checkbox input control provides a series of choices and allow users to select all that apply.

By default, check boxes aren’t selected. However, by adding the checkedattribute the check box defaults to the “checked” state when the page is loaded.

The following HTML shows the markup for the checkbox input type:

<body>
    <h4>What colors have you colored your hair:</h4>
    <form>
        <input type="checkbox" id="chkBrown"/> Brown
        <input type="checkbox" id="chkBlonde"/> Blonde
        <input type="checkbox" id="chkRed"/> Red
        <input type="checkbox" id="chkNone" checked="checked"/> None
    </form>
</body>

Using the radio input type

The radio button is similar to the check box. The difference is that users can select only a single item from the list.

The following code demonstrates the radio input type:

<body>
    <h4>Your Level:</h4>
    <form>
        <input type="radio" id="chkOne" name="experience"/> Beginner
        <input type="radio" id="chkTwo" name="experience"/> Medium
        <input type="radio" id="chkThree" name="experience"/> Advanced
    </form>
</body>

Using the range input type

The range input type enables users to specify a value within a predefined range by using a slider bar.

The following code demonstrates the range input type:

<body>
    <form>
          //actual value on page load is 20
         <input type="range" min="1" max="25" value="20" />
    </form>
</body>

Using the button input type

The <input> element supports three types of button controls:

the submit input type tells the HTML form to post its information to the server
the reset type automatically clears all form elements to their default values
the button type provides a generic button with no predefined functionality

The following code demonstrates the button input type:

<body>
    <form>
        <input type="submit" value="Send"/>
        <input type="reset" value="Reset"/>
        <input type="button" value="Generic Button"/>
    </form>
</body>

Using the button element

The button element provides only the desired click behavior, such as submitting, resetting, or providing a custom behavior like with type=”button”.

Everything else must be specified in the HTML, including the label or text that goes on the button.

The following code demonstrates the button element:

<body>
    <form>
        <button type="button">Go Home</button>
        <button type="reset">Reset</button>
        <button type="submit">Submit Survey</button>
        //button with image embedded
        <button type="button" style="border-radius: 15px;">Button with image
            <img src="image.jpg"/>
        </button>
    </form>
</body>

Ads Right