Skip to content

JAN25|SARAAMIRI|Module-Onboarding|week2 #264

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

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

JAN25|SARAAMIRI|Module-Onboarding|week2 #264

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c70acaf
complete form control html
saraamiiri Feb 12, 2025
1394834
add fieldset and change name requirement
saraamiiri Feb 13, 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
48 changes: 44 additions & 4 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,59 @@
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-shirt order form</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-->
this will also help you fill in your PR message later--
//requierment
//1- collect customer valid name (at least 2 character )
//2-customer email address (valid email address )
//3-allow customer to choose one color from defined three colors
// 4-allow customer to choose one size from defined six size

<form action="" method="POST">
<h1>T-Shirt Order Form</h1>

Copy link

Choose a reason for hiding this comment

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

The form would look more organised if it were grouped together. Can you add tags for better semantics and structure?

Copy link
Author

Choose a reason for hiding this comment

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

thank you for reviewing my code here i need to use

and to group related field .

<!--Customer's Name -->
<label for="name">What is your name?</label>
<input type="text" id="name" name="name" required minlength="2" placeholder="Enter your full name">
Copy link

Choose a reason for hiding this comment

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

Good job! Your code is easy to read and looks good overall.

It seems the name input accepts numbers as well. Can you think of a pattern attribute that only accepts a text string of two characters or more?

Copy link
Author

@saraamiiri saraamiiri Feb 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

thank you for your reviewing ,for block number and the name input only accept text string two or more character we can use this pattern: What is your name?

Copy link

Choose a reason for hiding this comment

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

There is a pattern attribute in the input type. It take a regex. Can you think of a regex pattern for a text string of two characters or more? pattern="regex"


<!-- Customer's Email -->
<label for="email">What is your email?</label>
<input type="email" id="email" name="email" required placeholder="Enter a valid email">

<!-- T-Shirt Colour -->
<label for="colour">What colour should this t-shirt be?</label>
<select id="colour" name="colour" required>
<option value="">Select a colour</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<!-- T-Shirt Size -->
<label for="size">What size would you like?</label>
<select id="size" name="size" required>
<option value="">Select a size</option>
<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>

<!-- Submit Button -->
<button type="submit">Submit Order</button>
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
<h2>By SARA AMIRI </h2>
</footer>
</body>
</html>