Question

我正在学习HTML表单，并看到一些带有fieldset属性的html id，但是找不到何时使用id（https://www.w3schools.com/tags/tag_fieldset.asp的任何文档或说明。）和与value属性的区别。示例：

<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>

找不到id-Tag的文档，id-Tag和value-Tag有什么区别？

Answer 1

id属性用于标识html标签。但是value属性用于设置标签的“ 值”。

如果您使用任何后端编程语言，则将“ value”值发送到您的服务器。

<input type="radio" id="mc" name="Payment_Method" value="Mastercard">
<label for="mc"> Mastercard</label>

在表单中使用ID可以帮助您在点击其标签时突出显示输入字段

尝试以下示例：

*
		{
			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>

我添加了一些CSS，使其变得“美丽”

希望它将对您有帮助！

Answer 2

使用id属性来引用元素（在CSS，JavaScript，...或for属性的<label>属性中）。
value属性指定提交后在HTTP请求中发送的值。

Answer 3

id global attribute定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的（每个ID仅一个元素）。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。

检查并运行以下代码段，以获取有关如何使用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>

但是value属性用于定义默认值，该默认值将在页面加载时显示在元素中。 value属性可以与以下元素一起使用：<input>，<button>，<meter>，<li>，<option>，<progress>和<param>。

当出现在“按钮”，“重置”和“提交”中时，它指定按钮上的文本。
当出现在输入“文本”，输入“密码”和输入“隐藏”中时，它指定输入字段的初始值。
在输入“复选框”中出现时，输入“ radio”和输入“ image”，它指定与输入关联的值。

检查并运行以下代码段，以获取有关如何使用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>

字段集ID属性和值属性的区别是什么？

3 个答案: