为什么需要form嵌套input？

Question

半吊子出家的前端在看很多项目的时候都看到form嵌套input，例如下面的：

<form class="search_form">
  <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input" v-model="searchValue" @input="checkInput">
  <input type="submit" name="submit" class="search_submit" @click.prevent="searchTarget('')">
</form>

form在这里的用途是什么呢？发起请求也是@click里的事件里调起请求

Answer 1

1、在不使用AJAX提交数据的时候可以使用form表单提交。例如(PHP,JSP,ASP)
2、方便做数据校验，可以使用 label for
3、现在基本上可以不使用form。例如你的例子就可以不使用form

Answer 2

如果你不需要表单提交的话，可以不写form标签，加上是为了语义化，告诉别人这是个表单。

Answer 3

方便一次性获取form里面的所有表单数据。

比如：

  <form id='form'>
    <input value="1" name="a" />
    <input value="2" name="b" />
    <input value="3" name="c" />
    <input value="4" name="d" />
  </form>

  <script>
    var inputs = document.getElementById("form").elements;
    var keyValues = {};
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      keyValues[input.name] = input.value;
    }
    console.log(keyValues);
  </script>

Answer 4

使用 form 标签 配置好 method 和 action 即使在浏览器的 javascript 被禁止的时候，页面仍可以与服务器进行简单的交互。

不过现在基本都是用 XMLHTTPRequest对象 提交数据，用不用 form 其实个人觉得无所谓。

Answer 5

如果这段代码是
写在移动端并且注意到input的type为search
那他的目的
可能是调起ios带有搜索按钮的键盘

实现ios调起带有【搜索】按钮的键盘时，只写type='search'不起作用，必须包一层form

Answer 6

HTML <form> 标签

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

Answer 7

我的理解是用form主要是用来表单提交的。如果不用表单提交。用不用form无所谓。直接写input也行，然后获取input里输入的值，进行ajax提交。