<div id="app" v-cloak>

  <form>
  <p>
  <label for="text1">text:</label> 
  <input v-model="text1" id="text1" type="text">
  </p>

  <p>
  <label for="text2">text (maxlength=5):</label> 
  <input v-model="text2" id="text2" type="text" maxlength=5>
  </p>

  <p>
  <label for="button1">button:</label> 
  <input v-model="button1" id="button1" type="button">
  </p>

  <p>
  checkbox:<br/>
  <span v-for="(cbv,idx) in checkbox1Values">
    <input v-model="checkbox1" :value="cbv" type="checkbox"
           :id="'checkbox1'+idx"/> <label :for="'checkbox1'+idx">{{ cbv }}</label><br/>
  </span>
  </p>

  <p>
  <label for="color1">color:</label> 
  <input v-model="color1" id="color1" type="color">
  </p>

  <p>
  <label for="date1">date:</label> 
  <input v-model="date1" id="date1" type="date">
  </p>

  <p>
  <label for="datetimelocal1">datetime-local:</label>
  <input v-model="datetimelocal1" id="datetimelocal1" type="datetime-local">
  </p>

  <p>
  <label for="email1">email:</label>
  <input v-model="email1" id="email1" type="email">
  </p>

  <p>
  <label for="file11">file:</label>
   <!--
   <input v-model="file1" id="file1" type="file">
   -->
   <input @change="setFile" id="file1" type="file">
 </p>

  <p>
  <label for="hidden1">hidden:</label>
  <input v-model="hidden1" id="hidden1" type="hidden">
  </p>
  
  <p>
  <label for="image1">picture:</label>
  <input :src="image1" id="image1" type="image">
  </p>
  
  <p>
  <label for="month1">month:</label>
  <input v-model="month1" id="month1" type="month">
  </p>

  <p>
  <label for="number1">number:</label>
  <input v-model="number1" id="number1" type="number">
  </p>

  <p>
  <label for="password1">password:</label> 
  <input v-model="password1" id="password1" type="password">
  </p>

  <p>
  radio:<br/> 
  <span v-for="(rbv,idx) in radio1Values">
    <input v-model="radio1" :value="rbv" type="radio" 
           :id="'radio1'+idx"/> <label :for="'radio1'+idx">{{ rbv }}</label><br/>
  </span>
  </p>

  <p>
  <label for="range1">range:</label> 
  <input v-model="range1" id="range1" type="range" min="1" max="10">
  </p>
  
  <p>
  <label for="search1">search:</label> 
  <input v-model="search1" id="search1" type="search">
  </p>

  <p>
  <label for="submit1">submit:</label> 
  <input v-model="submit1" id="submit1" type="submit">
  </p>
 
  <p>
  <label for="tel1">tel:</label> 
  <input v-model="tel1" id="tel1" type="tel">
  </p>

  <p>
  <label for="time1">time:</label> 
  <input v-model="time1" id="time1" type="time">
  </p>

  <p>
  <label for="url1">url:</label> 
  <input v-model="url1" id="url1" type="url">
  </p>

  <p>
  <label for="week1">week:</label> 
  <input v-model="week1" id="week1" type="week">
  </p>
  
  <p>
  select:<br/> 
  <select v-model="select1">
    <option v-for="sel in select1Values">{{ sel }}</option>
  </select>
  </p>
 
  <p>
  select multiple:<br/> 
  <select v-model="select2" multiple>
    <option v-for="sel in select1Values">{{ sel }}</option>
  </select>
  </p>
  
  <p>
    <label for="textarea1">textarea</label>
    <textarea v-model="textarea1" id="textarea1"></textarea>
  </p>
  </form>
  
  <h2>Debug Area:</h2>
  <p>
    text1 = {{ text1 }}<br/>
    button1 = {{ button1 }}<br/>
    checkbox1 = {{ checkbox1 }}<br/>
    color1 = {{ color1 }}<br/>
    date1 = {{ date1 }}<br/>
    datetimelocal1 = {{ datetimelocal1 }}<br/>
    email1 = {{ email1 }}<br/>
    hidden1 = {{ hidden1 }}<br/>
    image1 = {{ image1 }}<br/>
    month1 = {{ month1 }}<br/>
    number1 = {{ number1 }}<br/>
    password1 = {{ password1 }}<br/>
    radio1 = {{ radio1 }}<br/>
    range1 = {{ range1 }}<br/>    
    search1 = {{ search1 }}<br/>
    submit1 = {{ submit1 }}<br/>
    tel1 = {{ tel1 }}<br/>
    time1 = {{ time1 }}<br/>    
    url1 = {{ url1 }}<br/>    
    week1 = {{ week1 }}<br/>    
    select1 = {{ select1 }}<br/>
    select2 = {{ select2 }}<br/>
    textarea1 = 
    <pre>{{ textarea1 }}</pre>
  </p>
</div>
[v-cloak] {display: none}

label {
  width: 150px;  
  display: inline-block;
}

input[type=text], input[type=email] {
  width: 300px;
}

textarea {
  width: 300px;
  height: 100px;
}
Vue.config.productionTip = false;
Vue.config.devtools = false;

const app = new Vue({
  el:'#app',
  data: {
    text1:'Ray',
    text2:'Raymond Camden',
    button1:'button1',
    color1:'#cc8800',
    date1:'2020-08-20',
    datetimelocal1:'2020-01-31T12:38:00.000',
    email1:'raymondcamden@gmail.com',
    file1:'',
    hidden1:'you can\'t see me...',
    image1:'http://placekitten.com/g/200/300',
    month1:'2020-04',
    number1:6,
    password1:'kyloren',
    radio1: 'beer',
    radio1Values: ['pizza', 'donuts', 'beer', 'hamburgers' ],
    range1: 6,
    search1:'search text',
    submit1: 'Submit or Die!',
    tel1: '555-555-5555',
    time1:'13:14:00.000',
    url1:'https://www.raymondcamden.com',
    week1:'2021-W02',
    checkbox1: ['red', 'blue'],
    checkbox1Values: ['red', 'blue', 'green', 'orange' ], 
    select1: 'hbo', 
    select1Values: ['cinemax', 'showtime', 'hbo', 'cbs' ],
    select2: ['showtime', 'cbs'], 
    select2Values: ['cinemax', 'showtime', 'hbo', 'cbs' ],
    textarea1:'This is my text area\nIt is better than yours...'
  },
  methods:{
    setFile(e) {
      console.log('selected file(s)', e.target.files);
      // grab the file name and do something with it
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue