Traditionally, the team ‘form’ has referred to a printed document that contains spaces for us to fill in the information. HTML borrows the concept of a form to refer to different elements that allow us to collect information from visitors to our site. Whether we are adding a simple search box to our website or we need to create more complicated insurance applications, HTML forms give us a set of elements to collect data from our users. In this post we will learn:
- How to create a form on our website
- The different tools for collecting data
- New HTML5 form controls
The best-known form on the web is probably the search box that sits right in the middle of google’s homepage. In addition to enabling users to search, forms also allow users to perform other functions online, and when signing up for newsletters or mailing lists.
How Forms Work?
An HTML form on a web page allows users to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product or can be used to retrieve search results from a search engine.
A form may have several form controls, each gathering different information. The server needs to know which piece of inputted data corresponds with which form element. Forms are enclosed in the HTML <form> element. This element specifies the communication endpoint the data entered into the form should be submitted to, and the method of submitting the data, GET or POST.
Forms can be made up of standard graphical user interface elements:
<text>- a simple text box that allows input of a single line of text.
<email> – a type of <text> that requires a partially validated email address.
<number> – a type of <text> that requires a number.
<password> – similar to <text>, it is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *)
<radio> – a raio button
<file> – a file select control for uploading a file
<reset> – a reset button that, when activated, tells the browser to restore the values to their initial values
<submit> – a button that tells the browser to take action on the form (typically to send it to a server)
<textarea> – much like the <text> input field except a <textarea> allows for multiple rows of data to be shown and enetered.
<select> – a drop-down list that displays a list of items a user can select from.