Signup Component

Signup.vue

<template>
  <form>
    <label for="email">Email:</label>
    <input id="email" type="email" v-model="email" required>

    <label for="password">Password:</label>
    <input id="password" type="password" v-model="password" required>

    <label for="role">Role: </label> <br>
    <select id="role" v-model="role">
      <option value="developer">Developer </option>
      <option value="moderator">Moderator </option>
    </select>
    <br>

    <div class="terms">
      <label for="terms">Accept Terms and Conditions & Privacy Policy</label>
      <input id="terms" type="checkbox" v-model="terms" required>
    </div>

    <div>
      <label for="createpost">Create Post</label>
      <input id="createpost" value="create" type="checkbox" v-model="perms">
    </div>

    <div>
      <label for="moderatepost">Moderate Post</label>
      <input id="moderatepost" value="moderate" type="checkbox" v-model="perms">
    </div>

    <button>Sign up</button>
  </form>

  <p>
    Email - {{ email }} <br>
    Password - {{ password }} <br>
    Role - {{ role }} <br>
    Terms? - {{ terms }} <br>
    Perms - {{ perms }}
  </p>
</template>

<script>
export default {
  name: "SignupForm",
  data() {
    return {
      email: "",
      password: "",
      role: "",
      terms: false,
      perms: []
    }
  }
}
</script>

<style>
  form {
    max-width: 420px;
    margin: 30px auto;
    background: white;
    text-align: left;
    padding: 40px;
    border-radius: 10px;

  }

  label {
    color: #aaa;
    display: inline-block;
    margin: 25px 0 15px;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
  }

  input, select {
    display: block;
    padding: 10px 6px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ddd;
    color: #555;
  }

  button {
    margin-top: 10px;
  }

  input[type=checkbox] {
    display: inline-block;
    width: 80px;
    margin: 0 30px 0 0;
    position: relative;
    top: 2px
  }


</style>