Scribd
Upload
1 views

Lab Sheet 8-Bootstrap’s form controls

The document outlines the creation of an RSVP form using Bootstrap's form controls, including fields for personal information and event attendance. It provides a complete HTML structure with validation for required fields and custom styles for consistent rendering. The form includes various input types, validation messages, and a submit button to enhance user experience.

Uploaded by

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

Lab Sheet 8-Bootstrap’s form controls

The document outlines the creation of an RSVP form using Bootstrap's form controls, including fields for personal information and event attendance. It provides a complete HTML structure with validation for required fields and custom styles for consistent rendering. The form includes various input types, validation messages, and a submit button to enhance user experience.

Uploaded by

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

Course Code: CSE3150

Course Title: Front End Full Stack Development

P8 Bootstrap’s form controls

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/Jr59b6EGGoI1aFkw7cmDA6j6gD
" 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 lg-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>

You might also like