为什么需要form嵌套input?

幽鬼兔
  • 180

半吊子出家的前端在看很多项目的时候都看到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里的事件里调起请求

回复
阅读 2.7k
7 个回答
✓ 已被采纳

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

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

方便一次性获取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>

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

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

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

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

HTML <form> 标签

定义和用法

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

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

宣传栏