HTML
Intermediate
60 mins
Teacher/Student led
125 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

Basics of Form Creation

In this step-by-step lesson, you'll learn the basics of form creation in HTML. Starting with an introduction to HTML forms, you'll progress to creating a form container, adding input fields, labels, a textarea, and a submit button. Finally, you'll review and experiment with your contact form. Happy coding!
Learning Goals Learning Outcomes Teacher Notes

1 - Introduction to HTML Forms

HTML forms are used to collect user inputs on a website. They are created using the <form> element, which acts as a container for other form elements like <input>, <label></label>, and <button></button>.

In this lesson, you'll learn how to create a simple contact form using these elements. The final code will be a contact form that includes fields for the user's name, email, and a message. Let's get started!

2 - Create the Form Container

First, let's create the form container using the <form> element. Add the following code:

<form></form>
When you run this code you won't see anything as the <form> element isn't visible. The input fields that we will put inside it are.

3 - Add Input Fields

In this step, we will add input fields for the user's name and email. Input fields are used to collect information from the user. The type attribute specifies the type of input, such as text or email, and the id attribute is used to identify the input when the form is submitted. The placeholder attribute provides a hint to the user about what they should enter in the input field.

Inside the <form> element, add the following code:

<form>
	<input type="text" id="txtName" placeholder="Your name"><br>
    <input type="email" id="txtEmail" placeholder="Your email">
</form>

Here is a list of some common input types:

Type Description
text Used for single-line text input
email Used for email addresses
password Used for password input, hides the characters
number Used for numeric input
date Used for date input
checkbox Used for checkboxes, allows multiple selections
radio Used for radio buttons, allows single selection

4 - Add Labels

Labels are important for accessibility and usability. They describe the purpose of the input fields and make it easier for users to understand what information is required. The <label> element is used to associate a text label with a specific form control, such as an input field, by using the for attribute. The value of the for attribute should match the id attribute of the associated form control.

Add the following code inside the <form> element, before each input field:

<form>
	<label for="txtName">Name:</label><br> 
    <input type="text" id="txtName" placeholder="Your name"><br>
    <label for="txtEmail">Email:</label><br> 
    <input type="email" id="txtEmail" placeholder="Your email">
</form>
When you run this code, try clicking on the text in one of the labels. If you have coded it correctly it will focus on it's input field, ready to type.

5 - Add a Textarea

In this step, we will add a textarea element to our form. A textarea is a multi-line text input field that allows users to enter larger amounts of text, such as a message or a comment. The rows attribute specifies the number of visible text lines, and the cols attribute specifies the number of visible text columns.

Now, let's add a textarea for users to enter their message. Add the following code inside the <form> element, after the email input field:

<label for="txtMessage">Message:</label><br><textarea id="txtMessage" rows="4" cols="50"></textarea>
Try changing the values of rows and cols to see the effect it has.

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more