Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LONDON | CHAITRA SHETTY | Module-User-Focused-Data | WEEK 2 #310

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

LONDON | CHAITRA SHETTY | Module-User-Focused-Data | WEEK 2 #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b795cea
Write the requirements for the html form
Chaitra-Shetty Nov 3, 2024
903c2a4
Adds a valid form
Chaitra-Shetty Nov 3, 2024
0903eb3
add CSS styling to form controls (inputs and buttons)
Chaitra-Shetty Nov 3, 2024
5a28920
Adds styles when element is focused
Chaitra-Shetty Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 104 additions & 26 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My form exercise</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>

</html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>

<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->

<!-- make sure to take valid input for customer name and email id,
let the customer choose any one t-shirt colour by using drop down box,
select t-shirt size by using radio button and select delivery date by using
date input box and make sure delivery date is within the next 4 weeks of current date.
-->

<div class="input">
<label for="name">Customer Name</label>
<input
type="text"
name="name"
id="name"
required

placeholder="Enter your full name"
/>
</div>

<div class="input">
<label for="email">Email</label>
<input
type="email"
name="email"
id="email"
required
placeholder="Enter your email"
/>
</div>

<div class="input">
<label for="tshirtColor">T-shirt Color</label>
<select name="tshirtColor" id="tshirtColor" required>
<option value="" disabled selected>Select a color</option>
<option value="Black">Black</option>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an approach to not select a default value from the list so that the user is always required to explicitly select an item from the list. This way, we can ensure the user is aware of the choices.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cjyuan yes, we can achieve it by using a placeholder option like' select a color' so that the user can explicitly select the color.

<option value="White">White</option>
<option label="Red">Red</option>
</select>
</div>

<div class="tshirtSize" class="input">
T-shirt Size
<div class="input">
<label for="XS">XS</label>
<input type="radio" name="tshirtSize" id="XS" value="XS" required />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason you chose to use radio buttons for size and drop-down list for colors? They both allow a user to select one item, but when should one use radio buttons and when should one use drop-down list?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cjyuan I chose radio buttons for size and a dropdown for colors primarily for visual impact. Using a dropdown allows the color values to be displayed clearly, making it easy for the user to select. Additionally, radio buttons work well for sizes since they restrict selection to a single option


<label for="S">S</label>
<input type="radio" name="tshirtSize" id="S" value="S" />

<label for="M">M</label>
<input type="radio" name="tshirtSize" id="M" value="M" />

<label for="L">L</label>
<input type="radio" name="tshirtSize" id="L" value="L" />

<label for="XL">XL</label>
<input type="radio" name="tshirtSize" id="XL" value="XL" />

<label for="XXL">XXL</label>
<input type="radio" name="tshirtSize" id="XXL" value="XXL" />
</div>
</div>

<div class="input">
<label for="date">DeliveryDate</label>
<input
type="date"
name="date"
id="date"
min="2024-11-03"
max="2024-11-30"
required
/>
</div>

<div class="input">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>&copy; 2024 Chaitra's Tech Guide. All rights reserved.</h2>
</footer>
</body>
</html>
76 changes: 76 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
body {
background-color: #4070f4;
}

header {
text-align: center;
color: burlywood;
font-family: "Courier New", Courier, monospace;
font-size: larger;
}

.tshirtSize input {
width: 15px;
}

main {
background-color: #fff;
width: 500px;
height: 500px;
margin: 45px auto;
}

.input {
padding: 10px;
}

form {
margin-left: 20px;
border-radius: 10px;
padding: 20px;
}

input {
width: 240px;
height: 10px;
margin: 10px;
background-color: lavender;
border: 0px;
padding: 10px;
font-size: 20px;
}

button {
width: 200px;
height: 50px;
background-color: darkblue;
color: #fff;
font-weight: bold;
cursor: pointer;
}

footer {
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
background-color: cadetblue;
position: fixed;
bottom: 0;
width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
input[type="radio"]:focus,
input[type="date"]:focus {
outline: 2px solid #005fcc;
border: 2px solid #005fcc;
background-color: #f0f8ff;
}

button:focus {
outline: 2px solid #005fcc;

background-color: rgb(228, 132, 6);
}