What’s special about HTML Form?
For a customer-oriented business, listening and taking actions on the grievances of customers is an ingredient for success. That’s where HTML forms come in, and as a web developer, having a mastery of HTML forms is important.
Look through the contact us page of most websites, they are created using HTML forms. These forms are used in requesting names, email, and other contact information alongside the message.
HTML Forms contain special controls such as input boxes, radio buttons, checkboxes, and submit buttons. The controls are modified by the user in order to complete an HTML form, before submitting the form to a server for sorting.
Using the <form> tag, a HTML form is created.
Types of Controls in HTML Forms
- Input Element
Of all the elements in HTML form, this is most used. With this, you can easily specify user input fields, this is strictly determined by the type attribute. The input elements could be text filed, submit button, reset button, file select box, password field, and even other HTML5 input types. From all the input types, the most common are as follows;
1. Text Fields
These are one-line text areas for inputting text. To create this; the <input> elements are used while the attribute has a text value. Here’s an example of single-line text input for passwords
The output will love like the highlighted part of the image above. This could also be used for the Username one-line input.
2. Radio Buttons
There are instances where a user will have to select an option from a set of options. While this is created using <input> element with a type attribute with a value of radio.
Below is a radio button example which used in obtaining user’s political affiliation:
Radio buttons are also used in creating gender forms that is used in choosing either male or female also.
3. Checkboxes on HTML Forms
The difference between these and radio buttons is the ability of users to choose more than a single option. While <input> is used in creating it, the type attribute is valued at checkbox.
4. File Select Box
In addition to other information, a user may be required to search for a local file and upload it as an attachment. Using Mozilla Firefox and Google Chrome, the browser render the file select box as a local File Browse button. This allows the user to upload files from the hard drives. Set the type attribute to file.
There are times when a user will have to enter more than one line of text, that’s where the multi-line text control can be created using the <textarea> element.
6. Select Boxes
This is a dropdown list with numerous options that allow users to select from the list. The select box is made using the <select> and <option> elements. The <option> element in the <select> element define the list. Here’s an example of this works;
7. Submit and Reset Button
While the submit button sends the data to the server, the reset button returns the form control to default values. With the submit button, data is sent to the specified file in order to process the submitted data.