Why are you setting disabled property for each input element?

#html #react #frontend #webdev

If you set a disabled property on the fieldset element, there is no need to set disabled on each input element.

Before😅:

<form onSubmit={handleSubmit}>
  <div>
    <label>
      Email:
      <input disabled={loading} type="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input disabled={loading} type="password" />
    </label>
  </div>
  <input disabled={loading} type="submit" value="submit" />
</form>

After😎:

<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>

Bonus: Use legend element to display caption in the fieldset element

<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <legend>Login</legend>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>