Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

advertisement

The Working of new input types in HTML5 - HTML5 Forms

Profile Image

Zia

1 Follower

Jul 17, 2024
-
33 sec read
253
0
0
0
New input types in HTML5❌


The type attribute of the input element determines what kind of input will be displayed in the user's browser. The default input is type="text".

The registration form for the session uses the following input types:

  1. Text
  2. Label
  3. Radio
  4. Textarea
  5. Checkbox
  6. Submit

HTML5 has introduced more data-specific user interface elements. Now, you will see the new input types in detail.


1. E-mail addresses

The type="email" is used for specifying one or more e-mail addresses. To allow multiple addresses in the e-mail field, separate each address with a comma-separator.

In the registration form, the input type has changed from text to email.


<form method="get" action="project.html ">
 <label for=" email_id">Email:</label>
 <input type="email" value="" id="email_id" name="email address"   maxlength="255" />
 <input type="submit" value="submit"/>
</form>

In the code, the <label> tag defines a label for the element on the form. The attribute of <label> tag binds it with the related element, that is the email element, on the form. The value of the form attribute must match the value of the ID attribute assigned to the element.


Also, the email contains two attributes, namely ID and name. The ID attribute specifies a unique ID for the element. The value of the ID attribute should be unique within the document. It can be used as a reference for styles in style sheets or to access elements using the DOM API in JavaScript.


The name attribute specifies a name for the input element. It can be used for referencing elements in JavaScript or form data after a form is submitted to the server for processing. The look of the input is still like a plain text field, but changes are applied behind the scenes. Browsers, such as Firefox, Chrome, and Opera will display a default error message if a user submits the form with some unrecognizable content.


Note - If the browser does not provide support for new input types, such as email, then they are displayed as plain text fields.


2. URL

The type="URL" input element is used for specifying a Web address. The look of the URL field is a normal text field.


<label for="URL">Enter URL:</label>
<input type="url" value="" id="URL" name="urlname" maxlength="255" />
<input type="submit" value="submit"/>

Browsers, such as Opera, Firefox, and Chrome support validation for the URL input type. While validating the URL, browsers only check for entries with a forward slash (/). For example, a URL such as x:l/mysite. Com will be considered valid, even though X:// is not a real protocol.



3. Telephone Number

The type="tel" input element is used for accepting telephone numbers. As compared to other types, the tel type does not impose a particular pattern. It supports characters, numbers, and special characters except new lines or carriage returns. The reason for not imposing any pattern for tel type is that different countries support various lengths and punctuation in phone numbers. Thus, there cannot be a standard format for them. A user can enforce a pattern for the tel input type by using a placeholder or pattern attribute. A JavaScript code can also be provided for performing client-side validation on the tel input type.


<label for="telno">Telephone Number:</label>
<input type="tel" value="" id="telno" name="telephoneno" maxlength"11" />


4. Number

The input type="number" is used for accepting only number values. The input element displayed for the number type is a spinner box. The user can either type a number or click the up or down arrows to select a number from the spinner box.


<label for="studage">Age:</label>
<input type="number" value="15" id="stud age" name="studentage" min="15" max="45" step="1" />
<input type="submit" value="submit"/>

In the code, the number input type has attributes, such as min and max to specify the minimum and maximum value for the input.



5. Range

The input type="range" is similar to the number type and displays a slider control on the page. The range type is used when the exact value is not required in input. In other words, the value of this type is not accurate. For example, an online survey form asking clients to rate the products may not receive exact values in the ratings.


<label>Range</label>
<input type="range" name="rating" min="1" max="10" />
<input type="submit" value="submit" />

In the code, the range input type contains attributes, such as min, max, step, and value. The min and max attributes are used to specify the minimum and maximum value allowed for a range and are set to 1 and 10 respectively. The step attribute specifies intervals for incrementing the value. The value of the step attribute is 1 by default. The value attribute specifies the default value for the range. The default value is the midpoint of the range specified.



6. Date and Time

HTML5 has introduced several new input types for date and time. The format for all these date and time types is according to ISO standards. At present, only Opera provides support for the date element by displaying a calendar control.


Date

This input type contains only the date in year, month, and day format. The time part is not supported by the data type.

<label for="stdate">Date:</label>
<input type="date" id="stdate" name="startdate" min="2000-01-01"/>
<input type="submit " value="Submit" id="btnSubrnit "></input>

In the code, all data input types have min and max attributes to set the range for the dates. The default value for the date input type is based on browsers. Different browsers take different dates by default. Thus, it is advisable to set the minimum and maximum values for the data type.



Month

The markup type "month" includes only the year and month in input.
Note - The month type is not supported in Firefox, Safari, or Internet Explorer 11 and earlier versions. However, it is supported by the Opera browser.

<label for="month">Month:</label>
<input type="month" id="month" name="" />
<input type="submit" value="submit" />


Week

The input type "week" provides a similar interface as displayed for the date type and selects the entire week.

<label for="week">Week</label>
<input type="week" name="week" />
<input type="submit" value="submit" />


Time

The input type="time" displays a time of day in hours and minutes format (24-hour clock).

<label for="time"></label>
<input type="time" name="time" />
<input type="submit" value="submit" />



DateTime

The input type "datetime" includes the full date and time in the input. The input includes a date part and a time part which is represented by coordinated universal time (UTC). Thus, UTC will be displayed with a 'T' followed by a 'Z'.

<label for="datetime">DateTime</label>
<input type="datetime" name="datetime" />
<input type="submit" value="submit" />


Datetime-local

This input type is similar to the datetime input type, except that the time zone is omitted for input type="datetime-local".



7. Color

HTML5 provides a predefined interface for selecting colors using the input type-"color". The input value from the color input field is a hexadecimal number. For example, #00FF00 represents a hexadecimal RGB color value.

At present, the color input type is supported in Opera browsers and some new smartphones.


<label>Color :</label>
<input type="color" name="mycolor"/>
<input type="submit" value="submit"/>


HTML5 HTML HTML5 Forms working of new input types in html5 new input types types of input in HTML input types in HTML input tag in HTML form HTML

advertisement

Profile Image

Published by: 

1 Follower

Zia

Web Developer | App Developer | Freelancer | Blogger

More From: 
Zia
Figma
What is Figma - Features...

Figma is a UIand UXdesign application. It is a webbasedStop It also ...
Profile Image
Zia
Mar 15, 2024
150
0
0
0
class in dart
Class in Dart Programming

Classes are userdefined data types that describe the behavior and characteristics of ...
Profile Image
Zia
Jun 6, 2024
299
0
0
0
jump statement in dart
Jump Statement in Dart Programming

Jump statements are used to jump from one statement to another statement, ...
Profile Image
Zia
Jun 6, 2024
168
0
0
0
Photo by Kaur Kristjan
Faulty CrowdStrike Update Caused Global...

Photo by Kaur Kristjan On a seemingly ordinary Friday, July 2024, the ...
Profile Image
Zia
Jul 20, 2024
274
0
0
0
Recomended
Inheritence in c#
Inheritance in C#

A programmer does not always have to create a class in a ...
Profile Image
Zia
Apr 14, 2024
120
0
0
0
dart programming language
What is Dart Programming Language

Dart is an opensource programming language developed by Google. Although it can ...
Profile Image
Zia
Jun 3, 2024
461
0
0
0