HTML Form

Branch

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

Task model

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.

Update the file src/app/task-form/task-form.ts.

 import { Component } from '@angular/core';

 @Component({
   selector: 'app-task-form',
   imports: [],
   template: `
     <form class="flex flex-col gap-2 m-auto">
       <fieldset class="fieldset w-full">
         <legend class="fieldset-legend">Name</legend>
         <input type="text" class="input w-full" placeholder="Type here" />
       </fieldset>

       <fieldset class="fieldset">
         <legend class="fieldset-legend">Description</legend>
         <textarea
           class="textarea w-full h-24"
           placeholder="Description"
         ></textarea>
       </fieldset>

       <button type="submit" class="btn btn-primary">Submit</button>
    </form>
   `,
   styles: ``,
 })
 export class TaskForm {}

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.