Skip to content

Cape Town | May-ITP-2026 | Enice Mutanda | Sprint 1 | FormControls #1291

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
Enice-Codes wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Cape Town | May-ITP-2026 | Enice Mutanda | Sprint 1 | FormControls #1291

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
07e8ff2
Added index.html
Enice-Codes May 16, 2026
df899bd
Fixed trailing slashes
Enice-Codes May 30, 2026
7da6f86
Merge branch 'CodeYourFuture:main' into Form_Control
Enice-Codes Jun 1, 2026
649343f
add style layout with css
Enice-Codes Jun 9, 2026
aff984a
changed name of images
Enice-Codes Jun 10, 2026
a6a5eac
made changes to hmtl and css
Enice-Codes Jun 12, 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
96 changes: 84 additions & 12 deletions Form-Controls/index.html
View file
Open in desktop

@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.

Please also fix my comments from the review text itself: #1291 (review)

Original file line number Diff line number Diff line change
@@ -1,27 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" >

@Luro91 Luro91 May 20, 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.

Which file is this linking to?

@Enice-Codes Enice-Codes May 31, 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.

This file is linked to the css file.

@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.

Which css file? I don't see any

</head>

<body>
<center>

@Luro91 Luro91 Jun 11, 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 a lot of errors in the w3 validator. https://validator.w3.org/nu/#textarea
How can you fix them?

<header>
<h1>Product Pick</h1>
<h1>Customer Confirmation Form </h1>
</header>
</center>

<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 action="results.html" method="GET">
<div>
<label for="name">Customer Name:</label>

@Luro91 Luro91 May 20, 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 formatting standard for HTML elements is to use indentation on children elements. This makes it easier to understand the structure. How can you ensure consistent formatting in your code automatically?

@Enice-Codes Enice-Codes May 31, 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 can use a code formatter such as Prettier. It automatically indents child elements and keeps the HTML structure neat and easy to read whenever I save my file.

@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.

Please apply Prettier then

@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.

Please apply Prettier

@Luro91 Luro91 Jun 11, 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 indentation is not matching the standard. Prettier only works if there are no syntax errors. Fix the errors from the w3 validator first and then try to run it again. Does the formatting of the code change?

<input type="text" id="name" name="name" required placeholder="enter your name ."/>
</div>

<div

@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.

I see a lot of errors in the w3 validator: https://validator.w3.org/nu/#textarea

<label for="email"> Email:</label>
<input type="email" id="email" name="email" required placeholder="@gmail.com" />
</div>

<div>
<label for="Size"> Size: </label>
<select id="size" name="size">
<option value="xsmall">xSmall</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlarge">xLarge</option>
<option value="xxlarge">xxLarge</option>

</div>
</select>

<div>

<label for="phone"> Phone Number:</label>
<input type="tel" id="phone" name="phone" required />
</div>

<div>
<label for="address"> Address: </label>
<input type="text" id="address" name="address" required />
</div>

<div>
<label for="color"> Color:</label>
<select id="color" name="color">
<option value="red">yellow</option>
<option value="blue">black</option>
<option value="green">Green</option>
</select>
</div>

<fieldset>

<legend>
Gender
</legend>

<div>
<label for="gender" value="male">Male</label>
<input type="radio" for="gender" id="male"></input>
</div>

<div>
<label for="gender" value="female">Female</label>
<input type="radio" for="gender" id="female"></input>
</div>

</fieldset>
<div>
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments"></textarea>
</div>

<div>
<div class="form-button">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>

</form>
</main>
<footer>
<!-- change to your name-->
<p>By HOMEWORK SOLUTION</p>
<!-- ENICE MUTANDA-->
<p>ENICE MUTANDA</p>
</footer>
</body>
</html>
Empty file added Form-Controls/results.html
View file
Open in desktop
Empty file.
23 changes: 23 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,23 @@
h2 {
text-align: center;
color: #333;
font-size: 24px;
}
body {
font-family: Arial, sans-serif;
background-color: #c597b0;
margin: 0;
padding: 20px;
}
header {
background-color: #c597b0;
color: rgb(53, 50, 50);
padding: 5px 0;
}
form {
background-color: #dd9ad2;
padding: 20px;
border-radius: 10px;
max-width: 500px;
margin: auto;
}
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 @@ -13,6 +13,7 @@
<!--{{</objectives>}}>-->

## Task

![Wireframe](./wireframe.png)

Using the provided wireframe and resources, write a new webpage explaining:
Expand Down
Binary file added Wireframe/images/Cafe Wireframe .jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/images/Classroom Wireframe.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/images/Shopping Wireframe.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading