Scribd
Upload
11 views

Assignment 5.1 HTML Forms

This is an activity in my university in where we are supposed to use forms.

Uploaded by

John Iver Garcia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Assignment 5.1 HTML Forms

This is an activity in my university in where we are supposed to use forms.

Uploaded by

John Iver Garcia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

ASSIGNMENT 5.

1 HTML FORMS

Members:
John Iverzel D. Garcia
Giann Ed Louise C. Garcia
John Vincent S. Garcia
Joshua Carl T. Garcia
Kyle M. Indac

To be submitted to:
Allan Burgos

Html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joint G's Delivery Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Joint G's Delivery</h1>
<h2>Online Order Form</h2>

<form>
<div class="form-group">
<label for="name">*Name:</label>
<input type="text" id="name" name="name" required>
<label for="tel">*Tel:</label>
<input type="tel" id="tel" name="tel" required>
</div>

<div class="form-group">
<label for="address">*Address:</label>
<input type="text" id="address" name="address" required>
<label for="email">*Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="town">*Town/City:</label>
<input type="text" id="town" name="town" required>
<label for="postcode">*Postcode:</label>
<input type="text" id="postcode" name="postcode" required>
</div>

<p class="required-fields">* required fields</p>

<h3>Burgers</h3>
<div class="radio-group">
<div><input type="radio" id="Veggie" name="Burgers"
value="Veggie Burger"><label for="Veggie">Veggie Burger</label></div>
<div><input type="radio" id="Beef" name="Burgers" value="Beef
Burger"><label for="Beef">Beef Burger</label></div>
<div><input type="radio" id="Chicken" name="Burgers"
value="Chicken Burger"><label for="Chicken">Chicken Burger</label></div>
<div><input type="radio" id="Bacon" name="Burgers"
value="Bacon Burger"><label for="Bacon">Bacon Burger</label></div>
<div><input type="radio" id="Spicy" name="Burgers"
value="Spicy Burger"><label for="Spicy">Spicy Burger</label></div>
<div><input type="radio" id="Avocado" name="Burgers"
value="Avocado Burger"><label for="Avocado">Avocado Burger</label></div>
<div><input type="radio" id="Salmon" name="Burgers"
value="Salmon Burger"><label for="Salmon">Salmon Burger</label></div>
<div><input type="radio" id="Mushroom" name="Burgers"
value="Mushroom Burger"><label for="Mushroom">Mushroom
Burger</label></div>
<div><input type="radio" id="Turkey" name="Burgers"
value="Turkey Burger"><label for="Turkey">Turkey Burger</label></div>
<div><input type="radio" id="Triple" name="Burgers"
value="Triple Patty Burger"><label for="Triple">Triple Patty
Burger</label></div>
</div>

<h3>Sides</h3>
<div class="radio-group">
<div><input type="radio" id="Fries" name="Sides" value="Potato
Fries"><label for="Fries">Potato Fries</label></div>
<div><input type="radio" id="Slice" name="Sides" value="Potato
Slice"><label for="Slice">Potato Slices</label></div>
<div><input type="radio" id="Mix" name="Sides" value="Potato
Mix"><label for="Mix">Potato Mix</label></div>
<div><input type="radio" id="Onion_Rings" name="Sides"
value="Onion Rings"><label for="Onion_Rings">Onion Rings</label></div>
<div><input type="radio" id="Sundae" name="Sides"
value="Ice-Cream Sundae"><label for="Sundae">Ice-Cream
Sundae</label></div>
<div><input type="radio" id="Cheese" name="Sides"
value="Cheesecake"><label for="Cheese">Cheesecake</label></div>
<div><input type="radio" id="Brownies" name="Sides"
value="Brownies"><label for="Brownies">Brownies</label></div>
<div><input type="radio" id="Pie" name="Sides"
value="Apple-Pie"><label for="Pie">Apple-Pie</label></div>
<div><input type="radio" id="Donut" name="Sides" value="Glazed
Donut"><label for="Donut">Glazed Donut</label></div>
<div><input type="radio" id="Salad" name="Sides" value="Fruit
Salad"><label for="Salad">Fruit Salad</label></div>
<div><input type="radio" id="Parfaits" name="Sides"
value="Yogurt Parfaits"><label for="Parfaits">Yogurt
Parfaits</label></div>
<div><input type="radio" id="Mint" name="Sides"
value="Cocumber Mint"><label for="Mint">Cocumber Mint</label></div>

</div>

<h3>Drinks</h3>
<div class="checkbox-group">
<div><input type="checkbox" id="Lemonade" name="Drinks"
value="Lemonade Squeeze"><label for="Lemonade">Lemonade
Squeeze</label></div>
<div><input type="checkbox" id="Blue" name="Drinks"
value="Blue Lemonade"><label for="Blue">Blue Lemonade</label></div>
<div><input type="checkbox" id="Soda" name="Drinks"
value="Soda"><label for="Soda">Soda</label></div>
<div><input type="checkbox" id="Milkshake" name="Drinks"
value="Classic Milkshake"><label for="Milkshake">Classic
Milkshake</label></div>
<div><input type="checkbox" id="Fruit_Punch" name="Drinks"
value="Fruit Punch"><label for="Fruit_Punch">Fruit Punch</label></div>
<div><input type="checkbox" id="Iced_Tea" name="Drinks"
value="Classic Iced Tea"><label for="Iced_Tea">Classic Iced
Tea</label></div>
<div><input type="checkbox" id="Shake" name="Drinks"
value="Chocolate Shake"><label for="Shake">Chocolate Shake</label></div>
<div><input type="checkbox" id="Rootbeer" name="Drinks"
value="Rootbear Float"><label for="Rootbeer">Rootbear Float</label></div>
</div>

<div class="form-group">
<label for="time">Preferred delivery time:</label>
<select id="time" name="time">
<option value="--:--">-- : --</option>
</select>
</div>

<div class="form-group">
<label for="instructions">Delivery instructions:</label>
<textarea id="instructions" name="instructions"></textarea>
</div>

<div class="submit-btn">
<button type="submit">Submit order</button>
</div>
</form>
</body>
</html>

Css file:
body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1, h2 {
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
}

.form-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}

.form-group label {
margin-bottom: 5px;
font-weight: bold;
}

.form-group input,

.form-group select,
.form-group textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius:
5px;
}

.radio-group,
.checkbox-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.radio-group div,
.checkbox-group div {
margin-bottom: 10px;
}

.submit-btn {
text-align: center;
}

.submit-btn button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.required-fields {
color: red;
font-size: 12px;
margin-bottom: 15px;
}

form {
border: 1px solid black;
padding: 20px;
}

Output:
“I affirm that I have not given or received any
unauthorized help on this assignment and that this work
is my own.”

You might also like