Skip to content

London | 26-ITP-May | Jorvan White | Sprint 1 | Form-Controls #1265

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

Closed
JorvanW wants to merge 13 commits into from
Closed

London | 26-ITP-May | Jorvan White | Sprint 1 | Form-Controls #1265

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a11a51e
Add files via upload
JorvanW May 14, 2026
64a6300
Updated index.html file to match the form.html file and added my name…
May 28, 2026
4fea05a
removed non-sementic tags and added more labels and ids to the form c…
May 28, 2026
f5922f6
Removed Form-Controls/Forms.html
May 28, 2026
61ea410
Added lable names for each imput field
May 28, 2026
2918f50
Removed style tags from index.html and added link to style.css.
May 28, 2026
fc72ea8
Made updated to the readme.file
May 28, 2026
b163df1
Merge branch 'CodeYourFuture:main' into updated
JorvanW May 28, 2026
ea8f171
Merge branch 'updated' of https://github.com/JorvanW/Module-Onboardin…
May 28, 2026
c285463
Added <required> attribute to form inputs in index.html
May 31, 2026
a4c76c0
Added a new label imnput to only accept a first and last name and add…
Jun 1, 2026
1149e07
Added a new section on form controls to the index.
Jun 3, 2026
7af0c23
Started using "Prettier" extesion to better format
Jun 4, 2026
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
38 changes: 19 additions & 19 deletions Form-Controls/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

<!--{{<objectives>}}>-->

- [ ] Interpret requirements and check against a list of criteria
- [ ] Write a valid form
- [ ] Test with Devtools
- [ ] Refactor using Devtools
- [ ] Use version control by committing often and pushing regularly to GitHub
- [ ] Develop the habit of writing clean, well-structured, and error-free code
- [x] Interpret requirements and check against a list of criteria
- [x] Write a valid form
- [x] Test with Devtools
- [x] Refactor using Devtools
- [x] Use version control by committing often and pushing regularly to GitHub
- [x] Develop the habit of writing clean, well-structured, and error-free code
<!--{{<objectives>}}>-->

## Task
Expand Down Expand Up @@ -39,18 +39,18 @@ Do not write a form action for this project.

Let's write out our testable criteria. Check each one off as you complete it.

- [ ] I have only used HTML and CSS.
- [ ] I have not used any JavaScript.
- [x] I have only used HTML and CSS.
- [x] I have not used any JavaScript.

### HTML

- [ ] My form is semantic HTML.
- [ ] All inputs have associated labels.
- [ ] My Lighthouse Accessibility score is 100.
- [ ] I require a valid name.
- [ ] I require a valid email.
- [ ] I require one colour from a defined set of 3 colours.
- [ ] I require one size from a defined set of 6 sizes.
- [x] My form is semantic HTML.
- [x] All inputs have associated labels.
- [x] My Lighthouse Accessibility score is 100.
- [x] I require a valid name.
- [x] I require a valid email.
- [x] I require one colour from a defined set of 3 colours.
- [x] I require one size from a defined set of 6 sizes.

### Developers must adhere to professional standards.

Expand All @@ -59,10 +59,10 @@ Let's write out our testable criteria. Check each one off as you complete it.
These practices reflect the level of quality expected in professional work.
They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.

- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
- [ ] My code is consistently formatted
- [ ] My page content is free of typos and grammatical mistakes
- [ ] I commit often and push regularly to GitHub
- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
- [x] My code is consistently formatted
- [x] My page content is free of typos and grammatical mistakes
- [x] I commit often and push regularly to GitHub

## Resources
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
Expand Down
34 changes: 26 additions & 8 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,42 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My form exercise</title>
<meta name="description" content="" />
<meta name="description" content="T-Shirts form" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
<h1>T-Shirts</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-->
<label for="name">Name</label>
<input id="name" type="text" required/>

@Luro91 Luro91 Jun 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The name should be at least 2 characters

What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.

@JorvanW JorvanW Jun 3, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I've added a required pattern to ensure that at least a first and last name is given.

@Luro91 Luro91 Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The requirements say "I must collect this data and ensure it contains at least two non-space characters.", so it's does not need a first and last name, but its okay.

<label for="email">Email</label>
<input id="email" type="email" required/>
<label for="size">Size
<select id="size" required>
<option value="xsmall">XS</option>

@Luro91 Luro91 Jun 1, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I see 2 errors in the w3 validator https://validator.w3.org/nu/#textarea

The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements.

@JorvanW JorvanW Jun 3, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I have added a "select a size/colour" tag and made it required to not continue without selecting

<option value="small">S</option>
<option value="medium">M</option>
<option value="large">L</option>
<option value="xlarge">XL</option>
<option value="xxlarge">XXL</option>
</select>
</label>
<label for="colour">Colour
<select id="colour" required>
<option value="yellow">Yellow</option>
<option value="black">Black</option>
<option value="pink">Pink</option>
</select>
</label>
<button id="submit">Submit</button>
</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<p>By Jorvan White</p>
</footer>
</body>
</html>
25 changes: 25 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,25 @@
body {
font-family: Helvetica;
font-size: 30px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
input, select {
font-size: 25px;
}
button {
font-size: 25px;
width: 90px;
}
#name {
width: 500px;
}
#email {
width: 500px;
}
#submit {
width: 150px;
}
Loading