The HTML tag is used to add a label to a form control like text, textarea, field, etc. You can set the value or get the value of Label in Javascript.
The label tag (element) is used to tell users the value that should be entered in the associated input field.
<label> form content... </label>JS label text example code
HTML example code:
Label with radio Button
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html> Basic contact form Labels:
<!DOCTYPE html>
<html>
<body>
<label for = "email">EMAIL-ID:<br />
<input type = "email" value = "" name = "emailid" size = "30" placeholder = "Enter a email address">
<br />
<br />
</label>
<label for = "phone">PHONE NO:<br />
<input type = "text" value = "" name = "phno"
size = "30" maxlength = "10" placeholder = "Enter a phone number"
pattern = "[0-9]{10}">
<br />
<br />
</label>
</body>
</html>
How to change label text on button click in JavaScript?
Answer: Set the id for the label and use getElementById to identify the label then innerHTML property to change or set the text inside the label in JavaScript.JavaScript get element by id value | Simple example code
Example code:
<!DOCTYPE html>
<html>
<body>
<label id = "lb"> Welcome </label>
<br>
<button onclick="changeTxt()"> Click Here </button>
<script>
function changeTxt() {
document.getElementById('lb').innerHTML = 'Text changed';
}
</script>
</body>
</html> Output:
Do comment if you have any doubts and suggestion on this JavaScript topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version