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-JAN-25 | MIKIYAS GEBREMICHAEL| MODULE-ONBOARDING- Form/wireframe | WEEK 2 #180

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

LONDON-JAN-25 | MIKIYAS GEBREMICHAEL| MODULE-ONBOARDING- Form/wireframe | WEEK 2 #180

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3f06a8d
here i write the code for the form
Mikiyas-STP Jan 18, 2025
a69d187
styling for the input and all body
Mikiyas-STP Jan 18, 2025
488d291
styling for the buttons
Mikiyas-STP Jan 18, 2025
116e21c
html file copied from feature/wireframe
Mikiyas-STP Jan 18, 2025
e4ff179
color correction for the note class: to correct accesability score
Mikiyas-STP Jan 18, 2025
36fb0d2
this commit is done as a correction to mentor commenting
Mikiyas-STP Jan 18, 2025
0942ae3
code edited on form section . for now action is # since the document …
Mikiyas-STP Jan 18, 2025
bb3a48f
on the footer h2 is replaced by p .
Mikiyas-STP Jan 18, 2025
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
Next Next commit
here i write the code for the form
  • Loading branch information
@Mikiyas-STP
Mikiyas-STP committed Jan 18, 2025
commit 3f06a8ddcec8cc5d37e331c7a2bb3260386b8aeb
68 changes: 64 additions & 4 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,70 @@ <h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!--
try writing out the requirements first as comments
this will also help you fill in your PR message later-->
<!DOCTYPE html>
Copy link

Choose a reason for hiding this comment

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

Your html structure is wrong here. Please, update it. You are in the middle of a html doc, but <!DOCTYPE html> is always the very first element you see in the 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" />

</head>
<body>
<div class="big-room">
<h2>Customer Information</h2>
<form action="submit-form.php" method="POST">
Copy link

Choose a reason for hiding this comment

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

I don't see submit-form.php in your project. Please use actin="#" which is a convention to say "as for now we don't care where this form is submitted"

Copy link
Author

Choose a reason for hiding this comment

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

the mistake was done while copy pasting my html code from my first branch to my second branch to make it work. this was done in class room as suggested by the mentor. but when pasting it inside html of the second branch which is form/wireframe i put it in wrong place. THANK YOU TYZIA for commenting it out. now i fixed it.

<!--What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
-->
<div class="form-group">
<label for="name">Customer Name:</label>
<input type="text" id="name" name="name" required pattern="^[A-Za-z\s]{2,50}$"
title="Name must be 2-50 characters and contain only letters and spaces.">
<div class="note">Only letters and spaces are allowed (2-50 characters).</div>
</div>

<!-- What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
-->
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required
title="Please enter a valid email address.">
</div>

<!-- What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
-->
<div class="form-group">
<label for="color">T-Shirt Color:</label>
<select id="color" name="color" required>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>

<!--What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL-->
<div class="form-group">
<label for="size">T-Shirt Size:</label>
<select id="size" name="size" required>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
</div>

<button type="submit">Submit</button>
</form>
</main>
<footer>
<h2>By Mikiyas Gebremichael</h2>
Copy link

Choose a reason for hiding this comment

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

I don't think that heading level 2 is appropriate here. Please use other tag.

Copy link
Author

Choose a reason for hiding this comment

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

fixed, replaced by

,

</footer>
</body>
</html>

</form>
</main>
<footer>
Expand Down