HTML Form

Code changes

Chapter Objectives

Create HTML forms
Learn how to structure HTML forms in Angular components.
Style form elements
Apply CSS styles to make forms visually appealing and user-friendly.
Add form validation
Implement basic form validation using HTML5 attributes.

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

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.

Modify the file src/app/task-form/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've 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.