Что такое атрибут id fieldset и разница с атрибутом value? - PullRequest
Новая
       34

Что такое атрибут id fieldset и разница с атрибутом value?

0 голосов
/ 26 января 2019

Я изучаю HTML-формы и видел некоторые html fieldset с атрибутом 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?

Ответы [ 3 ]

0 голосов
/ 26 января 2019

Используйте атрибут id для ссылки на элемент (в CSS, JavaScript, ... или в атрибуте for <label> ...).
Атрибут value указывает значение, которое будет отправлено в HTTP-запросе при отправке.

0 голосов
/ 26 января 2019

Глобальный атрибут id определяет уникальный идентификатор (ID), который должен быть уникальным во всем документе (только один элемент на ID). Его целью является идентификация элемента при связывании (с использованием идентификатора фрагмента), создании сценариев или стилях (с помощью CSS).

Проверьте и выполните следующий Фрагмент кода для практического примера использования идентификатора для ссылки на элементы в 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>.

  • Когда присутствует в «button», «reset» и «submit», он указывает текст на кнопке.
  • Когда присутствует во вводе «текст», вводить «пароль» и вводить «скрытый», он указывает начальное значение поля ввода.
  • Когда присутствует на входе «checkbox», вводить «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>
0 голосов
/ 26 января 2019
Атрибут

id используется для идентификации тега html. Но атрибут value используется для установки « value » тегов.

Значение "value" будет отправлено на ваш сервер, если вы используете какой-либо внутренний язык программирования. 

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

Использование идентификатора в форме помогает сфокусировать поле ввода при нажатии на его метку

попробуйте пример ниже: 

*
		{
			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, чтобы сделать его "красивым"

Надеюсь, это поможет вам!

...