HTML Design Form

HTMLWeb DevelopmentFront End Technology

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

The <form> tag is used in HTML to create a form and various form element like input, textarea, etc is included in it −

<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

To create a form, you need to add fields like text, password, field for date-of-birth, telephone, email, buttons, etc. All these we can add with <input> elements −

Sr.NoType & Description
1text
A free-form text field, nominally free of line breaks.
2password
A free-form text field for sensitive information, nominally free of line breaks.
3checkbox
A set of zero or more values from a predefined list.
4radio
An enumerated value.
5submit
A free form of button initiates form submission.
6file
An arbitrary file with a MIME type and optionally a file name.
7image
A coordinate, relative to a particular image's size, with the extra semantic that it must be the last value selected and initiates form submission.
8hidden
An arbitrary string that is not normally displayed to the user.
9select
An enumerated value, much like the radio type.
10textarea
A free-form text field, nominally with no line break restrictions..
11button
A free form of button which can initiates any event related to button.

However, HTML5 introduced more options for the <input> element −

Sr.NoType & Description
1datetime
A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
2datetime-local
A date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
3date
A date (year, month, day) encoded according to ISO 8601.
4month
A date consisting of a year and a month encoded according to ISO 8601.
5week
A date consisting of a year and a week number encoded according to ISO 8601.
6time
A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
7number
It accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
8range
The range type is used for input fields that should contain a value from a range of numbers.
9email
It accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
10url
It accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

Example

Let us see an example now to create a form −

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..."><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob"><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..."><br><br>
<button type="submit" value="Submit">Submit</button>
</form>
/body>
</html>

Output

This will produce the following output −

Example

Now, we will see another example wherein we are creating a form, with one of the field as a checkbox −

 Live Demo

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
<button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

This will produce the following output −

raja
Published on 17-Sep-2019 12:37:50
Advertisements