HTML 5 Form

0 95

HTML 5 Form New Features elements input types attributes

in this tutorial we will learn about HTML 5 Form New Features elements input types attributes New form elements New input types New attributes Browser-based validation CSS3 styling techniques Forms API

Introduction to HTML 5 Forms

Among the other features of HTML 5 great enhancement has been in web forms also. A web form in HTML 5 are those sections on the web page that contain special elements known as controls. These controls are check boxes, radio buttons, and text boxes provide a visual interface to the user. When a user provides a data through these controls that will be sent to the server for further processing.in HTML forms use to take input from a user. thus it is very important to create forms with a lot of consideration for usability and accessibility by the web developer.
HTML 5 made an easier for a web developer to create a form by standardizing them with rich form controls .It also provides client-side validations that are now handled natively by the browsers.

New Features in HTML 5 Forms

HTML 5 bring great improvement in web forms related form creation and also for the user interacting with them.HTML5 introduced changes in web form and they are.

  • New form elements
  • New input types
  • New attributes
  • Browser-based validation
  • CSS3 styling techniques
  • Forms API
  • New HTML 5 form elements

HTML5 introduced new form elements related to input in HTML 5 version New form elements list are

Element Description
progress Represents the completion progress of a task on the page.
meter Represents a scale of known range datalist Represents a set of options used with list attribute to make a drop-down control.
output Represents the result of a calculation.

New Input Types

The input element is a data field that allows the user to edit the data on the form. type attribute controls the data type and characteristics of the input element.
New input types supported by HTML5 are:

Type Description
email Represents the completion progress of a task on the page search Represents a scale of the known range .
url Represents a set of options used with list attribute to make a drop-down control .
tel Represents the result of a calculation .
number Represents a numeric value in the input field .
range Represents a numeric value to be selected from a range of numbers .
date Represents a calendar which is shown at every click on the field.
week Represents date in year-week format.
month Represents a value with the year-month format .
time Represents a value in hours and minutes format .
datetime Represents a full date and time input field with a time zone .
datetime-local Represents a full date and time with no time zone .
color Represents a predefined interface for selecting the color .

HTML 5 New Attributes

HTML 5 has introduced new attributes in the new version of HTML 5 that can be used with input and form elements.
Lists the new attributes in HTML5.

Type Description
placeholder Represents a hint that helps users to enter the correct data in the field .
required A Boolean attribute that validates the entry in the field .
multiple A Boolean attribute that allows multiple values to be entered in the field .
autofocus Focuses the input element on page load .
pattern Represents a regular expression for validating the field’s value .
form Allows the elements to reference the form by including the form name .

Browser-based Validation

In earlier versions of HTML, a web developer needs custom JavaScript or libraries to performs validation on the client side browser. These validations ensure that the input fields are checked before the form is submitted to the server for further processing.
In HTML5 new attributes have introduced required and pattern these attributes can be used with input elements to perform Browser-based Validation.
HTML 5 provides advanced validation techniques that can be used with JavaScript to set custom validation rules and messages for the input elements.

CSS Styling Techniques

Form elements can be enhanced by using pseudo-class selectors such as :required :valid and :invalid. Suppose if you want a user while submitting form don’t leave any field blank if a user left blank any field then it shows with an outline. To achieve this, input field with required attribute can be styled using CSS.by applying CSS styles make it’s easier to a user to navigate and complete the form.

Forms API

HTML5 introduced new form JavaScript API for the web form. This API will perform customize validations and processing performed on the web forms. The new form’s API provides new methods, events, and properties to perform complex validations combining fields or calculations.

Events and Methods Description
setCustomValidity (message) Sets the custom error message that is displayed when the form is submitted by the user .
checkValidity() Checks the validity of the e-mail address entered by the user .
oninvalid Allows script to run only when the element is invalid
onforminput Allows script to run when the form gets an input from the user onformchange Represents a regular expression for validating the field’s value .
form Allows script to run when the form changes .

Working with New HTML 5 forms Input Types

The type attribute of the input element determines that what kind of input should be displayed on the user’s browser. type=”text” is a default input type. The registration form in the session is using the following input types:

  • text
  • label
  • radio
  • textarea
  • checkbox
  • submit

label

To define a label for the element on the web form <label> tag used. The for the attribute of <label> tag binds it with the related element. The value of for attribute must match with the value of id attribute assigned to the element.

Text Input

To define a input field in website to get input data from a user <input type=”text”> used.

Radio Button Input

Radio Button used in web form to take a one selected choice in the list <input type=”radio”> used to define radio Button in web form.

The Submit Button

Submit form to the form handler <input type=”submit”> used. Form handler is a server page with the script for processing input form data. The form-handler is specified in the form’s action attribute.

E-mail Addresses

To specify one or more e-mail addresses type=”email” is to be used. In the registration form, the input type is changed from text to email as shown in below example.

URL

To specify a web address the type=”url” input element is used.

Telephone Number

The type=”tel” input element is used for accepting telephone numbers from the web user. A user can enforce a pattern for tel input type by using placeholder or pattern attribute. A JavaScript code can also be provided for performing client-side validation on the tel input type.

Number

type=”number” input allows a web user to enter number values in web form field. The input element displayed for number type is a spinner box. The user can either type a number or click the up or down arrow to select a number in the spinner box.

Range

The range is similar like the number but it has under control on the page. type=”range” will define range input.

Date and Time

HTML 5 has introduced serval new input types for date and time.

Date

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

Time

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

Month

type=”month” will define only the years and month in the input field.

Week

The input type=”week” will define week input

Datetime

type=”datetime input will display full date and time in input.

Datetime-local

type=”datetime-local” input allows a user to select a data and time (no time zone).

Color

HTML5 provides new input type=”color” that is predefined interface for selecting the colors.

Password

To define a input filed for password <input type=”password”> used.

Input checkbox

<input type=”checkbox”> will define a checkbox in your form and checkbox allows a user to select a one or more option for a limited number of options .

Input Type: search

To make a search filed in form <input type=”search”> use.

The Action Attribute

To submit web form Action attribute used to send the form to webserver.by using a submit button we can send our form to the webserver.
Note This tutorial is only for HTML not to teach how server works

The Method Attribute

The Method Attribute will define a method of HTTP (get or set) to be used when submitting a web form.

Why to Use GET?

Get is a default method and it will display your form data in web page address.

Why to Use POST?

If you have sensitive data like password etc then u should use POST method. POST method offers better security if you have a sensitive data to be sent to the webserver and it will not be visible in web page address.

The Name Attribute

If you want user should submit correct input data in input fields then u must have a name attribute in the input field.

Comments

comments

Leave A Reply

Your email address will not be published.