This chapter will conclude the section on HTML by covering forms, divs and spans, and element identifiers. This will then show you how to construct a website structure using HTML.
Forms are everywhere on the web, from ‘contact us’, to payment information forms and signing up to mailing lists, they are a fundamental part of web design. Forms allow your users to reach out and make contact with you, which is typically one of the key goals of any website: user engagement. Forms are useful for gathering information from your users. A common goal of a form is obtain your users’ email address so that you can target them with email alerts about your website. Forms are a fantastic way to encourage communication from your users, whether it be for collecting feedback or simply offering users the opportunity to ‘get in touch’ with enquiries, there are few better options for adding a communication method to your website than through a web form, and they are actually fairly easy to set up. First, let’s take a closer look at how they work.
Forms can be separated into two parts. The first is the form itself, which contains the fields, buttons, dropdowns, text boxes and radio buttons. The second is the part that contains the logic, or the script, which will take the information submitted, perform an action on it and return a result. This script is usually carried out on the server and, as such, is written using a server-side scripting language such as PHP. For the purpose of this book, we will be performing our form action right in the browser.
Forms are created using the <form> element, which wraps around our form content, which will be made up of, but not limited to, buttons and input fields. We can also include other elements, such as heading tags and paragraphs inside our <form> tag without any issues. It is important to note that you cannot nest a form inside another form as this will break the form’s functionality.
The two most common attributes that are used on the <form> element are the method and action attributes. Let’s break down what these are responsible for …
The action element is where we tell the browser what we want the form to do when submitted by the end user. The value should provide the location of the script that is to be run on submit. Typically you might see a value in here like so: