Question

Write the complete HTML code to design a "Feedback Form" as shown here, according to the specifications given below:

I. Background Color: The page background should be "Pink".
II. Heading: "Customer Feedback" in the largest heading tag, center-aligned.
III. Form Elements:

• Name: A Text box to accept the user's name.
• Service Rating: Two Radio buttons with labels "Good" and "Bad".
• City: A List box, showing four city names.

Hint:

Everything sits inside the form tag: an input of type text, two inputs of type radio sharing a name, and a select tag with size 4.

Answer 1

Step 1: Plan the page:
The page needs a pink background, a large heading and a form. The form has three controls: a text box, two radio buttons and a list box. All controls must sit between <form> and </form>.

Step 2: Specification I: pink background:
The background colour is set with bgcolor on the body tag.

<body>

Step 3: Specification II: the heading:
The largest heading tag is <h1>. The align attribute set to center puts it in the middle.

<h1>Customer Feedback</h1>

Step 4: Specification III: the name text box:
A text box is an <input> tag with type="text". The label Name: is plain text written before it.

Name: <input type="text" name="name">

Step 5: Specification III: the radio buttons:
A radio button is an <input> tag with type="radio". Both buttons use the same name, here rating, so only one can be chosen at a time. The labels Good and Bad are written after each button.

Service Rating:
<input type="radio" name="rating" value="good"> Good
<input type="radio" name="rating" value="bad"> Bad

Step 6: Specification III: the city list box:
A list is made with <select> and one <option> for each city. The attribute size="4" shows all four cities at once, which makes it a list box. Without size it would be a drop-down.

City: <br>
<select size="4">
<option>Agra</option>
<option>New Delhi</option>
<option>Jaipur</option>
<option>Noida</option>
</select>

Step 7: Join everything:
Placing all parts inside the page gives the complete code.

<html>
<body>
<h1>Customer Feedback</h1>
<form>
Name: <input type="text" name="name"><br><br>
Service Rating:
<input type="radio" name="rating" value="good"> Good
<input type="radio" name="rating" value="bad"> Bad <br><br>
City: <br>
<select size="4">
<option>Agra</option>
<option>New Delhi</option>
<option>Jaipur</option>
<option>Noida</option>
</select>
</form>
</body>
</html>

Final Answer:
The complete feedback form is written above. \[ \boxed{\text{Pink body, h1 heading, form with text box, two radio buttons and a select list of size 4}} \]