Глобальный атрибут 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>