Create Basic HTML Forms

Introduction

In this lab, we will learn how to create a basic HTML form using the <form> tag and different form elements.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") html/FormsandInputGroup -.-> html/form_group("`Grouping Form Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70763{{"`HTML Input Form`"}} html/head_elems -.-> lab-70763{{"`HTML Input Form`"}} html/text_head -.-> lab-70763{{"`HTML Input Form`"}} html/para_br -.-> lab-70763{{"`HTML Input Form`"}} html/forms -.-> lab-70763{{"`HTML Input Form`"}} html/form_valid -.-> lab-70763{{"`HTML Input Form`"}} html/form_group -.-> lab-70763{{"`HTML Input Form`"}} end

Setting up the HTML Document

We will start by creating a basic HTML document with the basic structure:

<!doctype html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body></body>
</html>

Creating a Basic Form

We will now create a basic HTML form with an input field and a submit button. Add the following code inside the body tag:

<h1>HTML Form Example</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

In the code above, we have a <h1> tag which serves as the title for our form. We then have a <form> tag and inside it, we have a <label> tag and an <input> tag. The for attribute value of the <label> tag should match with the id attribute in the <input> tag. We also have a <br> tag to add a line break. Finally, we have an <input> tag with a type attribute as "submit".

Adding Form Elements

We can add various form elements by using different types of input fields in the form. Let's add a dropdown menu and checkboxes to our form. Replace the <form> tag code with the following code:

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gender:</label>
  <select name="gender" id="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coding</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Drawing</label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

In the code above, we have added a <select> tag for the gender field with three options using the <option> tag. We also added three checkboxes with different labels for hobbies.

Form Attributes

We can add attributes to the <form> tag to customize the form behavior. Let's add the action and method attributes to our form. Replace the <form> tag code with the following code:

<form action="submit-form.php" method="post"></form>

In the code above, we have added action attribute with a value of "submit-form.php" and method attribute with a value of "post". This tells the browser to submit the form data to the "submit-form.php" file using the HTTP method POST.

Form Validation

We can use the required attribute to make certain fields mandatory. Add the required attribute to the name field <input> tag.

<input type="text" name="name" id="name" required />

Form Accessibility

We can also add accessibility features to our form by using the <fieldset> and <legend> tags. Wrap the gender field with the following code:

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

This groups the gender field and adds a legend for the group.

Adding labels

Finally, we can also add labels to our checkboxes by using the <label> tag. Wrap the checkbox and label for each hobby with the following code:

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

This associates each label with the respective checkbox.

Summary

In this lab, we learned how to create a basic HTML form using the <form> tag and different form elements like input fields, dropdown menus, and checkboxes. We also learned how to add form attributes like method, action, and required, and how to add accessibility features using the <fieldset> and <legend> tags.

HTML Input Form