Foundation Kitchensink Form

<div class="grid-container">
  <div class="grid-x align-center">
    <form
      class="medium-6 large-4 radius bordered padding-2"
      method="POST"
      action="https://herotofu.com/start"
      enctype="multipart/form-data"
    >
      <label class="display-block margin-bottom-1">
        <span>Your name</span>
        <input
          name="name"
          type="text"
          class="radius"
          placeholder="Joe Bloggs"
        />
      </label>

      <label class="display-block margin-bottom-1">
        <span>Email address</span>
        <input
          name="email"
          type="email"
          class="radius"
          placeholder="joe.bloggs@example.com"
        />
      </label>

      <label class="display-block margin-bottom-1">
        <span>Your photo</span> <br />
        <span class="button secondary">Choose file</span>
        <input name="photo" type="file" class="show-for-sr" />
      </label>

      <label class="display-block margin-bottom-1">
        <span>When is your birthday?</span>
        <input name="birthday" type="date" class="radius" />
      </label>

      <label class="display-block margin-bottom-1">
        <span>What kind of present you expect this year?</span>
        <select name="present" class="radius">
          <option>Chocolate cake</option>
          <option>Dancing cat</option>
          <option>Custom meme about me</option>
          <option>Zoom backgrounds for the rest of my life</option>
        </select>
      </label>

      <label class="display-block margin-bottom-1">
        <span>Interesting... Please tell more</span>
        <textarea
          name="message"
          class="radius"
          rows="3"
          placeholder="Mmmm... cake."
        ></textarea>
      </label>

      <div class="margin-bottom-1">
        <div>
          <label>
            <input type="radio" name="season" value="summer" checked />
            <span>I like summer</span>
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="season" value="winter" />
            <span>I'm more into winter</span>
          </label>
        </div>
      </div>

      <div class="margin-bottom-1">
        <label class="display-box">
          <input name="offers" value="yes" type="checkbox" />
          <span>Email me news and special offers</span>
        </label>
      </div>

      <div class="margin-bottom-1">
        <button type="submit" class="button radius">Regular Button</button>
      </div>

      <div class="text-right">
        <small
          >by
          <a
            href="https://herotofu.com/start"
            style="color: #000"
            target="_blank"
            >HeroTofu</a
          ></small
        >
      </div>
    </form>
  </div>
</div>

/* The following CSS is used only for the preview,
   please don't copy it to your production code */
body { padding: 2rem 0; }