An HTML form is used to collect user input. It is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. It is required when you want to collect some data from the site visitor.
HTML Forms are used when you want to create a simple email signup, a moderately complex checkout and payment page, or a richly interactive web application.
The user input is most often sent to a server for processing. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. The back-end application (PHP) will perform required processing on the passed data based on defined business logic inside the application.
The <form> element is used to create an HTML form. It does not actually create form fields, but is used as a parent container to hold form fields such as <input> and <textarea> elements. It is block level element. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>Input Element in HTML Forms
The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. Various user input fields can be created such as text field, check box, password field, radio button, submit button etc.
HTML TextField Control
The type=”text” attribute of input tag creates text field control also known as single line text field control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc. Text Field input controls are created using the “input” element with a type attribute having value as “text”. If you will omit ‘name’ attribute then the text filed input will not be submitted to server.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML TextField Control</title>
</head>
<body>
<form>
First Name: <input type="text" name="firstname" /> <br />
Last Name: <input type="text" name="lastname" /> <br />
</form>
</body>
</html>
We will learn about all HTML form elements in next chapter.