BS Feedback Form bootstrap cognizant handson

BS Feedback Form Bootstrap Cognizant Handson Solution

Bymadwithcode

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 NameIDRequirements
Customer NamecustomerNameTextbox to get the customer name as input with the appropriate bootstrap class
Mobile NumbermobileNumberTextbox to get the customer mobile number as input with the appropriate bootstrap class
EmailemailEmail box to get the customer email address as input with the appropriate bootstrap class
Gendermale (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’.
RemarksremarksTextarea to get the remarks  as input with appropriate bootstrap class
SubscribesubscribeCheckbox to get a subscription acceptance from the customer with appropriate bootstrap class
SubmitsubmitInput 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>

Similar Posts