DEV Community

Cover image for Why are you setting disabled property for each input element?
Kyohei Fukuda
Kyohei Fukuda

Posted on

Why are you setting disabled property for each input element?

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

form with fieldset


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>
Enter fullscreen mode Exit fullscreen mode

fieldset with legend

Discussion (0)