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

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction to HTML Forms
2 Create the Form Container
3 Add Input Fields
4 Add Labels
5 Add a Textarea
6 Add a Submit Button
7 Review and Experiment with Your Contact Form
Quiz

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!

10 points

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.

10 points

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>

<form></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

15 points

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>

<form>
	<input type="text" id="txtName" placeholder="Your name"><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.

15 points

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>

  <form>
  	<label for="txtName">Name:</label><br>
	<input type="text" id="txtName"><br>
  	<label for="txtEmail">Email:</label><br>
  	<input type="email" id="txtEmail"><br>
  	<!-- add new code here -->
</form>

Try changing the values of rows and cols to see the effect it has.

20 points

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.

Get started