Lesson: 06 | Registration Form

User Story
HTML
Java Script
Expectation
Video

User Story

As a new user, I want to fill out a registration form with my name, email, and password, so that I can create an account and access the application.

HTML

<template>
  <lightning-card title="Registration Form">
    <div class="slds-grid slds-wrap">
      <div class="slds-col slds-size_1-of-2">
        <lightning-input label="Name" value={name} onchange={handleNameChange}></lightning-input>
      </div>
      <div class="slds-col slds-size_1-of-2">
        <lightning-input type="email" label="Email" value={email} onchange={handleEmailChange}></lightning-input>
      </div>
      <div class="slds-col slds-size_1-of-2">
        <lightning-input type="password" label="Password" value={password} onchange={handlePasswordChange}></lightning-input>
      </div>
      <div class="slds-col slds-size_1-of-2">
        <lightning-button label="Register" variant="brand" onclick={handleRegister}></lightning-button>
      </div>
    </div>
  </lightning-card>
</template>

Java Script

import { LightningElement, track } from 'lwc';

export default class RegistrationForm extends LightningElement {
  @track name = '';
  @track email = '';
  @track password = '';

  handleNameChange(event) {
    this.name = event.target.value;
  }

  handleEmailChange(event) {
    this.email = event.target.value;
  }

  handlePasswordChange(event) {
    this.password = event.target.value;
  }

  handleRegister() {
    console.log('Registration submitted!');
  }
}