Frontend Mentor - Newsletter sign-up form with success message

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  LABELS 🔖:

  • input elements wants a label associated with it properly, Currently the label element you used in this form is not properly associated.

  ---

  • A <label> is used to create a caption for a form control. The <label> can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute

  ---

  • Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etc, is often apparent to sighted users

  ---

  • Even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields.

  ---

  • Example:

  <label class="large-label" for="user-name">
    Your name
  </label>
  
   <input id="user-name" name="user-name" type="text" />
  

  ---

  • You need to proper for attribute for label and you need to associate that with input element using id and name attribute.

  ---

  • All the three attribute's value must want to be the same for proper association.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0