corso vuejs
view | history | commit | commitdiff
Cristiano Magro
2025-01-08 79dfa2cf60feebd3e205d2992167b61171d7a47d
commit | author | age
a19e6e 1 <template>
326c8c 2   <form @submit.prevent="submitForm">
a19e6e 3     <div class="form-control">
CM 4       <label for="user-name">Your Name</label>
326c8c 5       <input id="user-name" name="user-name" type="text" v-model="userName" />
a19e6e 6     </div>
CM 7     <div class="form-control">
8       <label for="age">Your Age (Years)</label>
79dfa2 9       <input id="age" name="age" type="number" v-model="userAge" ref="inputAge"/>
a19e6e 10     </div>
CM 11     <div class="form-control">
12       <label for="referrer">How did you hear about us?</label>
13       <select id="referrer" name="referrer">
14         <option value="google">Google</option>
15         <option value="wom">Word of mouth</option>
16         <option value="newspaper">Newspaper</option>
17       </select>
18     </div>
19     <div class="form-control">
20       <h2>What are you interested in?</h2>
21       <div>
22         <input id="interest-news" name="interest" type="checkbox" />
23         <label for="interest-news">News</label>
24       </div>
25       <div>
26         <input id="interest-tutorials" name="interest" type="checkbox" />
27         <label for="interest-tutorials">Tutorials</label>
28       </div>
29       <div>
30         <input id="interest-nothing" name="interest" type="checkbox" />
31         <label for="interest-nothing">Nothing</label>
32       </div>
33     </div>
34     <div class="form-control">
35       <h2>How do you learn?</h2>
36       <div>
37         <input id="how-video" name="how" type="radio" />
38         <label for="how-video">Video Courses</label>
39       </div>
40       <div>
41         <input id="how-blogs" name="how" type="radio" />
42         <label for="how-blogs">Blogs</label>
43       </div>
44       <div>
45         <input id="how-other" name="how" type="radio" />
46         <label for="how-other">Other</label>
47       </div>
48     </div>
49     <div>
50       <button>Save Data</button>
51     </div>
52   </form>
53 </template>
54
326c8c 55 <script>
CM 56 export default {
57   data() {
58     return {
59       userName: '',
79dfa2 60       userAge: null,
326c8c 61     }
CM 62   },
63   methods: {
64     submitForm() {
79dfa2 65       console.log('Username: ' + this.userName);
326c8c 66       this.userName = '';
79dfa2 67       console.log('User age: '); // + this.userName);
CM 68       console.log(this.userAge);
69       console.log(this.$refs.inputAge.value);
70       console.log(18); // + this.userName);
71
72       this.userAge = null;
73     }
326c8c 74   }
CM 75
76 }
77 </script>
78
a19e6e 79 <style scoped>
CM 80 form {
81   margin: 2rem auto;
82   max-width: 40rem;
83   border-radius: 12px;
84   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
85   padding: 2rem;
86   background-color: #ffffff;
87 }
88
89 .form-control {
90   margin: 0.5rem 0;
91 }
92
93 label {
94   font-weight: bold;
95 }
96
97 h2 {
98   font-size: 1rem;
99   margin: 0.5rem 0;
100 }
101
102 input,
103 select {
104   display: block;
105   width: 100%;
106   font: inherit;
107   margin-top: 0.5rem;
108 }
109
110 select {
111   width: auto;
112 }
113
114 input[type='checkbox'],
115 input[type='radio'] {
116   display: inline-block;
117   width: auto;
118   margin-right: 1rem;
119 }
120
326c8c 121 input[type='checkbox']+label,
CM 122 input[type='radio']+label {
a19e6e 123   font-weight: normal;
CM 124 }
125
126 button {
127   font: inherit;
128   border: 1px solid #0076bb;
129   background-color: #0076bb;
130   color: white;
131   cursor: pointer;
132   padding: 0.75rem 2rem;
133   border-radius: 30px;
134 }
135
136 button:hover,
137 button:active {
138   border-color: #002350;
139   background-color: #002350;
140 }
141 </style>