简体   繁体   English

输入标签中“名称”和“值”属性之间的确切区别

[英]exact difference between "name" and "value" attribute in input tag

I know that it might be so easy but I cant understand the exact difference between name and value attributes in an input tag (html).我知道这可能很简单,但我无法理解输入标签 (html) 中名称和值属性之间的确切区别。 what do they do?!他们在做什么?!

Value = The value attribute specifies the value of an element. Value = value 属性指定元素的值。

Name = name is only to post form data. Name = name 仅用于发布表单数据。 The name definies what the name of the attribute will be as soon as the form is submitted.该名称定义了提交表单后属性的名称。 So if you want to read this attribute later you will find it under the "name" in the POST or GET Request.因此,如果您想稍后阅读此属性,您将在 POST 或 GET 请求中的“名称”下找到它。 Whereas the id is used to adress a field or element in javascript or css.而 id 用于寻址 javascript 或 css 中的字段或元素。

actually, the value is the property that defines the input data while the name property defines the input field name that can be used for form handling in backend languages like PHP , ...实际上, value是定义输入数据的属性,而name属性定义了输入字段名称,可用于backend语言(如PHP ,...

the name should be unique (in some cases it can be an array of names like multiple checkboxes use case) while the value can be dynamic and repeatable for all inputs.name应该是唯一的(在某些情况下,它可以是一个名称数组,例如多个复选框用例),而该value可以是动态的,并且对于所有输入都是可重复的。

The Value:价值:

The value attribute specifies the value of an element. value 属性指定元素的值。

The value attribute is used differently for different input types: value 属性用于不同的输入类型:

For "button", "reset", and "submit" - it defines the text on the button对于“button”、“reset”和“submit” ——它定义了按钮上的文本

For "text", "password", and "hidden" - it defines the initial (default) value of the input field对于“text”、“password”和“hidden” ——它定义了输入字段的初始(默认)值

For "checkbox", "radio", "image" - it defines the value associated with the input (this is also the value that is sent on submit)对于“checkbox”、“radio”、“image” ——它定义了与输入关联的值(这也是提交时发送的值)

Note: The value attribute cannot be used with "==> input type="false">.注意: value 属性不能与“==> input type="false"> 一起使用。


Name Attribute:名称属性:

The name attribute specifies the name of an element. name 属性指定元素的名称。 The name attribute is used to reference elements in a JavaScript , or to reference form data after a form is submitted. name 属性用于引用JavaScript 中的元素,或在提交表单后引用表单数据。

Note: Only form elements with a name attribute will have their values passed when submitting a form.注意:只有具有 name 属性的表单元素才会在提交表单时传递它们的值。

As an Example for the [ Name & Value ]:作为 [ 名称和值 ] 的示例:

 var languages = document.getElementsByName("language"); for (var lang of languages) { console.log(lang.value); }
 <!DOCTYPE html> <html> <head> <title> preferred language</title> </head> <body> <p>Select your preferred language:</p> <div> <input type="radio" id="english" name="language" value="english" checked> <label for="english">English</label> <input type="radio" id="hindi" name="language" value="hindi"> <label for="hindi">Hindi</label> <input type="radio" id="spanish" name="language" value="spanish"> <label for="spanish">Spanish</label> </div> </body> </html>


In Java or java-Servlets you could use the name to get/access the value of any element you want, for Example:在 Java 或 java-Servlets 中,您可以使用名称来获取/访问您想要的任何元素的值,例如:

 <!DOCTYPE html> <html> <head> <title>Example for the name attr</title> </head> <body> <form action="${pageContext.request.contextPath}/yourServletURL" method="post"> <p>Normal text field. <input type="text" name="name" /></p> <p>Secret text field. <input type="password" name="pass" /></p> <p>Single-selection radiobuttons. <input type="radio" name="gender" value="M" /> Male <input type="radio" name="gender" value="F" /> Female</p> <p>Single-selection checkbox. <input type="checkbox" name="agree" /> Agree?</p> <p>Multi-selection checkboxes. <input type="checkbox" name="role" value="USER" /> User <input type="checkbox" name="role" value="ADMIN" /> Admin</p> <p>Single-selection dropdown. <select name="countryCode"> <option value="NL">Netherlands</option> <option value="US">United States</option> </select></p> <p>Multi-selection listbox. <select name="animalId" multiple="true" size="2"> <option value="1">Cat</option> <option value="2">Dog</option> </select></p> <p>Text area. <textarea name="message"></textarea></p> <p>Submit button. <input type="submit" name="submit" value="submit" /></p> </form> </body> </html>

在此处输入图片说明

----- Another Example ----- -----另一个例子-----

 <!DOCTYPE html> <html> <head> <title>hii</title> </head> <body> <form action="MyServlet" method="post"> Fname: <input type="text" name="fname" placeholder="type first name" /> <input type="submit" value="ok" /> </form> </body> </html>

=============================================================== ================================================== ==============

This can be accessed anywhere in your servlet/java code as,这可以在您的 servlet/java 代码中的任何地方访问,因为,

String fName = request.getParameter("fname"); String fName = request.getParameter("fname");


value is used to get the value of the input in the same page in Javascript value用于在Javascript中获取同一页面中输入的值

name is used for a reference to the input to pass values to another page, for example when you pass a form with <input value="some_value" name="input_name"> to a PHP page as GET / POST data, the input is accessed with $_POST['input_name'] name被用于参考input将值传递到另一页,例如当你传递一个form<input value="some_value" name="input_name">PHP页面作为GET / POST数据,输入是使用$_POST['input_name']

 var languages = document.getElementsByClassName("language"); for (var lang of languages) { console.log(lang.value); }
 <!DOCTYPE html> <html> <head> <title> preferred language</title> </head> <body> <p>Select your preferred language:</p> <div> <input type="radio" id="english" class="language" value="english" checked> <label for="english">English</label> <input type="radio" id="hindi" class="language" value="hindi"> <label for="hindi">Hindi</label> <input type="radio" id="spanish" class="language" value="spanish"> <label for="spanish">Spanish</label> </div> </body> </html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM