Form not working when it's inside of a 'section'

So I'm building the portfolio with Angular dividing the different parts with sections.

The contact section looks like this:

<section>
  <form class="mat-elevation-z4 p-5" (click)="sendMessage()">
    <input type="text" placeholder="Name" class="name"/>
    <input type="text" placeholder="Email" class="email"/>
    <input type="text" placeholder="Write your message here" class="message"/>
    <button>Click</button>
  </form>
</section>

When the form is wrapped in the section, the inputs act like they're readonly. If I remove the section tag, it works perfectly.

How can I do it so that the form is wrapped in the section tag?