14. Forms and custom inputs - Gr0mi4/Hello-World GitHub Wiki

Create a new page /feedback and add a link to that page to the /contacts page, under the table with contacts. The link should say smth like "Leave your feedback". The final look of the page is as on this picture:

But do not implement the final design immediately. Let's break this work into separate parts:

Implement a simple form using standard browser input fields, without custom design. Here's a summary of every field:

• Name. Basic text field with "Name" placeholder.
• Email. Special email type of the input field with "Email" placeholder.
• Rating. It's a flex-row container with 2 columns. In the left column – label "Rating". In the right column – 5 sections with radio-buttons and stars. In the 1st stage do not implement "highlighting" stars when you select a specific radio-button. Just make radio-buttons so that you can select only one set of stars.
• Country. On the left – label "Country", on the right – a simple <select> with several options. Do not style the select now.
• Leave a message. Simple <textarea> with a placeholder.
• Submit. <input type="submit">

Now you must understand how to send the form data to a server. Learn how the "submit" button works and how forms send data and in which format. When you click the button the browsers should send a request with all the data from the form. You can view all the details of this request in the "Network" tab in the Chrome devtools.

Now we will add some custom styling to the inputs. Make <input> and <textarea> elements to have only the bottom dashed border. When the input in the focussed state – the bottom border should be a solid light blue line. To style the select field, try this approach https://www.filamentgroup.com/lab/select-css.html

Implement custom design for the radio buttons + make the stars grayed out by default and then when you select a radio-button it should highlight the stars with gold color. By default, selected the first radio-button (5 stars).