HTML5 advanced input Elements. ~ Online Quiz in IT

HTML5 advanced input Elements

Introduction to input element
New Input Types
Example

The <input> element is the most important form tag. The <input> tag is displayed in several ways, depending on the type attribute.

HTML5 introduces a number of new input types.

New Input Types:

1.<input type="color">:

When user want to create color picker this is used. The <input type=”color”> defines a color picker. The color value gives in hexadecimal format (#rrggbb) or color name. By default value is #000000, which is black.

<form>

<h2>Select Your Color: <input type="color" value="#00ff00"></h2>

</form>

2.<input type="number"> :

For entering numerical values number input type is used. Additional attributes are min,max and step.

Example-Enter a number value between 10 to 20.

<form>

<h3>Enter Number Values:<input type="number" min=10 max=20 step=1></h3>

</form>

3.<input type="url">:

For entering web addresses or URL's this input type is used. When you want to enter multiple URL's use multiple attribute.

<form>

<h3>Enter Website Address:<input type="url " required> </h3>

</form>

4.<input type="image">:

<input type=”image”> elements of type image are used to create graphical submit buttons,

5.<input type="date">:

For select a date from calendar drop down menu this input type is used. Here date value contains year, month and day but not include time.

<form>

<h3>Select Date :<input type="date" value="2020-10-24"></h3>

</form>

6.<input type="email">:

When user want to enter e-mail address, email input type is used.

<form>

<h3>Enter Your E Mail Id:<input type="email" required></h3>

</form>

7.<input type="month">:

For selection of a month and year from calendar, month input type used. This gives result as a YYYY-MM year in four digits and month in number.

<form>

Select Month:<input type="month"></h3>

</form>

8.<input type="range">:

This type of input is used for entering numerical values within a specified range.

<form>

<h3>Select Number Value:<input type="range" min=10 max=100 step=5></h3>

</form>

9.<input type="datetime-local">:

Using this input type user select local date and time with year, month and day. It also shows time in hours and minutes.

<form>

Select Date and Time:<input type="datetime-local"></h3>

</form>

10.<input type="time">:

This time input type is used for entering a time in hours and minutes. Time format used by browser i.e.12 or 24 hours depends upon the local system time format.

<form>

Select Time:<input type="time">

</form>

11.<input type="week">:

Using this week input type, user select a week and year from calendar.

<form>

Select Week:<input type="week">

</form>

12.<input type="search">:

For creating search input fields, Use search input type.

<form>

<h3>Type to Search Website:<input type="search"></h3>

</form>

13.<input type="file">:

Using this input type we defines a file select field with a browse button for file uploads.

For multiple files to be selected, we have to add multiple attribute.

<form>

File to Upload:<input type="file" name="sample"></h3>

</form>

14.<input type="tel">:

For entering a telephone number "tel" input type is used. Browser's don't support tel input validation, use the placeholder attribute to help users in entering correct format phone number.

<form>

<h3>Enter Telephone Number:<input type="tel" placeholder="xx-xxxx-xxxx" required></h3>

</form>

Example 1: