Style form in react

is there a way I can style this form nicely without putting an id to every label and input to move them separately. tried it with flexbox but couldn’t target them specifically.

obviously happy to receive some fun looking form styling tips :slight_smile:

<form className="quoteform" onSubmit={handleSubmit}>
      <label id="firstname">
        First Name:{" "}
        <input
          id="firstname"
          type="text"
          name="firstName"
          value={inputs.firstName || ""}
          onChange={handleChange}
        />
      </label>

      <label id="lastname">
        Last Name:
        <input
          id="lastname"
          type="text"
          name="lastName"
          value={inputs.lastName || ""}
          onChange={handleChange}
        />
      </label>

      <label id="email">
        Email Address:
        <input
          id="email"
          type="text"
          name="email"
          value={inputs.email || ""}
          onChange={handleChange}
        />
      </label>
      <label>
        Property Address:
        <input
          type="text"
          name="address"
          value={inputs.address || ""}
          onChange={handleChange}
        />
      </label>
      <p>Property Size</p>
      <label>
        Bed rooms
        <input
          type="text"
          name="beds"
          value={inputs.beds || ""}
          onChange={handleChange}
        />
      </label>
      <label>
        Bathrooms
        <input
          type="text"
          name="bathrooms"
          value={inputs.bathrooms || ""}
          onChange={handleChange}
        />
      </label>
      <br />
      <br />
      <input type="submit" />
    </form>

you can’t have the same id on multiple elements

1 Like