Materialize Kitchensink Form

<div class="container">
  <div class="row">
    <div class="col s12 m8 offset-m2 offset-l3 l7 offset-xl4 xl6">
      <form
        method="POST"
        action="https://herotofu.com/start"
        enctype="multipart/form-data"
      >
        <div class="row">
          <div class="input-field col s12">
            <input
              name="name"
              placeholder="Joe Bloggs"
              id="full_name"
              type="text"
              class="validate"
            />
            <label for="full_name">Your name</label>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s12">
            <input
              name="email"
              placeholder="joe.bloggs@example.com"
              id="email_address"
              type="email"
              class="validate"
            />
            <label for="email_address">Email address</label>
          </div>
        </div>

        <label>Your photo</label>
        <div class="file-field input-field">
          <div class="btn grey lighten-2 grey-text text-darken-3">
            <span>Choose file</span>
            <input name="photo" type="file" />
          </div>
          <div class="file-path-wrapper">
            <input
              class="file-path validate"
              type="text"
              placeholder="Please upload your file"
            />
          </div>
        </div>

        <div class="row">
          <div class="input-field col s12">
            <input name="birthday" type="text" class="datepicker" />
            <label>When is your birthday?</label>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s12">
            <select name="present">
              <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>What kind of present you expect this year?</label>
          </div>
        </div>

        <div class="row">
          <div class="input-field col s12">
            <textarea
              name="message"
              id="message"
              class="materialize-textarea validate"
              placeholder="Mmmm... cake."
            ></textarea>
            <label for="message">Interesting... Please tell more</label>
          </div>
        </div>

        <div class="row">
          <div class="col s12">
            <div>
              <label>
                <input name="season" value="summer" type="radio" checked />
                <span>I like summer</span>
              </label>
            </div>
            <div>
              <label>
                <input name="season" value="winter" type="radio" />
                <span>I'm more into winter</span>
              </label>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col s12">
            <label>
              <input name="offers" value="yes" type="checkbox" />
              <span>Email me news and special offers</span>
            </label>
          </div>
        </div>

        <div class="row">
          <div class="col s12">
            <button type="submit" class="btn waves-effect waves-light">
              Regular Button
            </button>
          </div>
        </div>

        <div class="right-align">
          <small
            >by
            <a
              href="https://herotofu.com"
              class="grey-text text-darken-3"
              target="_blank"
              >HeroTofu</a
            ></small
          >
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var options = {
      defaultDate: new Date(1999, 9, 1),
      setDefaultDate: true,
    };
    var elems = document.querySelectorAll('.datepicker');
    var instances = M.Datepicker.init(elems, options);
  });

  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });
</script>

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