HTML Form

Chapter Objectives

• ✔️
  Create an HTML Form

  Learn how to create an HTML form using the <form> tag.

Form Structure

To create a form in HTML, you need to use the <form> tag.

The <form> tag is used to create an HTML form for user input.

The form can contain input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.

The form to create a task will have the following fields:

• Task title
• Task description

Note

The Task interface includes 2 additional properties: id and createdAt. Their values will be generated later when the form is submitted by the application and not by the user.

The form also includes a submit button to create the new task based on the form values.

🎓 Instructions

1. Modify the file src/app/task-form/task-form.component.html.

   task-form.component.html

   <form>
     <label for="title" class="form-label">Title</label>
     <input type="text" id="title" name="title" class="form-control" />
   
     <label for="description" class="form-label">Description</label>
     <textarea
       id="description"
       name="description"
       class="form-control"
     ></textarea>
   
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>

✔️ What you have learned

In this chapter, you learned how to create a basic HTML form. After this purely HTML interlude, you will see in the next steps how to bind this form in Angular.