Skip to content

JS label text | Example and change label text on button click

  • by

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>
JS label text 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:

change label text on button click in JavaScript

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

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading