- [DONE] Only one tag is being used to contain all the form elements.
- [DONE] Fieldsets and legends have been added for each of the following sections:
- "Contact Information" section of the page, and
- The "Newsletter" section of the page
Form Fields and Labels
- [DONE] Includes all of the required form fields:
- text input
- email input
- telephone input
- select menu
- radio buttons
- submit button
- [DONE] Each form field includes the following attributes:
- input: has id, type and name attributes.
- select and textarea: includes id and name attributes.
- [DONE] Each form field includes a label, and each label’s for attribute is associated with a unique id on its corresponding form field.
- [DONE] The input field's placeholder attribute has been used to add the text "required" to:
- the Full Name field
- the Email address field
- [DONE] Form contains additional placeholder text for other text fields.
- [DONE] Uses the required attribute to add HTML5 Validation for required fields.
- [DONE] The HTML file include the viewport meta tag in the head of each document.
- [DONE] A mobile-first approach is utilized using min-width properties for media queries.
- [DONE] Appropriate media query is in place to match the screen size for tablet and desktop screens at 768px.
Design and Styling
- [DONE] Roughly matches layout of the mobile and desktop mockups. General spacing and arrangement of the elements matches the design of the mockups for:
- [DONE] The label text position matches the mockups:
- Above the form field for mobile.
- To the left side of the form field for desktop.
- [DONE] Uses a Google Font.
- [DONE] Includes focus states for text fields.
BOTH of the following additional styling enhancements have been added to the form:
- [DONE] Change the background color for at least ONE of the main sections of the site.
- [DONE] Uses CSS transitions for focus states.
- [DONE] HTML and CSS code passes the validation.
- [DONE] HTML and CSS errors are accepted exceptions