BS Feedback Form cognizant handson

 

BS Feedback Form

Create a web page ‘feedback.html’ which should be designed to get some feedback information from the user.  Snapshot of the webpage is given below:





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

email

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.
SOLUTION:

<!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>

Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.