lesson 141: forms and inputs
This commit is contained in:
parent
31dc57dfcf
commit
176766f4e6
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<form>
|
||||
<form @submit.prevent="submitForm">
|
||||
<div class="form-control">
|
||||
<label for="user-name">Your Name</label>
|
||||
<input id="user-name" name="user-name" type="text" />
|
||||
<input id="user-name" name="user-name" type="text" v-model="userName" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label for="age">Your Age (Years)</label>
|
||||
<input id="age" name="age" type="number" />
|
||||
<input id="age" name="age" type="number" v-model="userAge" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label for="referrer">How did you hear about us?</label>
|
||||
<select id="referrer" name="referrer">
|
||||
<select id="referrer" name="referrer" v-model="referrer">
|
||||
<option value="google">Google</option>
|
||||
<option value="wom">Word of mouth</option>
|
||||
<option value="newspaper">Newspaper</option>
|
||||
|
@ -19,32 +19,77 @@
|
|||
<div class="form-control">
|
||||
<h2>What are you interested in?</h2>
|
||||
<div>
|
||||
<input id="interest-news" name="interest" type="checkbox" />
|
||||
<input
|
||||
id="interest-news"
|
||||
name="interest"
|
||||
type="checkbox"
|
||||
value="news"
|
||||
v-model="interest"
|
||||
/>
|
||||
<label for="interest-news">News</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="interest-tutorials" name="interest" type="checkbox" />
|
||||
<input
|
||||
id="interest-tutorials"
|
||||
name="interest"
|
||||
type="checkbox"
|
||||
value="tutorials"
|
||||
v-model="interest"
|
||||
/>
|
||||
<label for="interest-tutorials">Tutorials</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="interest-nothing" name="interest" type="checkbox" />
|
||||
<input
|
||||
id="interest-nothing"
|
||||
name="interest"
|
||||
type="checkbox"
|
||||
value="nothing"
|
||||
v-model="interest"
|
||||
/>
|
||||
<label for="interest-nothing">Nothing</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<h2>How do you learn?</h2>
|
||||
<div>
|
||||
<input id="how-video" name="how" type="radio" />
|
||||
<input
|
||||
id="how-video"
|
||||
name="how"
|
||||
type="radio"
|
||||
value="video"
|
||||
v-model="how"
|
||||
/>
|
||||
<label for="how-video">Video Courses</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="how-blogs" name="how" type="radio" />
|
||||
<input
|
||||
id="how-blogs"
|
||||
name="how"
|
||||
type="radio"
|
||||
value="blogs"
|
||||
v-model="how"
|
||||
/>
|
||||
<label for="how-blogs">Blogs</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="how-other" name="how" type="radio" />
|
||||
<input
|
||||
id="how-other"
|
||||
name="how"
|
||||
type="radio"
|
||||
value="other"
|
||||
v-model="how"
|
||||
/>
|
||||
<label for="how-other">Other</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="confirm-terms"
|
||||
id="confirm-terms"
|
||||
v-model="confirmTerms"
|
||||
/>
|
||||
<label for="confirm-terms">Agree to terms of use?</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button>Save Data</button>
|
||||
|
@ -52,6 +97,37 @@
|
|||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userName: '',
|
||||
userAge: null,
|
||||
referrer: 'wom',
|
||||
interest: [],
|
||||
how: null,
|
||||
confirmTerms: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
console.log('Username: ' + this.userName);
|
||||
this.userName = '';
|
||||
console.log(this.userAge);
|
||||
this.userAge = null;
|
||||
console.log(this.referrer);
|
||||
this.referrer = 'wom';
|
||||
console.log(this.interest);
|
||||
this.interest = [];
|
||||
console.log(this.how);
|
||||
this.how = null;
|
||||
console.log(this.confirmTerms);
|
||||
this.confirmTerms = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
form {
|
||||
margin: 2rem auto;
|
||||
|
|
Reference in New Issue
Block a user