Creating a Contact Form: Key Learnings

Saurabh Ramesh Kacholiya — Sun, 19 Nov 2023 17:03:20 +0000

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.

Thinking twice before writing IF

Saurabh Ramesh Kacholiya — Mon, 27 Sep 2021 13:19:26 +0000

Recently I come across a very healthy discussion with my manager about writing IF condition

so whenever you are writing if condition as a developer we open a decision tree (for example yes and no) and when the codebase increases more branching of decisions paths are introduced in the code resulting in difficulty to read and debug the code.

To avoid we can use Composition where we are directly passing the render component to child components from the parent as shown in the above image. This way we are also using dumb components to avoid side effects in the children components.

PS. I know it is not worthy to replace every IF the condition from your codebase. I also don't do that. that is why the blog title is Thinking twice before writing if and still, you feel you cant work without if go on use IF condition

DEV Community: Saurabh Ramesh Kacholiya

Creating a Contact Form: Key Learnings

1. Form Structure:

2. Label Accessibility:

Thinking twice before writing IF