Building a Form in SPA Frameworks

Forms play a critical role in any application by letting users provide information and sending it to the system. In this section, we'll build forms using different Single Page Application (SPA) frameworks.

Designing Form with React

If you plan to use React for your SPA, you can take a look at this simple form developed with React,

import React, { useState } from 'react';

function GetWhether() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission here
    console.log(inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter your location"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Let's explain the code part by part,

Lines	Explanation
const [inputValue, setInputValue] = useState('');	Handles user input
const handleSubmit = (e) => { e.preventDefault(); // Handle form submission here console.log(inputValue); };	This is an action event on user input. Here e.preventDefault(); prevents all system default
return ( <form onSubmit={handleSubmit}> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="Enter your location" /> <button type="submit">Submit</button> </form> );	A form containing one input field and a submit button.

Designing Form with Angular

With Angular, you can design a form like the one below,

<!-- myform.component.html -->
<form (ngSubmit)="onSubmit()">
  <input type="text" [(ngModel)]="inputValue" placeholder="Enter your location" name="inputField" />
  <button type="submit">Submit</button>
</form>

// myform.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-myform',
  templateUrl: './myform.component.html',
  styleUrls: ['./myform.component.css']
})
export class SimpleFormComponent {
  inputValue: string = '';

  onSubmit() {
    // Handle form submission here
    console.log(this.inputValue);
  }
}

Let's break the code and see how it works,

Lines	Explanation
@Component({ selector: 'app-myform', templateUrl: './myform.component.html', styleUrls: ['./myform.component.css'] })	Initializing the resources
export class SimpleFormComponent { inputValue: string = ''; onSubmit() { // Handle form submission here console.log(this.inputValue); } }	Handles the user input. Here the inputValue stores the user input and the method onSubmit() processes the user input

Designing Form with Vue

Here is a simple form designed in Vue.

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="inputValue" type="text" placeholder="Enter your location" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    onSubmit() {
      // Handle form submission here
      console.log(this.inputValue);
    }
  }
};
</script>

Check the explanation table to understand how the code works.

Lines	Explanation
data() { return { inputValue: '' }; },	Handles user input
methods: { onSubmit() { // Handle form submission here console.log(this.inputValue); } }	the method onSubmit() processes the user input