Web Development

We are in the process of developing an online permitting application that collects data and allows the client to make payment(s).  I have been tasked with determining what the best option(s)/version(s) are for UI and backend development.
  
Some suggested technologies include .NET 5.0-7.0; .NET core 2.0; .NET framework 4.5.2-4.8; Java 15-16; JavaScript ESMA Script 2020-2022; and VB.NET 15.5-16.9.

I am a novice and am not very familiar with any of these newer technologies.  

Any suggestions for best resources for seeking guidance would be appreciated.  If this is not the proper forum for such a request, please advise.

Thanks.

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./Userform.css";
import axios from "axios";

function Userform() {
  const schema = yup.object().shape({
    name: yup.string().required("Name is required"),
    dobOrAge: yup.string().required("Age is required"),
    sex: yup.string().required("Sex is required"),
    mobile: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Mobile number must be a valid Indian mobile number"
      )
      .nullable(),
    idType: yup.string().required("ID type is required"),
    id: yup.string().when("idType", {
      is: "Aadhar",
      then: yup
        .string()
        .matches(/^\d{12}$/, "Govt Id must be a valid 12-digit numeric string"),
      otherwise: yup
        .string()
        .matches(
          /^[A-Za-z]{5}\d{4}[A-Za-z]{1}$/,
          "Govt Id must be a valid 10-digit alpha-numeric string"
        ),
    }),
    email: yup.string("Email must be a valid email address").nullable(),
    emergencyContactNumber: yup
      .string()
      .matches(
        /^[6-9]\d{9}$/,
        "Emergency Contact Number must be a valid Indian mobile number"
      )
      .nullable(),
    guardianTitle: yup.string().nullable(),
    guardianName: yup.string().nullable(),
    address: yup.string().nullable(),
    country: yup.string().nullable(),
    state: yup.string().nullable(),
    pincode: yup.string().nullable(),
    city: yup.string().nullable(),
    occupation: yup.string().nullable(),
    nationality: yup.string().nullable(),
    religion: yup.string().nullable(),
    maritalStatus: yup.string().nullable(),
    bloodGroup: yup.string().nullable(),
  });

  const resolver = yupResolver(schema);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver,
  });

  const [message, setMessage] = useState(null);

  const onSubmithandler = (data) => {
    console.log(data);
  };

  return (
    <div className="form-container">
      <form onSubmit={handleSubmit(onSubmithandler)}>
        <div>
          <h2 className="form-heading">Personal Details</h2>
          <label className="form-label"> Name: </label>
          <input
            className="form-input"
            type="text"
            placeholder="Enter your full name"
            {...register("name", { required: true })}
          />
          {errors.name && <p className="form-error">{errors.name.message}</p>}
        </div>
         <div>
          <label className="form-label">Sex :</label>
          <input
            className="form-input"
            type="text"
            {...register("sex", { required: true })}
          />
          {errors.sex && <p className="form-error">{errors.sex.message}</p>}
        </div>
        <div>
          <label className="form-label">Mobile:</label>
          <input className="form-input" type="text" {...register("mobile")} />
          {errors.mobile && (
            <p className="form-error">{errors.mobile.message}</p>
          )}
        </div>
        <div>
          <label>
            ID Type:
            <select {...register("idType")}>
              <option value="">Select ID Type</option>
              <option value="Aadhar">Aadhar</option>
              <option value="PAN">PAN</option>
            </select>
            {errors.idType && <p>{errors.idType.message}</p>}
          </label>
          <label>
            Govt Issued ID:
            <input type="text" {...register("id")} />
            {errors.id && <p>{errors.id.message}</p>}
          </label>
        </div>
        <h2 className="form-heading">Contact Details</h2>
        <div>
          <label className="form-label">Email:</label>
          <input className="form-input" type="email" {...register("email")} />
          {errors.email && <p className="form-error">{errors.email.message}</p>}
          <label className="form-label">Emergency contact number:</label>
          <input
            className="form-input"
            type="text"
            {...register("emergencyContactNumber")}
          />
          {errors.emergencyContactNumber && (
            <p className="form-error">
              {errors.emergencyContactNumber.message}
            </p>
          )}
        </div>
        <div>
          <label className="form-label">Guardian Details:</label>
          <select className="form-select" {...register("guardianTitle")}>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
          </select>
          <input
            className="form-input"
            type="text"
            {...register("guardianName")}
          />
          {errors.guardianName && (
            <p className="form-error">{errors.guardianName.message}</p>
          )}
        </div>

        <h2 className="form-heading">Address Details</h2>
        <div>
          <label className="form-label">Address:</label>
          <input className="form-input" type="text" {...register("address")} />
          {errors.address && (
            <p className="form-error">{errors.address.message}</p>
          )}

          <label className="form-label">Country:</label>
          <input className="form-input" type="text" {...register("country")} />
          {errors.country && (
            <p className="form-error">{errors.country.message}</p>
          )}
        </div>

        <div>
          <label className="form-label">State:</label>
          <input className="form-input" type="text" {...register("state")} />
          {errors.state && <p className="form-error">{errors.state.message}</p>}
        </div>
        <div>
          <label className="form-label">Pincode:</label>
          <input className="form-input" type="text" {...register("pincode")} />
          {errors.pincode && (
            <p className="form-error">{errors.pincode.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">City:</label>
          <input className="form-input" type="text" {...register("city")} />
          {errors.city && <p className="form-error">{errors.city.message}</p>}
        </div>

        <h2 className="form-heading">Other Details</h2>
        <div>
          <label className="form-label">Occupation</label>
          <input
            className="form-input"
            type="text"
            {...register("occupation")}
          />
          {errors.occupation && (
            <p className="form-error">{errors.occupation.message}</p>
          )}
        </div>
        <div>
          <label className="form-label">Religion</label>
          <select className="form-select" {...register("religion")}>
            <option value="Hindu">Hindu</option>
            <option value="Muslim">Muslim</option>
            <option value="Christian">Christian</option>
            <option value="Sikh">Sikh</option>
            <option value="Jain">Jain</option>
            <option value="Buddhist">Buddhist</option>
          </select>
        </div>
        <div>
          <label className="form-label">Marital status</label>
          <select className="form-select" {...register("marital")}>
            <option value="Married">Married</option>
            <option value="Unmarried">Unmarried</option>
          </select>
        </div>
        <div>
          <label className="form-label">Blood Group</label>
          <select className="form-select" {...register("blood")}>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="AB">AB</option>
            <option value="O">O</option>
          </select>
        </div>
        <div>
          <label className="form-label">Nationality</label>
          <input
            className="form-input"
            type="text"
            {...register("nationality")}
          />
          {errors.nationality && (
            <p className="form-error">{errors.nationality.message}</p>
          )}
        </div>
        <button type="submit">Submit</button>
        {message && <p>{message}</p>}
      </form>
    </div>
  );
}

export default Userform;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</script>
<style>

body {
	font-family: Arial;
	color: #f9f9ff;
	background-color:#293138;
}

.center-text {
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

</style>
</head>
<body>

<div class="center-text">
	Test
</div>

</body>
</html>