在表单元素中使用“名称”属性？ [复制]答案

【问题标题】：Use of "name" property in form elements? [duplicate]在表单元素中使用“名称”属性？ [复制]
【发布时间】：2017-05-11 08:23:02
【问题描述】：

我注意到表单元素在 HTML 中还包含一个 name 参数，例如：

<input type="button" id="btnID" name="btnNAME" value="click me">

我不太明白name 的用法。在下面的代码 sn-p 中，我只是通过它的id 将 btn 的颜色更改为红色。 name 属性的用途是什么？（一个例子会很好）

#btnID {
  background-color: red;
}

&lt;input type="button" id="btnID" name="btnNAME" value="click me"&gt;

【问题讨论】：

name 基本上是保存输入或选择字段的值。因此，如果您提交表单并且没有提及 name 属性，您将不会在请求数据中获取字段值。
老兄，你接受过你之前问题的答案吗？
哪一只海鸥？

标签： javascript jquery html css

【解决方案1】：

name 属性在您不通过它发送数据时并不是必需的。表单输入元素的id 可以达到将元素与JavaScript和CSS挂钩的目的。

name 属性用于您的浏览器向服务器发送的HTTP 请求中，作为与value 属性中包含的数据相关联的变量名。

这里我以在登录表单中使用 php 提取数据为例。如果您不了解 php，您可能不会知道 $_POST 和 $_GET。现在只知道它们用于提取与此 HTTP 请求一起发送的数据。

<form action="login.php">
    <input type="text" name="user" value="kittyCat">
    <input type="password" name="password" value="querty123">
</form>

现在在login.php 文件中，您可以像这样提取数据：

$userName = $_POST['user'];
$password = $_POST['password'];

这里user 指向第一个输入，因此$username 将等于该输入的value，即"kittyCat"。同样$password 将等于"qwerty123"。

【讨论】：

【解决方案2】：

为表单控件使用名称属性（例如 input 和 select'），因为这是在表单提交时发生的 POST 或 GET 调用中使用的标识符。

【讨论】：

【解决方案3】：

NAME 属性用于通过 PHP 获取元素的值，例如：

带有 PHP 的 HTML

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST'):
    $fn = $_POST['first_name'];
    echo $fn; // prints "Santa" on the page

    //or we can create something:

    ?><p><?php echo $fn; ?></p><?php // creates a p element w/ santa inside

endif;
?>

<form method="post">
<input type="text" name="first_name" value="Santa" />
<input type="submit" value="Do Something" />
</form>

一旦提交了 HTML 表单，小块 php 代码就会运行。

如您所知，您可以使用 CSS 通过按名称抓取元素来设置元素样式，例如：

HTML

<input name="something" type="text" />

CSS

input[name="something"] { color: red; }

【讨论】：