Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Design Form
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.No | Type & Description |
|---|---|
| 1 | text A free-form text field, nominally free of line breaks. |
| 2 | password A free-form text field for sensitive information, nominally free of line breaks. |
| 3 | checkbox A set of zero or more values from a predefined list. |
| 4 | radio An enumerated value. |
| 5 | submit A free form of button initiates form submission. |
| 6 | file An arbitrary file with a MIME type and optionally a file name. |
| 7 | image 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. |
| 8 | hidden An arbitrary string that is not normally displayed to the user. |
| 9 | select An enumerated value, much like the radio type. |
| 10 | textarea A free-form text field, nominally with no line break restrictions.. |
| 11 | button A free form of button which can initiates any event related to button. |
However, HTML5 introduced more options for the <input> element −
| Sr.No | Type & Description |
|---|---|
| 1 | datetime 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. |
| 2 | datetime-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. |
| 3 | date A date (year, month, day) encoded according to ISO 8601. |
| 4 | month A date consisting of a year and a month encoded according to ISO 8601. |
| 5 | week A date consisting of a year and a week number encoded according to ISO 8601. |
| 6 | time A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601. |
| 7 | number It accepts only numerical value. The step attribute specifies the precision, defaulting to 1. |
| 8 | range The range type is used for input fields that should contain a value from a range of numbers. |
| 9 | email 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. |
| 10 | url 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 −
<!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 −
<!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 −
4K+ Views
