Skip to content

Form controls #434

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

Form controls #434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0082314
Create index.html
Mgphone Oct 7, 2024
f068868
Merge pull request #1 from Mgphone/feature/wireframe
Mgphone Oct 7, 2024
919817a
initial commit with some codes
Mgphone Oct 12, 2024
31de5c7
Complete checklist form control
Mgphone Oct 12, 2024
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
18 changes: 18 additions & 0 deletions FormControls/formcontrolchecklist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Developers must test their work

## Let's write out our testable criteria:

### HTML
- [X ] I have used **HTML** and **CSS** only.
- [ 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**. I have defined a valid name as a text string of two characters or more.
- [ 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.
- [ X] I require one **date** from a constrained date range.

### CSS
- [ X] I show which element is **focused**.
- [ X] My **Lighthouse Accessibility** score is **100**.
69 changes: 69 additions & 0 deletions FormControls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>T-Shirt Order Form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>T-Shirt Order Form</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
<h2>T-Shirt Order Form</h2>

<!-- Customer's Name -->
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required pattern="[A-Za-z\s]{2,}" title="Name should be at least 2 characters." class="input-field">

<!-- Customer's Email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required class="input-field">

<!-- T-Shirt Colour -->
<label for="colour">T-Shirt Colour:</label>
<select id="colour" name="colour" required class="input-field">
<option value="">-- Select Colour --</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

<!-- T-Shirt Size -->
<label for="size">T-Shirt Size:</label>
<select id="size" name="size" required class="input-field">
<option value="">-- 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>

<!-- Delivery Date -->
<label for="delivery">Delivery Date:</label>
<input type="date" id="delivery" name="delivery" required min="" max="" class="input-field">

<!-- Submit Button -->
<div class="button-order">
<input type="submit" value="Submit Order">

</div>

</form>

</main>
<footer>
<!-- change to your name-->
<h2>Phone Myint Naing</h2>
</footer>
</body>

</html>
53 changes: 53 additions & 0 deletions FormControls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
header h1{
width: 100vw;
display: flex;
justify-content: center;
}
form{
display: flex;
flex-direction: column;
background: #fff;
padding: 20px;
border-radius: 10px;
max-width: 500px;
margin: 0 auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
gap:10px
}
h2 {
text-align: center;
}

label {
margin-top: 10px;
font-weight: bold;
}

input, select {

padding: 10px;
margin-top: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}
.button-order{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input[type="submit"] {
background-color: #1e7e34;
color: white;
cursor: pointer;
border: none;
/* margin-top: 20px;
width:20vw; */
}

input[type="submit"]:hover {
background-color: #218838;
}
input[type="submit"]:focus{
outline: 2px solid black;
}
50 changes: 50 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Wireframe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Learning Page</h1>
<p>Welcome to my wireframe demo page</p>
</header>

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section where the main content will be displayed.</p>
</section>

<section id="about">
<h2>About</h2>
<p>This section describes what the page or website is about.</p>
</section>

<section id="services">
<h2>Services</h2>
<p>Details of services offered can go here.</p>
</section>

<section id="contact">
<h2>Contact</h2>
<p>This section provides contact information or a form for users to reach out.</p>
</section>
</main>

<footer>
<p>&copy; 2024 My Learning Page. All rights reserved.</p>
</footer>
</body>
</html>