Skip to content

London | 26-ITP-Sep | Rawan Almutairi | Sprint 1| FormControls #1627

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
Rawan0-0 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

London | 26-ITP-Sep | Rawan Almutairi | Sprint 1| FormControls #1627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
62 changes: 56 additions & 6 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<link rel="stylesheet" href="style.css"/>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Expand All @@ -13,15 +14,64 @@ <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-->
<!-- write your html here-->
Enter your name:

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This text is not linked to the name box, so it is not a label. The email box on line 62 has the same problem.

How did you link each colour label to its radio?

<input type="text" placeholder="Enter your name" name="aName" size="16" minlength="2" maxlength="16"required>

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Type two spaces in the name box. minlength="2" accepts them, because a space is a character.

The README asks for two non-space characters. It also gives you a regex for this. How can you use it on this input?


<!-- the size attribute control how wide the text box, "how many characters it can control-->
<!-- the minlength attribute control the minimum number of characters required-->
<!-- the maxlength attribute control the maximum number of characters required-->
<!-- the placeholder attribute provide a hint for the user on what to enter-->
<!-- the required attribute ensures the user fills out the field-->
<p>Choose your T-shirt color:</p>
<!-- choosing the radio buttons for color selection-->
<p>please select a color:</p>
<p>
<input type="radio" name="color" id="red" value="Red" placeholder="Red" required>
<label for="red"label>Red</label><br>
<input type="radio" name="color" id="brown" value="Brown" placeholder="Brown" required>
<label for="brown">Brown</label><br>
<input type="radio" name="color" id="black" value="Black" placeholder="Black" required>
<label for="black">Black</label><br>
</p>

<!-- a list of suggestions using the list attribute and the datalist element -->
<!-- I need to fix the labels to increase accessbility to 100%-->
<label>
Select your T-shirt size:
<input list="SizeList" name="T-shirt Size" placeholder=" Choose your size" required><br>

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Type XXXL or purple in the size box. The browser accepts both. A datalist only suggests values. It does not limit them.

You already solved this for colour on line 30. How can you do the same for size?

</label>
<datalist id="SizeList">

<option value="XS">
<option value="S">
<option value="M">
<option value="L">
<option value="XL">
<option value="XXL">

</datalist>

</form>

<p>
<style>
input:invalid{background: rgb(253, 251, 253);}
input:valid{background: rgb(253, 251, 253);}
</style>
Enter your email:
<input type="email" placeholder="Enter your email" required>
</p>
<!--The input type="email" is used so the browser can validatae the email address format-->
<!--the style tag is used to style the input box. CSS pseudo-classes :valid or :invalid to check if the email is valid and notify the user-->

<form> <label> <input type="submit"> <input type="resit">

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This Submit button is in its own form. That form has no other fields. So the browser checks nothing when you press Submit.

Try it: leave every field empty and press Submit. The form is still sent.

The email field on line 63 is outside both forms too. Every field and the Submit button must be inside one form.

</label>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>Rawan@</p>

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The footer should show your name, as in your PR title. Please also delete the comments on lines 17 and 73. They were instructions for you.

</footer>
</body>
</html>
</html>
17 changes: 17 additions & 0 deletions Form-Controls/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
body { color: #141414;

@abdishakoor-dev abdishakoor-dev Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The body block has no closing }. So Prettier cannot format this file.


background-color: #6aa57e;

font-family: Georgia;



h1{

font-family: sans-serif;
color: rgba(15, 15, 15, 0.267);
background-color: #f5eeda;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}
Loading