-
-
Notifications
You must be signed in to change notification settings - Fork 500
London | 26-ITP-May | Mandip Sanger | Sprint 1 | Form Contols #1440
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.
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
+151
−11
Closed
Changes from 16 commits
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
3e0a907
I added my name to html
mandipsanger a00382e
form control initial version
mandipsanger bd4b9d4
fix name input
mandipsanger 3d5a056
add pattern validation
mandipsanger 11f94cf
fix errors
mandipsanger 3fb6770
fix errors
mandipsanger ac42a05
remove action in form
mandipsanger 37f812a
add style sheet
mandipsanger 9171f0e
change color
mandipsanger a384733
fix errors
mandipsanger 4c7d762
final version
mandipsanger b091bfa
final version with correction
mandipsanger 4bee091
fix file locking errors
mandipsanger fea1e89
fix revert wireframes html file
mandipsanger 110cfc5
add h1 and fix errors
mandipsanger 40013cb
fix form elements
mandipsanger bc41e3d
fix colour input
mandipsanger bde7096
fix html tag
mandipsanger e6e092c
Add xl and xxl
mandipsanger 13c95b9
fix size errors
mandipsanger 8bd20f0
fix errors
mandipsanger 3bdb7dd
color corrections
mandipsanger b9b22e6
Fix display error
mandipsanger 607ff0e
style sheet /size changes
mandipsanger 3cc5aa8
change the option value
mandipsanger File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <!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--> | ||
| <p>By HOMEWORK SOLUTION</p> | ||
| </footer> | ||
| </body> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <title>My form control</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <meta name="description" content="F" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Product Pick</h1> | ||
| </header> | ||
| <main> | ||
| <form> | ||
| <fieldset> | ||
| <legend>Personal Information</legend> | ||
| <label for="name">Name:</label> | ||
| <input | ||
| type="text" | ||
| id="name" | ||
| name="name" | ||
| pattern="^\s*(\S\s*){2,}$" | ||
| required | ||
| title="Please enter at least 2 characters" | ||
| /> | ||
| <label for="email">Email:</label> | ||
| <input type="email" id="email" name="email" required /> | ||
| </fieldset> | ||
|
|
||
| <fieldset> | ||
| <legend>Please select your color</legend> | ||
|
|
||
| <input type="radio" id="black" name="color" value="Black" /> | ||
| <label for="black">Black</label> | ||
|
|
||
| <input type="radio" id="beige" name="color" value="Beige" /> | ||
| <label for="beige">Beige</label> | ||
|
|
||
| <input type="radio" id="red" name="color" value="Red" /> | ||
| <label for="red">Red</label> | ||
| </fieldset> | ||
|
|
||
| <fieldset> | ||
| <legend>Please select a size</legend> | ||
|
|
||
| <label for="size">Choose a size:</label> | ||
| <select name="size" id="size" required> | ||
| <option value="">-- Please choose an option --</option> | ||
| <option value="xs">Extra Small</option> | ||
| <option value="small">Small</option> | ||
| <option value="medium">Medium</option> | ||
| <option value="large">Large</option> | ||
| </select> | ||
| </fieldset> | ||
|
|
||
| <input type="submit" value="Submit" /> | ||
| </form> | ||
| </main> | ||
| <footer>From control by Mandip sanger</footer> | ||
| </body> | ||
| </html> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| header { | ||
| background-color: #49bb93; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 20px; | ||
| } | ||
| h1 { | ||
| margin: 0; | ||
| } | ||
| fieldset { | ||
| margin-bottom: 20px; | ||
| padding: 15px; | ||
| border: 1px solid #bbb; | ||
| border-radius: 4px; | ||
| } | ||
| legend { | ||
| font-weight: bold; | ||
| padding: 05px; | ||
| } | ||
|
|
||
| fieldset input[type="radio"] { | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| fieldset label { | ||
| display: inline; | ||
| margin-right: 15px; | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f5f7fa; | ||
| margin: 0; | ||
| padding: 0; | ||
| color: #333; | ||
| } | ||
| main { | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 30px 15px; | ||
| } | ||
| form { | ||
| background-color: white; | ||
| padding: 25px; | ||
| width: 100%; | ||
| max-width: 500px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | ||
| } | ||
| div { | ||
| margin-bottom: 20px; | ||
| } | ||
| label { | ||
| display: flex; | ||
| margin-bottom: 5px; | ||
| font-weight: bold; | ||
| } | ||
| input[type="text"], | ||
| input[type="email"], | ||
| select { | ||
| width: 100%; | ||
| padding: 10px; | ||
| border: 1px solid #bbb; | ||
| border-radius: 4px; | ||
| font-size: 1rem; | ||
| } | ||
| input[type="submit"] { | ||
| width: 100%; | ||
| background-color: #49bb93; | ||
| color: white; | ||
| border: none; | ||
| padding: 12px; | ||
| border-radius: 4px; | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| input[type="submit"]:hover { | ||
| background-color: #49bb93; | ||
| } | ||
| footer { | ||
| text-align: center; | ||
| background-color: #49bb93; | ||
| color: white; | ||
| padding: 15px; | ||
| margin-top: 20px; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I can currently submit this form without selecting a colour - please amend
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we had to add color only selected was needed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have fixed with required.