Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

London_11 | Saqib_Javed | Module-User-Focused-Data | Form-Control | week2 #209

Closed
wants to merge 6 commits into from
Closed

London_11 | Saqib_Javed | Module-User-Focused-Data | Form-Control | week2 #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f8ed147
basic form layout
saqibjvd Oct 13, 2024
45f7d24
CSS
saqibjvd Oct 13, 2024
3479c12
Form control
saqibjvd Oct 13, 2024
f849c22
updated html
saqibjvd Oct 24, 2024
d1c7d57
form control
saqibjvd Oct 27, 2024
9eb88e5
Merge branch 'main' into Form-Controls
saqibjvd Oct 27, 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
60 changes: 55 additions & 5 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,69 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
<h1>Product Pick</h1>
</header>
<main>
<h2 class="para">Please fill in the order form to complete your order</h2>

<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
Copy link

Choose a reason for hiding this comment

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

Where did this closing tag go?

Copy link
Author

Choose a reason for hiding this comment

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

fixed

<div class="form">
<label for="name">Full Name:</label><br>
<input type="text" id="fname" name="fname" pattern="[A-Za-z]+" title="Only letters are allowed" required/>
Copy link

Choose a reason for hiding this comment

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

Nice use of pattern! One thing to consider -- names vary widely and may not include characters beyond ASCII or not necessarily be easily splittable into first/last names.

See these blog posts for more assumptions that aren't true about names:

Any thoughts on this, e.g. changing the pattern and/or combining the name fields?

Copy link
Author

Choose a reason for hiding this comment

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

should i do full name insread of first name and last name?

Copy link
Author

Choose a reason for hiding this comment

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

fixed

<br>
<!-- <label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" pattern="[A-Za-z]+" title="Only letters are allowed" required/> -->
<br>
<label for="email">Email:</label><br>
<input id="email" type="email" name="email" required/>
</div>


<div class="shirt-colors">
<fieldset>
<legend>Choose Colors:</legend>

<input id="white" type="radio" name="color" value="white" required/>
<label for="white">White</label>

<input id="red" type="radio" name="color" value="red"/>
<label for="red">Red</label>

<input id="black" type="radio" name="color" value="black"/>
<label for="black">Black</label>
</fieldset>
</div>

<div class="shirt-size">
Copy link

Choose a reason for hiding this comment

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

I notice that I can submit the form without choosing a size option. How should we handle this case?

Copy link
Author

Choose a reason for hiding this comment

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

fixed


<label for="size">T-shirt size</label><br>
<select class="size" name="size" required>
<option value="x-small">xs</option>
<option value="small">S</option>
<option value="medium">M</option>
<option value="large">L</option>
<option value="x-large">XL</option>
<option value="xx-large">XXL</option>
</select>
</div>

<div class="delivery">
<label for="delivery">
Chose your delivery date:
<input type="date" name="delivery" min="2024-10-13" max="2024-11-01" required/>
</label>
</div>

<div>
<button class="btn">submit</button>
</div>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>

<h2>By Saqib Javed - London 11 - ITP</h2>
</footer>
</body>

Expand Down
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 @@
* {
padding: 5px;
margin: 10px;
background-color: rgb(222, 206, 206);
Copy link

Choose a reason for hiding this comment

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

assigning a background color to all elements might get tricky -- what's a way we can style the layout's background without doing so for every element?

font-family: monospace;
}

header {
text-align: center;
font-size: 1.5rem;
}

.para {
text-align: center;

}

.form {
display: flex;
justify-content: center;
}

label{
color: #0a0a09;
font-weight: bold;
}


input {
background-color: aliceblue;
border: 1px solid #ccc;
padding: 8px;
}

.shirt-colors {
display: flex;
justify-content: center;
align-content: center;
}

.shirt-size {
display: flex;
justify-content: center;
color: aliceblue;
}

.delivery {
display: flex;
justify-content: center;
}

.size{
background-color: aliceblue;
}

.btn {
display: block;
margin: auto;
display: flex;
justify-content: center;
color: whitesmoke;
background-color: rgb(12, 12, 11);
}

.btn:hover {
background-color: #444;
cursor: pointer;
}


footer h2 {
font-size: 0.75rem;
text-align: center;
}