利用vue收集表单元素

1. html form 元素

HTML 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

1.1. form 元素属性

1.1.1. accept-charset

一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码。浏览器以这些编码被列举的顺序使用它们。默认值是一个保留字符串 “UNKNOWN”。此字符串指的是，和包含此表单元素的文档相同的编码。 在之前版本的 HTML 中，不同的字符编码可以用空格或逗号分隔。在 HTML5 中，只有空格可以允许作为分隔符。

1.1.2. name

表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。

1.2. 关于提交表单的属性

下列属性控制提交表单时的行为。

1.2.1. action

处理表单提交的 URL。这个值可被 、 或 元素上的 formaction 属性覆盖。

1.2.2. enctype

当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型 。可能的取值有：

• application/x-www-form-urlencoded：未指定属性时的默认值。
• multipart/form-data：当表单包含 type=file 的 元素时使用此值。
• text/plain：出现于 HTML5，用于调试。这个值可被 、 或 元素上的 formenctype 属性覆盖。

1.2.3. method

浏览器使用这种 HTTP 方式来提交表单。可能的值有：

• post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
• get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 ‘?’ 作为分隔符，没有副作用 时使用这个方法。
• dialog：如果表单在 元素中，提交时关闭对话框。此值可以被 、 或 元素中的 formmethod 属性覆盖。

1.2.4. novalidate

此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 、 或 元素中的 formnovalidate 属性覆盖。

1.2.5. target

表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个浏览上下文 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义：

• _self：默认值。在相同浏览上下文中加载。
• _blank：在新的未命名的浏览上下文中加载。
• _parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致。
  _top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致。此值可以被 、 或 元素中的 formtarget 属性覆盖。

2. 利用 Vue 收集 form 表单数据

<template>
  <div class="hello">
      <form action="">
        用户姓名： <input type="text" v-model="userInfo.username"> <br><br>
        密码： <input type="password" v-model="userInfo.password"><br><br>
        性别:  <input type="radio" name='sex' value="male" v-model="userInfo.sex">男 
        <input type="radio" name='sex' value="female" v-model="userInfo.sex">女<br><br>
        复选框： <input type="checkbox" name='hobby' value="game" v-model="userInfo.myhobby">
                 打游戏<input type="checkbox" name='hobby' value="basketball" v-model="userInfo.myhobby">
                 篮球<input type="checkbox" name='hobby' value="swim" v-model="userInfo.myhobby">
                 游泳 <br><br>
        城市：<select name="city" id="city" v-model="userInfo.city">
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
        </select> <br><br>
        备注： <textarea name="remark" id="remark" cols="30" rows="10" v-model="userInfo.remark"></textarea>           <br><br>
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
        <button @click="mysubmit">提交</button>
      </form>
      <button @click="mysubmit">打印信息</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      userInfo: {
        username: '小明',
        password: '123456',
        sex: 'male',
        myhobby: ['game', 'basketball'],
        city: 'shanghai',
        remark: '你好',
        agree: true
      }
    }
  },
  methods: {
    mysubmit() {
      console.log('userInfo = ', this.userInfo)
    }
  }

}
</script>