Skip to content

Glasgow|May 2025|Indira Muniappan|Form controls #688

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 6 commits into
base: main
Choose a base branch
from
Open

Glasgow|May 2025|Indira Muniappan|Form controls #688

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
0960fef
Fix validator warnings and improve accessibility score to 100
Jun 3, 2025
66c39e7
test commit
ind222 Jun 5, 2025
6bcda68
test commit
ind222 Jun 5, 2025
9800b8f
test commit
ind222 Jun 5, 2025
45cc646
test commit
ind222 Jun 5, 2025
6e67dc8
Test commit
ind222 Jun 5, 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
130 changes: 106 additions & 24 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,109 @@
<!DOCTYPE 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>
<header>
<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-->
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
<head>
<meta charset="utf-8">
<title>Product Pick Form Controls</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Confirm your identity and choose your t-shirt colour and size. All fields required.">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>

<main>
<form name="tshirt-form" aria-describedby="form-instructions">
<p id="form-instructions">All fields are required. Please fill out your details and choose your t-shirt colour and size.</p>

<fieldset>
<legend>Confirm Your Details</legend>

<p>
<label for="name">Name:</label><br>
<input
id="name"
name="name"
type="text"
required
minlength="2"
pattern=".*\S.*"
title="Name must be at least 2 characters and not just spaces"
aria-required="true"
placeholder="Enter your full name"
>
</p>

<p>
<label for="email">Email:</label><br>
<input
id="email"
name="email"
type="email"
required
aria-required="true"
placeholder="[email protected]"
title="Please enter a valid email address"
>
</p>
</fieldset>

<fieldset>
<legend>Choose a colour:</legend>

<p>
<label>
<input
type="radio"
name="colour"
value="red"
required
aria-required="true"
> Red
</label>
</p>

<p>
<label>
<input
type="radio"
name="colour"
value="blue"
> Blue
</label>
</p>

<p>
<label>
<input
type="radio"
name="colour"
value="green"
> Green
</label>
</p>
</fieldset>

<p>
<label for="size">Size:</label><br>
<select id="size" name="size" required aria-required="true" title="Select your t-shirt size">
<option value="" disabled selected>Select 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>
</p>

<p>
<button type="submit" aria-label="Submit your t-shirt selection">Submit</button>
</p>
</form>
</main>

<footer>
<p>Indira - HOMEWORK SOLUTION</p>
</footer>
</body>
</html>
1 change: 1 addition & 0 deletions Wireframe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ There are some provided HTML and CSS files you can use to get started. You can u
- [ ] The webpage is properly committed and pushed to a branch on GitHub.

## Resources
## Checking

- [Wireframe](https://www.productplan.com/glossary/wireframe/)
- [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
Expand Down
70 changes: 41 additions & 29 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
</p>
<a href="">Read more</a>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Understand key web development concepts including README files, wireframes, and Git branches." />
<title>Understanding Key Web Concepts</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header role="banner">
<h1>Understanding Key Web Concepts</h1>
<p>A guide to README files, wireframes, and Git branches.</p>
</header>

<main id="main-content" role="main">
<section class="articles" aria-label="Web Development Concepts">
<article class="card">
<img src="placeholder.svg" alt="Illustration showing a README file on a computer screen" />
<h2>What is the purpose of a README file?</h2>
<p>The README file introduces and explains a project. It includes setup instructions, usage information, and other helpful context for contributors.</p>
<a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Learn More <span class="sr-only">about README files</span></a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>

<article class="card">
<img src="placeholder.svg" alt="Wireframe sketch of a web page layout" />
<h2>What is the purpose of a wireframe?</h2>
<p>A wireframe is a visual guide for laying out a web page or app. It helps plan the structure and user interface before design and development begin.</p>
<a href="https://www.productplan.com/glossary/wireframe/" target="_blank" rel="noopener noreferrer">Explore Wireframes <span class="sr-only">for web design</span></a>
</article>

<article class="card">
<img src="placeholder.svg" alt="Diagram showing Git branches and merges" />
<h2>What is a branch in Git?</h2>
<p>A Git branch allows you to work on features or fixes independently. It keeps your main codebase safe while you make changes or add new functionality.</p>
<a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank" rel="noopener noreferrer">Understand Git Branches <span class="sr-only">with Atlassian guide</span></a>
</article>
</section>
</main>

<footer role="contentinfo">
<p>&copy; 2025 <a href="https://codeyourfuture.io" target="_blank" rel="noopener noreferrer">CodeYourFuture</a> Student</p>
</footer>
</body>
</html>
Loading