Basic HTML5 Form and Types of Input Elements

A form is combination of controls, such as text box, drop-down list, check box and radio button that enable the user to enter the information. Your can create these controls by using the INPUT element.To do this, you need to set the type attribute of the INPUT element to the name of the control.For example <INPUT type=”text”> creates a control of text box type.Following are the types of the INPUT element that are newly introduced in HTML5.

  • TEXT & SEARCH
  • TEL
  • URL
  • EMAIL
  • PASSWORD
  • DATETIME-LOCAL
  • DATE-TIME, DATE, TIME, WEEK AND MONTH
  • NUMBER AND RANGE
  • FILE
  • HIDDEN
  • CHECKBOX
  • RADIO
  • SUBMIT
  • RESET

1.CREATING SAMPLE FORM

A form is created using the FORM elements in a Webpage.Let’s create a webpage named as “form.html” to understand how a form is created.

sample example “form.html”

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM </TITLE>
</HEAD>
<BODY>
<FORM>
This is the sample data addend in FORM TAG.
</FORM>
</BODY>
</HTML>

Here we have created HTML document using the various elements, such as HTML,BODY,HEAD etc.The FORM tag is used for display the form in HTML document.

The output of the “form.html”

form structure by pikesteward.in
html5 form structure

2.Creating Form with <INPUT> Element

Input element used to display the text boxes on the form.These fields are used to provide input from the users.Let’s create a web page named “input.html” to understand how to use the INPUT element.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>iNPUT</TITLE>
</HEAD>
<BODY>
<FORM>
ENTER THE FIRST NAME :<INPUT></BR>
ENTER THE SECOND NAME:<INPUT>
</FORM>
</BODY>
</HTML>

The value of the type attribute of the INPUT element is set to text.Which displays a control on the webpage.Output of “input.html” is looking like this

input element tutorial from pikesteward
input element in html5

By using the input element we can add the following fields on a form

  1. Text field
  2. Password field
  3. Hidden field
  4. Checkbox field
  5. Radio Button field
  6. Submit Button field
  7. Reset Button field

Working with Text FieldĀ 

We can add text field on a form using the type attrivute of the INPUT element by specifying the value of the type attribute to text.Now create a webpage named “textname.html” to display the text field using the type attribute.

 

<!doctype html>
<html>
<head>
<title>text name</title>
</head>
<body>
<form>
Enter the first name:<input type="text" name="username">
</form>
</body>
</html>

here, we have added an INPUT element and set the type attribute to text and the name attribute to username.Output of the “textname.html” is

 

 

textname file created by pikesteward

we can also fix the length of your text field using the “maxlength” attribute of the INPUT element.Now create a webpage named maxlength.html to set the maximum length of a text field.

<!doctype html>
<html>
<head>
<title> fix max-length </title>
</head>
<body>
<form>
Enter your 2 digit code number: <input type="text" name="username" size="2" maxlength="2">
</form>
</body>
</html>

Here, we have defined the maxlength attribute of the INPUT element to 2.This implies that you can enter only two-digit number in the text field.The output of “maxlength.html” is

form maxlength is created by pikesteward

here, we can also set the default value of the text field, which is to be displayed when the Web page needs.using the value of attribute of the INPUT element.The user has to overwrite the default value and enter user value.now create a Webpage named “textvalues.html” to understand how to set the value attribute.The below given code is for setting the value attribute in the “textvalue.html” file.

<!DOCTYPE HTML>
<html>
<head>
<title> text value</title>
</head>
<body>
<form>
Enter four digit code number : <input type="text" name="username" size="4" maxlength="4" value="0000">
</form>
</body>
</html>

We have set the value of the text field to 0000, which implies that when the form is included the default value displayed on the control is 0000.The output of the “textvalue.html’ is

textvalue code created by pikesteward


WORKING with PASSWORD FIELD

Password field is used in a situation when you need to secure the text entered in the field. we can add the password field in a form by sitting the type attribute of the INPUT element to password. Now we can create a sample webpage named “psw.html” to understand how to create a password field.

<!DOCTYPE HTML>
<html>
<head>
<title>password</title>
</head>
<body>
<form>
Enter the password : <input type="password">
</form>
</body>
</html>

We have to set the value of the type attribute to password.This adds a password field on the Webpage.The output of the “password.html” is

password code created by pikesteward

The charecters entered in the password field are reflected as dots.The attributes of the INPUT element that further specifies the features of password controls are name,size,maxlength and value.

We can use the name attribute to specify the name for the password field.now we can create a Webpage named pwdname.html to understand how to set the name attribute.

<!DOCTYPE HTML>
<html>
<head>
<title>password name attribute </title>
</head>
<body>
<form>
Enter The password : <input type="password" name="password">
</form>
</body>
</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *