Using forms in a web page is the most effective way to gather relevant data from the user. Forms are how users really interact with the application whether it's a search form, a login screen, or a multipage registration wizard. Forms can have inputs such as name, gender, credit card number, password, images, or upload files into the forms.
In this chapter we will cover the following topics:
- Web forms and their benefits
- The new HTML5
<form>elements - Building a web form
- Guidelines to build a web form
Before we start learning about HTML5 forms, let us understand what a web form is.
Forms on a web page provide an interface where information can be shared between a client and a user more easily and securely in comparison to paper-based forms. They are a collection of various <input> types, such as textbox, radiobutton, and checkbox, which allow users to perform various actions and simplifies decision making.
Forms have always been a fundamental part of the Web. Without them, various web transactions, discussions, and efficient searches would simply not be possible. Web-based forms are supported in most browsers and can be used to give feedback after purchasing a product, retrieve search results from a search engine, contact for any service, and much more.
With a simple example, let us understand what a web form is. Say you once went to a hospital and the receptionist gave you a printed form to fill out. You would have come across many fields that collect information about a patient. Some of them asked you to write the patient's name and address in what looked like a textbox or a text area, and other details such as type of room and so on; you were also asked to choose one or multiple radio buttons or checkboxes from the options. The same concept follows for HTML5 forms. You have to fill out the fields of that form and press a button to send this information to the server, rather than going to the hospital and handing the form over to the receptionist.
Forms in web pages offer plenty of advantages over paper-based forms. Apart from being used to gather data online, web forms offer convenience and speed for both the user and the form owner.
Some advantages of web forms are:
- Online forms help the customers to talk to the companies as they contain digitally stored data and deduce that data to meaningful information
- The form owners can quickly build and distribute the HTML5 interface, targeting a large audience
- The form owner can easily update and modify forms as needed
- The Cascading Style Sheets (CSS) and JavaScript attributes allow authors to customize form controls with specific styles and functions
- Web forms are time saving and cost effective as they require no manpower to gather information
- They provide a visibility for decision making, for example, shopping online on websites such as eBay
- As the data is entered directly by the customer,it can be easily sorted to get the required information
Even if forms have many benefits, building them is not the nicest job and can become a headache as some forms can get very complicated if we talk about validation, error handling, and styling. We either validate or catch the errors using a server-side language or we use JavaScript, or even both. Whichever the case, the web forms can take up a lot of your development time and this can be a problem. With HTML5, however, some of this pain has been taken away by the introduction of the new <form> types, which we can use.
In spite of many enhancements in HTML5, some things are kept the same such as:
- Forms still send the values to the server when the user clicks on the Submit button
- Forms are still enclosed in the
<form>element, as shown in the following code snippet:<form action= "#"> <input type= "text" name= "emailaddress"> <input type= "submit" name= "submit"> </form>
- Form controls are still fully scriptable
However, for the HTML5 forms, there is no need to enclose the <form> controls in the <form> element.