London | Shohreh Bayat | Form-control | Week 2 #303
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,14 +14,51 @@ <h1>Product Pick</h1> | |
| </header> | ||
| <main> | ||
| <form> | ||
| <div> | ||
| <label for="name">Name</label> | ||
| <input type="text" id="name" placeholder="Enter Your Name" pattern="^[a-zA-Z]+(?:[-' ][a-zA-Z]+)*$" required> | ||
| </div> | ||
| <div> | ||
| <label for="email">Email</label> | ||
| <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" id="email" placeholder="Enter Your e-mail" required> | ||
| </div> | ||
| <div> | ||
| Choose your T-shirt's colour | ||
|
There was a problem hiding this comment. In Web Development, there's a very big and important topic called Accessibility. I have linked you a documentation found on MDN Web Docs. For all things Web Development & JavaScript, MDN documentation will generally be your best friend, you can find so much there and the information there is the best! My recommendation would be, if you are unsure of smth, always check MDN docs, it has the most up-to-date and useful information with regards to Web Development (and not only) 😊 So having said this, you can use some Semantic HTML to let the users using screen readers know how everything on the website is organised and structured. So considering the T shirt colour option for the user, you can technically wrap radio buttons in a Semantic elements and a better organised HTML structure, can also improve website's SEO, which is a big topic on its own and you can read more on it in your own time. SEO is generally used heavily in marketing, but we as developers have to do our best to help better optimise our website! |
||
| <div> | ||
| <label for="Red">Red</label> | ||
| <input type="radio" name="colour" id="Red" value="Red" required> | ||
|
There was a problem hiding this comment. When it comes to HTML attributes and conventions around naming, it's generally better to use lower case, as opposed to having Capitalisation in your attributes. So generally Here's a W3Schools short guide on HTML attributes. |
||
| </div> | ||
| <div> | ||
| <label for="Green">Green</label> | ||
| <input type="radio" name="colour" id="Green" value="Green"> | ||
| </div> | ||
| <div> | ||
| <label for="White">White</label> | ||
| <input type="radio" name="colour" id="White" value="White"> | ||
| </div> | ||
| Choose your T-shirt's Size | ||
| <div> | ||
| <label for="Size">T-shirt's Size</label> | ||
|
There was a problem hiding this comment. Same here, you could use a better semantic approach to better structure your HTML markup. |
||
| <select name="Size" id="Size" required> | ||
| <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> | ||
| </div> | ||
| <div> | ||
| <label for="delivery date">Choose your delivery date</label> | ||
| <input type="date" name="date" id="delivery date" min="2024-10-31" max="2024-11-30"> | ||
| </div> | ||
| <button type="reset">Reset</button> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
|
|
||
| </main> | ||
| <footer> | ||
| <h2>By Shohreh Bayat</h2> | ||
| </footer> | ||
| </body> | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| padding: 20px; | ||
| background-color: papayawhip; | ||
| } | ||
| label, input, select { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| } | ||
| input:focus, select:focus { | ||
| outline: 2px solid #e24a66; /* Show focus outline */ | ||
| } | ||
| .title{ | ||
| font-size: x-large; | ||
| color: #e24a66; | ||
| } | ||
| .header{ | ||
| color: blueviolet; | ||
| border-bottom: 10px solid #e24a66; | ||
|
|
||
| } | ||
| h1{ | ||
| text-align: center; | ||
| } | ||
|
|
||
| footer{ | ||
| font-style: italic; | ||
| font-size: smaller; | ||
| background-color: black; | ||
| color: white; | ||
| text-align: center; | ||
| } |
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.
Well done on using the regex pattern! 👏 Regex in general is a really big subject, and it goes very deep and can be used to create very complicated and sometimes very useful checks.
If you want to learn more on Regex - I really like Corey Schafer's explanation - he has his Youtube channel, and even though his channel is primarily geared towards Python (One of the best languages out there!! 😊), his Regex explanation is pretty much language agnostic. So you can follow it on your own time, at your own pace.