Creating a Contact Form: Key Learnings

1. Form Structure:

• Action Attribute:

  • Use the action attribute to specify the URL where the form data should be submitted. Example: action="some URL".

• Method Attribute:

  • Set the method attribute to "post" to send form data securely.

• Button Type:

  • The default button type is "submit." Placing it inside the form will trigger the onSubmit event of the <form>.

• Input Naming:

  • Passing a name attribute in the input tags establishes the key in the form data.

Example:

   <form action="some URL" method="post" onSubmit={onSubmit}>
       <label htmlFor="name">Name:</label>
       <input type="text" id="name" name="name">

       <label htmlFor="email">Email:</label>
       <input type="email" id="email" name="email">

       <button type="submit">Submit</button>
   </form>

2. Label Accessibility:

• HTML for Attribute:
  • Use the for attribute in the <label> tag to associate it with a specific input using the id of that input.

Example:

   <label htmlFor="username">Username:</label>
   <input type="text" id="username" name="username">

This ensures improved accessibility and helps screen readers understand the relationship between labels and inputs.