Write A Document To Create A Form With These Capabilities

Write An Html Document To Create A Form With The Following Capabil

Write an HTML document to create a form with the following capabilities: a. A text widget to collect the user’s name b. Four checkboxes, one each for the following items: i. Four 25-watt light bulbs for $2.39 ii. Eight 25-watt light bulbs for $4.29 iii. Four 25-watt long-life light bulbs for $3.95 iv. Eight 25-watt long-life light bulbs for $7.49 c. A collection of three radio buttons that are labeled as follows: i. Visa ii. Master Card iii. Discover

Paper For Above instruction

The following HTML document provides a comprehensive form for online bulb ordering, incorporating user input fields for customer name, selection options for various light bulbs, and payment methods. This form is designed to capture essential data efficiently and prepare the condition for processing by server-side scripts such as PHP for calculating total costs including sales tax.

The form begins with a header titled "LightUpYourLife.com," giving the page a professional branding appearance. It employs semantic HTML tags such as <form>, <label>, and <input> to ensure accessibility and clarity.

Customer Name Input

A labeled text input field with the name attribute Name collects the customer's name. This field is essential for personalizing the order and facilitating order tracking.

Checkboxes for Light Bulb Selection

Four checkboxes enable users to specify their desired bulb quantities. Each checkbox has a value attribute corresponding to its description, facilitating server-side processing. They include:

  • Four 25-watt light bulbs for $2.39
  • Eight 25-watt light bulbs for $4.29
  • Four 25-watt long-life light bulbs for $3.95
  • Eight 25-watt long-life light bulbs for $7.49

Payment Method Radio Buttons

A set of three radio buttons allows users to select their preferred payment method. All share the same name attribute ("pmt") ensuring only one can be selected, with options: Visa, MasterCard, and Discover.

Submission and Reset Buttons

Two buttons at the end of the form enable users to submit their order or clear all inputs, respectively.

Below is the complete HTML code for this form:

<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<title>Bulb Order Form</title>


</head>


<body>


<h2>LightUpYourLife.com</h2>


<form action="process_order.php" method="post">


<p>


<label>


<b>Customer Name:</b> 


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


</label>


</p>


<h3>Select your bulbs</h3>


<p>


<label>


<input type="checkbox" name="lights[]" value="4x25-watt"> Four 25-watt light bulbs for $2.39


</label><br>


<label>


<input type="checkbox" name="lights[]" value="8x25-watt"> Eight 25-watt light bulbs for $4.29


</label><br>


<label>


<input type="checkbox" name="lights[]" value="4x25-watt long-life"> Four 25-watt long-life light bulbs for $3.95


</label><br>


<label>


<input type="checkbox" name="lights[]" value="8x25-watt long-life"> Eight 25-watt long-life light bulbs for $7.49


</label>


</p>


<h3>Select your payment</h3>


<p>


<label>


<input type="radio" name="pmt" value="visa" required> Visa


</label><br>


<label>


<input type="radio" name="pmt" value="mastercard"> MasterCard


</label><br>


<label>


<input type="radio" name="pmt" value="discover"> Discover


</label>


</p>


<input type="submit" value="Submit">


<input type="reset" value="Clear">


</form>


</body>


</html>

This HTML form provides an accessible, organized, and professional interface for customers to place their bulb orders and specify payment options. Further server-side scripts can process the submitted data to compute totals, generate order summaries, and handle payment transactions, ensuring a seamless customer experience.

Related Assignments