New Vancouver Club Form

by James Doyle

HTML

<form method="POST" action="" enctype="multipart/form-data">
  <p>
    <label for="profile[first_name]">First Name</label>
    <input type="text" id="profile[first_name]" name="profile[first_name]" class="form-control" />
  </p>
  <p>
    <label for="profile[middle_name]">Middle Name</label>
    <input type="text" id="profile[middle_name]" name="profile[middle_name]" class="form-control" />
  </p>
  <p>
    <label for="profile[last_name]">Last Name</label>
    <input type="text" id="profile[last_name]" name="profile[last_name]" class="form-control" />
  </p>
  <p>
    <label for="profile[email]">Your Email</label>
    <input type="email" id="profile[email]" name="profile[email]" class="form-control" />
  </p>
  <p>
    <label for="profile[phone_number]">Phone Number</label>
    <input type="email" id="profile[phone_number]" name="profile[phone_number]" class="form-control" />
  </p>
  <p>
    <label for="details[name-prefix]">Name Prefix</label>
    <select id="details[name-prefix]" name="details[name-prefix]" class="form-control">
      <option value="">None</option>
      <option value="Dr">Dr</option>
      <option value="Miss">Miss</option>
      <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Ms">Ms</option>
      <option value="Mx">Mx</option>
    </select>
  </p>
  <p>
    <label for="details[name-suffix]">Name Suffix</label>
    <select id="details[name-suffix]" name="details[name-suffix]" class="form-control">
      <option value="">None</option>
      <option value="I">I</option>
      <option value="II">II</option>
      <option value="III">III</option>
      <option value="IV">IV</option>
      <option value="Jr">Jr</option>
      <option value="Sr">Sr</option>
    </select>
  </p>
  <p>
    <label for="details[gender]">Gender</label>
    <select id="details[gender]" name="details[gender]" class="form-control">
      <option value="Male">Male</option>
      <option value="Female">Female</option>
      <option...

CSS

body {
  width: 400px;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 14px;
}

label {
  width: 100%;
  display: inline-block;
  margin: 0.5rem 0;
  user-select: none;
}

input:not([type=checkbox]),
textarea,
select {
  width: 100%;
  display: inline-block;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

select {
  height: 34px;
  font-size: 1em;
  background: white;
  border-radius: 0;
}