BS Feedback Form Bootstrap Cognizant Handson Solution
Create a web page ‘feedback.html’ which should be designed to get some feedback information from the user.
Page Requirements:
Design a web page with the following components.
Component Name | ID | Requirements |
Customer Name | customerName | Textbox to get the customer name as input with the appropriate bootstrap class |
Mobile Number | mobileNumber | Textbox to get the customer mobile number as input with the appropriate bootstrap class |
Email box to get the customer email address as input with the appropriate bootstrap class | ||
Gender | male (male component) & female (female component) | Radio buttons to get the customer gender as input with the appropriate bootstrap class.Set the options as : “Male” and “Female” ; and the component values as ‘male’ and ‘female’. Set the name attributes of the components as : ‘gender’. |
Remarks | remarks | Textarea to get the remarks as input with appropriate bootstrap class |
Subscribe | subscribe | Checkbox to get a subscription acceptance from the customer with appropriate bootstrap class |
Submit | submit | Input type should be ‘submit’ and with appropriate Bootstrap classes for the basic button, success button, and large button respectively. |
Note:
- Do not delete the provided code template. Fill your code only in the given place.
- Each component should have its ‘id’ attribute as per the requirement.
- The entire form should be inside a container and group all the form elements using Bootstrap form group class.
feedback.html
<!DOCTYPE html> <!-- DO NOT DELETE THE GIVEN TEMPLATE. FILL YOUR CODE WHEREVER NECESSARY --> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Feedback form</h2> <form action="#" class="form-group" onsubmit="return false"> <div> <label for="customerName">Customer Name:</label> <!-- fill your code for customerName --> <input type="text" name="customerName" class="form-control" id="customerName" value="" /> </div> <div> <label for="mobileNumber">Mobile Number:</label> <!-- fill your code for mobileNumber --> <input type="number" name="mobileNumber" class="form-control" id="mobileNumber" value="" /> </div> <div> <label for="email">Email:</label> <!-- fill your code for email --> <input type="email" name="email" class="form-control" id="email" value="" /> </div> <div class="form-check"> <label for="gender">Gender:</label> <!-- fill your code for gender - male --> <label class="form-check-label " > Male </label> <input type="radio" name="male" class="form-check-input" id="male" value="male" /> <!-- fill your code for gender - female --> <label class="form-check-label">Female </label> <input type="radio" name="female" class="form-check-input" id="female" value="female"/> </div> <div> <label for="remarks">Remarks:</label> <!-- fill your code for remarks --> <textarea class="form-control" id="remarks" rows="3"></textarea> </div> <div> <!-- fill your code for subscribe --> <label> Accept to subscribe for newsletters through email</label> <input type="checkbox" name="subscribe" class="form-check-input" id="subscribe" /> </div> <div> <!-- fill your code for submit --> <input type="submit" id="submit" class="btn btn-success btn-lg"> </div> </form> </div> </body> </html>