Scribd
Upload
4 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
Available Formats
Download as PDF, TXT or read online on Scribd
4 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
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