字段集ID属性和值属性的区别是什么？
[英]What is the fieldset id attribute and difference to value attribute?
问题描述
I'm learning HTML forms and saw some html fieldset with an id -attribute, but could not find any documentation or description when to use id ( https://www.w3schools.com/tags/tag_fieldset.asp ) and the difference to value attribute. 
我正在学习HTML表单，看到一些HTML fieldset与id -attribute，但找不到任何文档或描述时使用的id （ https://www.w3schools.com/tags/tag_fieldset.asp ）和差value属性。 Example: 例：
<form>
<p>Please select:</p>
<fieldset>
<input type="radio" id="mc" name="Payment Method" value="Mastercard">
<label for="mc"> Mastercard</label>
<input type="radio" id="vi" name="Payment Method" value="Visa">
<label for="vi"> Visa</label>
<input type="radio" id="ae" name="Payment Method" value="AmericanExpress">
<label for="ae"> American Express</label>
</fieldset>
</form>
Could not find documentation for id -Tag and what is the difference between id -Tag and value - Tag? 找不到id -Tag的文档， id -Tag和value -Tag有什么区别？
3 个解决方案
解决方案1
0 2019-01-26 17:52:10
id attribute is used to identify a html tag. id属性用于标识html标签。 But the value attribute is used to set the " value " of the tags. 但是value属性用于设置标签的“ value ”。
The " value " value is will be send to your server if you're using any back-end programming language. 如果您使用任何后端编程语言，则将“ value ”值发送到您的服务器。
<input type="radio" id="mc" name="Payment_Method" value="Mastercard">
<label for="mc"> Mastercard</label>
Using id in form helps focusing the input field when you click on his label 在表单中使用id可以帮助您在单击其标签时突出显示输入字段
try the example below : 请尝试以下示例：
* { box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; } p { width: 70%; margin: 2% auto; padding: .5%; } form { width: 50%; margin: 2% auto; padding: 1%; } label, input { display: block; width: 70%; margin: 1% auto; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ID and Value</title> </head> <body> <p> Click on labels to see what will happen </p> <form action="#" method="post"> <label for="third">Third</label> <input type="text" name="" id="first"> <label for="fourth">Fourth</label> <input type="text" name="" id="second"> <label for="first">First</label> <input type="text" name="" id="third"> <label for="third">Second</label> <input type="text" name="" id="fourth"> </form> </body> </html>
I added some CSS to make it "beautyfull" 我添加了一些CSS以使其“ beautyfull”
Hope it will help you ! 希望对您有所帮助！
解决方案2
0 2019-01-26 17:54:11
Use id attribute to refer to the element (in CSS, JavaScript, ..., or in the for attribute of <label> ...). 使用id属性来引用元素（在CSS，JavaScript，...或<label> ...的for属性中）。
The value attribute specifies the value to be sent in the HTTP request upon submission. value属性指定提交后将在HTTP请求中发送的值。
解决方案3
0 2019-01-26 19:09:05
The id global attribute defines a unique identifier (ID) which must be unique in the whole document (Only one element per ID). id 全局属性定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的（每个ID仅一个元素）。 Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). 其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。
Check and run the following Code Snippet for a practical example of how you can use the ID to reference elements in JavaScript: 检查并运行以下代码片段，获取有关如何使用ID引用JavaScript中元素的实际示例：
document.getElementById("blueColor").style.color = "blue"; document.getElementById("redColor").style.color = "red"; document.getElementById("greenColor").style.color = "green";
<button id="blueColor">My ID is blue</button> <button id="redColor">My ID is red</button> <button id="greenColor">My ID is green</button> <button id="redColor">Oh no!! My ID is a duplicate so it won't work!!</button>
The value attribute however is used for defining a default value which will be displayed in the element on page load. 但是， value属性用于定义默认值，该默认值将在页面加载时显示在元素中。 The value attribute can be used with the following elements: <input> , <button> , <meter> , <li> , <option> , <progress> and <param> . value属性可以与以下元素一起使用： <input> ， <button> ， <meter> ， <li> ， <option> ， <progress>和<param> 。
- When present in “button”, “reset” and “submit”, it specifies the text on the button. 当出现在“按钮”，“重置”和“提交”中时，它指定按钮上的文本。
- When present in input “text”, input “password” and input “hidden”, it specifies the initial value of the input field. 当出现在输入“文本”，输入“密码”和输入“隐藏”中时，它指定输入字段的初始值。
- When present in input “checkbox”, input “radio” and input “image”, it specifies the value associated with the input. 当出现在输入“复选框”，输入“无线电”和输入“图像”中时，它指定与输入关联的值。
Check and run the following Code Snippet for a practical example of how you can use the value attribute to retrieve default values as well as modified values in JavaScript: 检查并运行以下代码片段 ，以获取有关如何使用value属性在JavaScript中检索默认值和修改后的值的实际示例：
var btn = document.getElementById("buttonID"); btn.addEventListener("click", function() { var name = document.getElementById("name"); var mail = document.getElementById("mail"); var message = document.getElementById("msg"); var uType = document.getElementById("userType"); alert("Hello " + name.value + "! " + "Your email id is: " + mail.value + " your user type is: " + uType.value + " and your message is: " + message.value); });
<div> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for="userType">User Type:</label> <input type="text" id="userType" name="user_type" value="Client" disabled/> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_email" /> </div> <div> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div> <button id="buttonID">Click Me</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.