Scribd
Upload
57 views

Lab Sheet-5

The document describes creating an RSVP form using Bootstrap's form controls. It provides instructions to create a form with fields for first name, last name, email, phone number, country, state, zip code, options to select whether the user will attend or not and how many guests they will bring. The form uses Bootstrap classes to style and lay out the form controls and adds validation to required fields.

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

Lab Sheet-5

The document describes creating an RSVP form using Bootstrap's form controls. It provides instructions to create a form with fields for first name, last name, email, phone number, country, state, zip code, options to select whether the user will attend or not and how many guests they will bring. The form uses Bootstrap classes to style and lay out the form controls and adds validation to required fields.

Uploaded by

sowmiya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Course Code: CSE3150

Course Title: Front End Full Stack Development


Lab sheet 5 - Module 2
Problem Statement:
Create a RSVP Form using the bootstrap’s form controls. The form includes fields are First name, Last
name, email, phone number, country, state, Zip, submit and other information from your guests for
event purpose. Each required form group has a validation state that can be triggered by attempting to
submit the form without completing it.
Note: Bootstrap’s form controls expand on our Rebooted form styles with classes. Make use of classes
to opt into their customized displays for a more consistent rendering across browsers and devices. Be
sure to use an appropriate type attribute on all inputs

Solution

<!doctype html>

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Form With Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6
gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>

</head>
<body class="bg-info">
<style>
.container-sm {
max-width: 700px;
}
</style>
<div class="container-sm">
<main>
<div class="py-5 text-center">
<h1>RSVP form</h1>
<p class="lead">Using Bootstrap to create a RSVP form</p>
</div>
<div>
<div class="my-4">
<form class="needs-validation" novalidate>
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">Valid first name is required.</div>
</div>

<div class="col-sm-6">
<label for="lastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
<div class="col-sm-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]"
required>
<div class="invalid-feedback">
Please enter a valid email address.
</div>
</div>
<div class="col-sm-6">
<label for="phone" class="form-label">Phone Number <span
class="text-muted"></span></label>
<input type="tel" class="form-control" id="phone" pattern="[0-9]{10,12}" required>
<div class="invalid-feedback">
Please enter a valid phone number.
</div>
</div>
<div class="col-md-5">
<label for="country" class="form-label">Country</label>
<select class="form-select" id="country" required>
<option value="">Choose...</option>
<option>India</option>
</select>
<div class="invalid-feedback">
Please select a valid country.
</div>
</div>

<div class="col-md-4">
<label for="state" class="form-label">State</label>
<select class="form-select" id="state" required>
<option value="">Choose...</option>
<option>Karnataka</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>

<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
Zip code required.
</div>
</div>
<div class="form-check">
<h3>Will you attend</h3>
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
No
</label>
</div>
<div class="col-mb-3">
<label for="plus">And with how many guests?</label><br>
<select class="form-select" aria-label="Default select example">
<option value="1">Zero</option>
<option value="2">One</option>
<option value="3">Two</option>
<option value="4">Three</option>
</select>
</div>
<div class="form-group">
<label for="textarea" class="form-label">Additional Comments</label>
<textarea class="form-control" id="textarea" rows="8"></textarea>
</div>
<hr class="my-4">
<button class="w-100 btn btn-primary btn-lg" type="submit">Submit</button>
</form>
</div>
</div>
</main>
</div>

</body>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')

// Loop over them and prevent submission


Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}

form.classList.add('was-validated')
}, false)
})
})()
</script>
</html>
Output:

You might also like