With web forms, you can collect information from users. Web forms can collect anything like name, e-mail address, message, images, files from your computer, etc.
When you fill out a form, the information is sent to the web server. What exactly the web server does with the information is up to the programs running on the server.
In HTML, forms are created with the <form> element. The action attribute tells the form where to go or what to do when the user clicks Submit. For example,
<input type="text" name="emailaddress">
<input type="submit" name="submit">
There are many ways to get input through a form, each with its own specific name or type of input.
text: one-line text input field
textarea: multiple lines text input field
password: password field; The characters in a password field are masked (shown as asterisks or circles)
submit: button for submitting form data to a form-handler; The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute.
reset: button that will reset all form values to their default values
radio: select only one of a limited number of choices
checkbox: select zero or more options of a limited number of choices
file: file with a MIME type and optionally a file name
hidden: String that is not displayed to the user
button: defines a button
HTML5 Input Types
HTML5 added several new input types. New input types that are not supported by older web browsers behave as text input.
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.
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.
date: A date (year, month, day) encoded according to ISO 8601.
month: A date consisting of a year and a month encoded according to ISO 8601.
week: A date consisting of a year and a week number encoded according to ISO 8601.
time: A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number: This accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
range: The range type is used for input fields that should contain a value from a range of numbers.
email: This accepts only email value. This type is used for input fields that should contain an e-mail address.
url: This accepts only URL value. This type is used for input fields that should contain a URL address.
he <select> element defines a drop-down list. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option.
The <fieldset> element is used primarily for layout and accessibility. The <legend> element creates the heading of the form and a box surrounds the inputs in the form. Like <fieldset>, the <legend> element is entirely optional.
The <div> elements used to create each row of inputs. The <label> elements are used to show friendly name of what an input does.
<input id=”username” type=”text” name=”username”>
<label for=”email”>E-mail Address:</label>
<input id=”email” type=”text” name=”email”>
The action of a form points to the server program that will handle the input from the form. It’s where the form sends its data.
The method attribute tells the form how to send the data to the server. There are two primary methods for this - GET and POST. The GET method is appropriate for small forms, whereas the POST method is appropriate for larger forms or ones that need to send a lot of information.
When you use a GET method, the form’s contents are sent as part of the URL.
HTML5 introduced a new attribute called placeholder. This attribute provides a hint to the user of what can be entered in the field.
<input type="text" name="search" placeholder="Search the web" />
HTML5 introduced a new attribute called required which insists to have a value.
<input type="text" name="search" required />