Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

Form-Controls_Complete #254

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Form-Controls_Complete #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f28b82
Form-Controls_Complete
Innapoliakova Apr 30, 2023
f99d3d1
Zoo-changes
Innapoliakova May 1, 2023
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.
89 changes: 65 additions & 24 deletions Form-Controls/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,69 @@
<!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">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
<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" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>Product Pick</h1>
</header>
<main>
<form>
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" required pattern="[A-Za-z\s]{2,}"/>

</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>

</html>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required />


<label for="t-shirt-color">T-shirt Color:</label>
<select id="t-shirt-color" name="t-shirt-color" required>
<option value="">Choose a color</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="grey">Grey</option>
</select>


<label for="t-shirt-size">T-shirt Size:</label>
<select id="t-shirt-size" name="t-shirt-size" required>
<option value="">Choose a 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>
<label for="delivery-date">Delivery Date:</label>

<input
type="date"
id="delivery-date"
name="delivery-date"
min="<?php echo date('Y-m-d'); ?>"
max="<?php echo date('Y-m-d', strtotime('+4 weeks')); ?>"
required
/>
</p>

<input type="submit" value="Submit" />

<!-- write your html here-->
<!-- try writing out the requirements first-->
</form>
</main>
<footer>
<!-- change to your name-->
<h2>By HOMEWORK SOLUTION</h2>
</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions Form-Controls/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
body {
background-color: antiquewhite;
}

h1, h2 {
text-align: center;
}

form {
max-width: 500px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
select {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
margin-bottom: 20px;
}

select {
height: 40px;
}

input[type="submit"] {
background-color: #008CBA;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

input[type="submit"]:hover {
background-color: #006B8F;
}
Loading