Forms and Input Fields

Forms and Input Fields

<template>
  <!-- Card component -->
  <div class="slds-card">
    <div class="slds-card__body slds-p-around_medium">
      <!-- Form element -->
      <form class="slds-form">
        <!-- First Name field -->
        <div class="slds-form-element">
          <label class="slds-form-element__label">First Name</label>
          <div class="slds-form-element__control">
            <input type="text" class="slds-input" placeholder="Enter your first name">
          </div>
        </div>

        <!-- Last Name field -->
        <div class="slds-form-element">
          <label class="slds-form-element__label">Last Name</label>
          <div class="slds-form-element__control">
            <input type="text" class="slds-input" placeholder="Enter your last name">
          </div>
        </div>

        <!-- Email field -->
        <div class="slds-form-element">
          <label class="slds-form-element__label">Email</label>
          <div class="slds-form-element__control">
            <input type="email" class="slds-input" placeholder="Enter your email address">
          </div>
        </div>

        <!-- Role selection -->
        <div class="slds-form-element">
          <label class="slds-form-element__label">Role</label>
          <div class="slds-form-element__control">
            <select class="slds-select">
              <option>Select a role</option>
              <option>Admin</option>
              <option>User</option>
            </select>
          </div>
        </div>

        <!-- Terms and Conditions checkbox -->
        <div class="slds-form-element">
          <div class="slds-checkbox">
            <input type="checkbox" id="agree" class="slds-checkbox__input">
            <label class="slds-checkbox__label" for="agree">
              <span class="slds-checkbox_faux"></span>
              <span class="slds-form-element__label">I agree to the terms and conditions</span>
            </label>
          </div>
        </div>

        <!-- Newsletter subscription checkbox -->
        <div class="slds-form-element">
          <div class="slds-checkbox">
            <input type="checkbox" id="subscribe" class="slds-checkbox__input">
            <label class="slds-checkbox__label" for="subscribe">
              <span class="slds-checkbox_faux"></span>
              <span class="slds-form-element__label">Subscribe to newsletter</span>
            </label>
          </div>
        </div>

        <!-- Gender selection radio buttons -->
        <div class="slds-form-element">
          <div class="slds-radio">
            <input type="radio" id="male" class="slds-radio__input" name="gender">
            <label class="slds-radio__label" for="male">
              <span class="slds-radio_faux"></span>
              <span class="slds-form-element__label">Male</span>
            </label>
          </div>
          <div class="slds-radio">
            <input type="radio" id="female" class="slds-radio__input" name="gender">
            <label class="slds-radio__label" for="female">
              <span class="slds-radio_faux"></span>
              <span class="slds-form-element__label">Female</span>
            </label>
          </div>
        </div>

        <!-- Submit button -->
          <div class="slds-form-element">
          <button class="slds-button slds-button_neutral" type="submit">Submit</button>
        </div>
      </form>
    </div>
  </div>
</template>