|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
|
<title>S05: [Activity] HTML Forms, Tables and Semantic Tags</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<header>
|
|
|
|
|
<h1>Zuitt IT Solutions</h1>
|
|
|
|
|
<h2>Products Offered:</h1>
|
|
|
|
|
<section class="products-container">
|
|
|
|
|
<table border="1">
|
|
|
|
|
<thead colspan="3">
|
|
|
|
|
<th>Package</th>
|
|
|
|
|
<th>Price</th>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Basic</td>
|
|
|
|
|
<td>₱ 500.00</td>
|
|
|
|
|
<td>Package inclues a fully functional website with desired specifications.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Basic</td>
|
|
|
|
|
<td>₱ 1000.00</td>
|
|
|
|
|
<td>Enjoy all the benefits of the basic package and also includes site support and maintenance.</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tfoot>
|
|
|
|
|
<tr>
|
|
|
|
|
<th colspan="3">Additional features after initial project is inclusive of charges</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</tfoot>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</section>
|
|
|
|
|
<!-- End of Products Description -->
|
|
|
|
|
<section class="contact-form">
|
|
|
|
|
<form action="https://google.com">
|
|
|
|
|
<h1>Contact Form:</h1>
|
|
|
|
|
<label for="firstName">First Name:</label><br>
|
|
|
|
|
<input type="text" id="firstName" placeholder="Type your Firstname." required><br><br>
|
|
|
|
|
<label for="lastName">Last Name:</label><br>
|
|
|
|
|
<input type="text" id="firstName" placeholder="Type your Lastname." required><br><br>
|
|
|
|
|
<label for="email">Email Address:</label><br>
|
|
|
|
|
<input type="text" id="email" placeholder="Type your Email Address." required><br><br>
|
|
|
|
|
<label for="email">Contact Number:</label><br>
|
|
|
|
|
<input type="text" id="contactNum" placeholder="Type your Contact number." required><br><br>
|
|
|
|
|
<!-- Creates a dropdown menu -->
|
|
|
|
|
<label for="serviceType">Service Type:</label><br>
|
|
|
|
|
<select name="serviceType" id="serviceType">
|
|
|
|
|
<option value="">Frond End Programming</option>
|
|
|
|
|
<option value="">Back End Programming</option>
|
|
|
|
|
<option value="">Full Stack Programming</option>
|
|
|
|
|
</select>
|
|
|
|
|
<br><br>
|
|
|
|
|
<label for="prefContact">Preferred Contact:</label>
|
|
|
|
|
<br>
|
|
|
|
|
<input type="checkbox" name="email-type1" id="email-type1">
|
|
|
|
|
<label for="email-type1">Email</label>
|
|
|
|
|
<br>
|
|
|
|
|
<input type="checkbox" name="phone-type2" id="phone-type2">
|
|
|
|
|
<label for="phone-type2">Phone</label>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<label for="prefContact">Package:</label>
|
|
|
|
|
<br>
|
|
|
|
|
<input type="radio" name="prefContact" id="basic-type1" required>
|
|
|
|
|
<label for="basic-type1">Basic</label>
|
|
|
|
|
<br>
|
|
|
|
|
<input type="radio" name="prefContact" id="premium-type2" required>
|
|
|
|
|
<label for="premium-type2">Premium</label>
|
|
|
|
|
<br><br>
|
|
|
|
|
<label for="notes">Notes:</label>
|
|
|
|
|
<br>
|
|
|
|
|
<textarea name="notes" id="notes" rows="5"></textarea>
|
|
|
|
|
<br>
|
|
|
|
|
<!-- Creates a button that will submit the form data -->
|
|
|
|
|
<button type="submit">Send Inquiry</button>
|
|
|
|
|
<!-- Creates a button to reset the form data -->
|
|
|
|
|
<button type="reset">Reset</button>
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
</header>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
