HTML Forms

Forms are a handy way of making your website more interactive. They can be beneficial for both the visitor of the site, and the web designer. The basic premise behind a form is to collect data from the visitor via user input, and this can be done in a number of ways.

Common uses forms that we see on websites include:

Username and password input to log into an account
Comment sections on social media and forums
File uploads when sharing files via email or storage
Questionnaires, surveys, and multiple choice questions

Information sent via forms is sent to a separate server, and programming languages such as Java and PHP can be used to turn that raw data into something that can be used. In the case of a questionnaire sent out to thousands of recipients, the data can be analysed and statistics can be generated much faster than a human could process it all by hand, and visualisations such as graphs and word clouds can be generated. Information is also sometimes encrypted to ensure safety (e.g. password authentication).

Types of forms

<form>: The <form> element is used around input elements to contain them. The opening tag should contain the action attribute, which should specify an URL of a server that the input will communicate with. The attribute method should then be specified, with either 'get' or 'post' as an attribute. 'Get' is generally used for data such as search engine results and simple retrieval of data, whereas 'post' is more secure, and should always be used when dealing with sensitive data.
<input>: The <input> element is the most common form, and the 'type' attribute is used to specify what type of form will be generated. Common values are 'text', 'textarea', 'password', 'checkbox', 'radio', and 'file'.
<select>: The <select> element is used for drop down boxes along with the <option> element. The 'value' attribute can be assigned a value to specify a particular choice in the drop down list.
<fieldset>: The <fieldset> element, much like the <form> element, is used to contain different forms and controls. It's great for forms that can take up a large amount of space, or to group together a bunch of forms in one place.