Learning objectives for this lesson can be found here
On many websites, the user can enter data into the website. This is done using a web form, which contains form controls such as text input fields.
In HTML, we create a form using the
form element, and create input fields within it.
HTML provides several form controls for us to use. Every form control must have a label and should have a name.
Form controls don't inherit font styling in some browsers. We can make sure it uses the defined font by using the following CSS.
When we want the user to enter text, we can use a text input field in our form.
We can use
<input type="text"> to create a single-line text input, like in the following example.
However, as a user, what are we supposed to enter here? There is no information to tell us what to enter!
To provide this information, we use a
- Create a
- Add an
- Add a
forattribute with the same
labelto connect it to the input
Now we can see that we are supposed to enter a username!
We can also choose a different
type other than
text to suit our needs, such as
type="password" to show the input text as asterisks.
If you want to view more input types, visit the MDN input types page.
If we want the user to enter multiple lines, we can use
<textarea> instead, like in the following example.
When we want the user to select a single choice out of a list of options, we can use radio inputs in our form.
We can use
<input type="radio"> to create a radio input, like in the following example.
When creating a group of radio inputs, we should give each radio input the same
name so we can indicate that each option is part of the same list.
We can also use the
checked attribute to make an option selected by default.
However, as a user, what does small, medium and large refer to? Even though each radio input has a label, there is no information to tell us what our choice means!
For a group of radio inputs, we can wrap the inputs in a
fieldset with a
legend to add a label to the group of inputs to give it meaning.
Now we can see that we are choosing the size of a cup of coffee!
Fieldsets are rendered with a black border by default. However, it is uncommon nowadays to see this style in forms.
This does not mean we should use another HTML element instead for a different look.
As we learned in lesson 1, we should always use the correct HTML structure, then use CSS afterwards to style our website.
So when we create groups of inputs, we should always wrap them in a
legend, then use CSS to change the style to our desired look.
When we want the user to toggle a choice, or select multiple choices out of a list of options, we can use checkbox inputs.
We can use
<input type="checkbox"> to create a checkbox input, like in the following example.
Like with radio inputs:
- When creating a group of checkboxes, we should give each checkbox the same
nameso we can indicate that each option is part of the same list.
- We should add a label to the group of checkbox inputs using
- We can make checkbox inputs checked by default by using the
When we want the user to select a single choice out of a list of options, we can use a select input in our form.
We can use the
option elements to create a dropdown of values for the user to select, like in the following example.
We can also use the
selected attribute to make an option selected by default.
Both radio and select inputs allow the user to select one choice out of many. When do we know which one to use?
A helpful guideline is if there are only a few options to choose from (less than 5), use radio inputs. If there are lots of options to choose from, use a select input.
Every form control must have a label. Firstly, this is important for users to see what they should enter into the form. Secondly, there are visually-impaired users that use screen readers to interact with websites. When screen reader users navigate to a form control, the screen reader reads out the label so the user can understand what to enter into the form. Without a label, the screen reader user does not get a description of what they are supposed to enter.
There are two ways to associate a
label with an
The first way is by connecting the
id as we have seen.
This is the preferred way as it is more explicit.
The second way is by wrapping the
input within the
It is also important that every group of radio and checkbox inputs is wrapped in a
fieldset with a
legend, which we've seen in the radio input fields section.
Again, when screen reader users navigate to this group of inputs, they will understand what the website is asking them to choose.
Another feature of labels is that the user can click on the label to activate the form control. This provides a larger clickable area to select the form control, and can be beneficial to users who have motor disabilities.
It is quite common to add placeholders to text inputs. Adding only placeholders is bad practise, because it is not guaranteed to be read out by screen readers. Default styles for placeholders can also have poor colour contrast, which means visually-impaired users might not be able to read it.
In summary, always give every form control a label.
We can add attributes to our form controls to prevent the form from being submitted when there are invalid values. The following example demonstrates some of the attributes we can use.
If you want to view more input attributes, visit the MDN input attributes page.
Finally, to let the user submit the form, we can add a
button within the
formwill submit it.
- Pressing the
Enterkey when on a form control within a
formwill also submit it.
To prevent a button from submitting the form, we can add
type="button" to the button.
Websites typically handle form submissions in one of two ways. They will either:
- Send the form to the web server, or
To tell the
form to submit itself to the server, we need to provide it with
actiontells the browser which URL to submit the form to
The form values are converted into key-value pairs and are sent along in the request.
In the following example, if we type in
codeyourfuture into the input field and submit the form,
the browser will send the
q=codeyourfuture key-value pair to
https://duckduckgo.com in the format
Exercise (30 minutes)
Create a form that performs a search on GitHub. It should:
- Make a GET request to
- Have a dropdown to select how the results should be sort by,
sand possible values as
- Have a set of radio options for the sort order, with
oand possible values as
- Have a search input field with
If you want to open the search results in a new tab, you can add
target="_blank" to the
Instead, we can use
Additionally, we can use FormData or the Constraint Validation API to help us when working with forms.
Forms are one way in which users can enter data to a website. However, this also means that malicious users can enter malicious data into your website to try to break it or compromise it! In software, we follow the rule that we never trust user input.
Learning about web security is outside the scope of this module, but if you want an introduction to web security, visit the MDN website security page.
A design framework is a collection of re-usable code snippets which you can use to build a website. It is sometimes called a "design system", "style guide", or "pattern library", and will usually consist of three things:
- Brand guidelines define the appropriate typography, colors and logos to use.
- Components define re-usable code snippets for common requirements, like navigation menus.
- Helpers define additional code tools to construct the site, like layout grids.
The main goals of a design framework are to ensure design consistency and avoid writing the same code twice.
Exercise (15 minutes)
Over the last two weeks, you've been building personal websites as part of your homework. Now we want you to take those websites and apply the knowledge you've learned to make them as good as you can. Some ideas:
- Add Bootstrap 4 to your site and use some of the components.
- Use re-usable class names to reduce your CSS code.
- Validate your HTML code to find and fix problems.
- Add a second page and link to it from your first page.
- Try to style the first article differently so that it stands out from the rest.
By the end, you should have created a repository for your site on GitHub with all the commits you've made.
At the end of each module, we'll have a retrospective. What went right? What went wrong? What can we do better to help you learn? Let's discuss the HTML/CSS module.
Click here to view the coursework for this lesson.
There's much more we haven't covered in this module. Once you're comfortable with CSS, you can read up on the following topics which are used by a variety of software teams.
- BEM — this is a set of rules to improve the naming and structure of a project's CSS
- CSS transitions — this is used to create an animation from one state to another
- CSS animations — this is used to create looping animations
- CSS custom properties — these are variables within CSS
Please spend two minutes reviewing this lesson to help us improve it for the future. This feedback will be shared with volunteers.