Post
Ask Question

Learn about HTML5 Input Types

Introduction

In this article, you will learn about HTML5 Input Types.

Input Type Range

An input type=range is used for input fields that should contain a value from a range of numbers by declaring the minimum and maximum values. You can also set restrictions on what numbers are accepted.

<input type="range" name="age" min="18" max="35" />

Age

Input Type URL

A type URL is used for input fields that should contain a URL address. The value of the URL field is automatically validated when the form is submitted.

<input type="url" name="mainpage" />

URL field

Input Type email

The email type is used for input fields that should contain an e-mail address and automatically validated when submitted.

<input type="email" name="emailid" />

Email type

Input Type number

The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted.

<input type="number" name="quantity" min="1" max="5" />

Input Type Tel

Defines a field for entering a telephone number and automatically validates when the form is submitted.

<input type="tel" name="usrtel" />

Form Element <datalist>

A <datalist> is used to provide the "autocomplete" feature to the input elements. Users will see a drop-down list of pre-defined options as they input data. Use the <input> element's list attribute to bind it together with a <datalist> element.

<input type="text" name="srch" id="srch" list="datalist1"/>
<datalist id="datalist1">
    <option value="India">
    <option value="Indonesia">
    <option value="USA">
    <option value="UK">
    <option value="Uganda">
    <option value="Russia">
    <option value="Brazil">
</datalist>

Country

Form Element <keygen>

The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> tag specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

<input type="text" name="usr_name" />
Encryption: <keygen name="security" />

Authenticate users

<input> autofocus Attribute

The autofocus attribute is a boolean attribute. When present, it specifies that an <input> element should automatically get focus when the page loads.

<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>

<input> placeholder Attribute

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The hint is displayed in the input field when it is empty and disappears when the field gets focused. The placeholder attribute works with the following input types: text, search, URL, tel, email, and password.

<input type="number" name="age" min="18" max="25" placeholder="18-35"/>

Placeholder Attribute

<input> required Attribute

The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, URL, tel, email, password, date pickers, number, checkbox, radio, and file.

<input type="text" name="firstname" id="firstname" required="required" autofocus="true"/>

Required attribute

Now we use all of the above together in an HTML page.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Forms</title>
</head>
<body>
<form action="mainpage.htm">
<h1 style="margin-left: 680px">HTML5 Forms</h1>
<table id="table1" cellspacing="5px" cellpadding="5%" align="center">
    <tr>
        <td align="right">First Name:*</td>
        <td class="style3"><input type="text" name="firstname" id="firstname" required="required" autofocus="true"/></td>
    </tr>
    <tr>
        <td align="right">Last Name:*</td>
        <td class="style3"><input type="text" name="lastname" id="lastname" required="required"/></td>
    </tr>
    <tr>
        <td align="right">Fathers Name:</td>
        <td class="style3"><input type="text" name="fname" id="fname"/></td>
    </tr>
    <tr>
        <td align="right">Age:</td>
        <td class="style3"><input type="number" name="age" min="18" max="25" placeholder="18-35"/></td>
    </tr>
    <tr>
        <td align="right">Username:</td>
        <td class="style3"><input type="text" name="usr_name"/> Encryption:<keygen name="security"/></td>
    </tr>
    <tr>
        <td align="right">Email</td>
        <td class="style3"><input type="email" name="usremail"/></td>
    </tr>
    <tr>
        <td align="right">Mobile Number</td>
        <td class="style3"><input type="tel" name="usrtel"/></td>
    </tr>
    <tr>
        <td align="right">Country:</td>
        <td class="style3"><input type="text" name="srch" id="srch" list="datalist1"/><datalist id="datalist1"><option value="India"><option value="Indonesia"><option value="USA"><option value="UK"><option value="Uganda"><option value="Russia"><option value="Brazil"></datalist></td>
    </tr>
    <tr>
        <td align="right">Homepage</td>
        <td class="style3"><input type="url" name="homepage"/></td>
    </tr>
    <tr>
        <td><input type="submit" name="Submit" style="width: 88px"/></td>
    </tr>
</table>
</form>
</body>
</html>

Finally, our output looks like this.

Output


Similar Articles