JS Form Validation with Inbuilt Bootstrap Attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<title> REGISTRATION FORM</title>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center text-success">BOOTSTRAP FORM USING INBUILT VALIDATION</h1>
<div class="col-md-6 m-auto" >
<form name="Registrationform" class="form-inline was-validated" action="" method="post">
<div class="form-group mt-5">
<label for="NAME">Name</label>
<input type="text" name="Name" class="form-control" required>
</div>
<div class="form-group mt-3">
<label for="EMAIL">Email</label>
<input type="email" name="Email" class="form-control" required>
</div>
<div class="form-group mt-3">
<label for="Password">Password</label>
<input type="password" name="Password" class="form-control" required>
</div>
<div class="form-group mt-3">
<label for="phonenumber">Phone Number</label>
<input type="number" name="Phonenumber" class="form-control" required>
</div>
<div class="form-group mt-3">
<label for="city">City</label>
</div>
<select class="form-select mt-3">
<option selected>Please select your City</option>
<option>Ludhiana</option>
<option>Jalandhar</option>
<option>Phagwara</option>
</select>
<div class="form-group mt-3" >
<label for="gender">Gender</label>
</div>
<div class="form-check-inline">
<input type="radio" name="gender" class="form-check-input" required>
<label for="male">Male</label>
</div>
<div class="form-check-inline">
<input type="radio" name="gender" class="form-check-input" >
<label for="gender">Female</label>
</div>
<div class="form-group mt-3">
<label for="hobby">HOBBY</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox" checked>
<label for="cricket">Cricket</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox">
<label for="cricket">Movies</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox">
<label for="cricket">Football</label>
</div>
<div class="form-group mt-3">
<label for="dob">DOB</label>
</div>
<div class="form-group">
<input class="form-control" type="date" name="dob">
</div>
<div class="form-group text-center mt-3" >
<button type="submit" class="btn btn-success btn-lg px-5 border-0 rounded-0 " value="SUBMIT" >SUBMIT</button>
</div>
</form>
</div></div></div>
</body>
</html>
