Render html elements and forms

In this tutorial

  1. Render basic HTML elements
  2. Create and display a login form
  3. Handle POST requests
  4. Import HTML from other files and serve them using Express.js


Setup Express

Start by importing express and creating an app instance:

import express from "express";
const app = express();


Render Basic Element on Home Page

app.get("/", (req, resp) => {
resp.send("<h1>Home Page</h1>");
});

This will render a simple Home Page when you visit http://localhost:3200/.


Make and Render a Login Form

app.get("/login", (req, resp) => {
resp.send(`<form action="/submit" method="post">
<input type="text" placeholder="name">
<br/>
<br/>
<input type="password" placeholder="Enter Password">
<br/>
<br/>
<button>Login</button>
</form>`);
});

Visit http://localhost:3200/login to view a basic login form.


Handle POST Request (Form Submission)

app.post("/submit", (req, resp) => {
resp.send(`<h1>Data Sumitted</h1>`);
});

When the form is submitted, this route handles the POST request and returns a success message.


Import HTML Elements From Other Files

Organize our HTML into separate files and import them.

home.js

export default function home() {
return "<h1>Home Page</h1> <a href='/login'>Go to Login</a>";
}


login.js

export default function login() {
return `<form action="/submit" method="post">
<input type="text" placeholder="name">
<br/>
<br/>
<input type="password" placeholder="Enter Password">
<br/>
<br/>
<button>Login</button>
<a href='/'>Go to Home</a>
</form>`;
}


submit.js

export default function submit() {
return "<h1>Data Sumitted</h1> <a href='/'>Go to Home</a>";
}


Final Code — index.js

import home from "./pages/home.js";
import login from "./pages/login.js";
import submit from "./pages/submit.js";

const app = express();

app.get("/", (req, resp) => {
resp.send(home());
});
app.get("/login", (req, resp) => {
resp.send(login());
});

app.post("/submit", (req, resp) => {
resp.send(submit());
});

app.listen(3200, () => {
console.log("Server is running on port 3200");
});
  1. Visit / to see the home page.
  2. Visit /login for the login form.
  3. Submit the form and it will show the confirmation from /submit.