This article will tell you how to change the width of the Html <label> tag, the methods can also be used to change other Html tag’s styles.
1. How To Change The Html Label Tag Width Using CSS & JavaScript.
1.1 Question.
- My web page has a login form that contains a user name and password input text box.
- But I find the label text User Name: and Password: do not align to the right side beautifully as I want.
- How can I change the label width to make the User Name: and Password: label the same width?
- Below is my web page Html source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>How To Change Label Width In Html Example</title> </head> <body> <h3>How To Change Label Width In Html Example.</h3> <div style="display:block; margin-top: 10px;"> <label> User Name: </label> <input type="text" id="userName" value="Input user name." /> </div> <div style="display:block; margin-top: 10px;"> <label> Password: </label> <input type="password" id="password" value="Input password." /> </div> </body> </html>
1.2 Change The label Tag Width Using CSS.
- You can use CSS to change the Html label‘s tag.
- You can add the below CSS string to the label tag’s style attribute value, below is the full source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>How To Change Label Width In Html Example</title> </head> <body> <h3>How To Change Label Width In Html Example.</h3> <div style="display:block; margin-top: 10px;"> <label style="display:inline-block;width:90px;text-align:right;"> User Name: </label> <input type="text" id="userName" value="Input user name." /> </div> <div style="display:block; margin-top: 10px;"> <label style="display:inline-block;width:90px;text-align:right;"> Password: </label> <input type="password" id="password" value="Input password." /> </div> </body> </html>
- For simplicity, you can define the label tag CSS code in the Html source code <style></style> section, then the CSS style will be applied to all the Html label tags in the web page, below is the full source code.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>How To Change Label Width In Html Example</title> <style> label{ display:inline-block; width:90px; text-align:right; } </style> </head> <body> <h3>How To Change Label Width In Html Example.</h3> <div style="display:block; margin-top: 10px;"> <label> User Name: </label> <input type="text" id="userName" value="Input user name." /> </div> <div style="display:block; margin-top: 10px;"> <label> Password: </label> <input type="password" id="password" value="Input password." /> </div> </body> </html>
1.3 Change The Label Tag Width Using JavaScript.
- You can also use javascript to change the Html label tag’s width.
- First, get all the label tag node lists on the web page.
- Loop in the above label tag node list, for each label tag node, set its CSS property value like below.
labelNode.style.display = 'inline-block'; labelNode.style.width = '90px'; labelNode.style.textAlign = 'right';
- Set the above javascript function to the web page body tag’s onload event.
<body onload="changeLabelTagWidth()">
- If you find the above code does not take effect, you should check the source code carefully. For example, I make a mistake with the incorrect spell the style.display to style.diplay.
- Below is the source code of the example files how-to-change-label-size-in-html.html, how-to-change-label-size-in-html.js.
- how-to-change-label-size-in-html.html.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>How To Change Label Width In Html Example</title> <script language="javascript" src="how-to-change-label-size-in-html.js"></script> </head> <body onload="changeLabelTagWidth()"> <h3>How To Change Label Width In Html Example.</h3> <div style="display:block; margin-top: 10px;"> <label> User Name: </label> <input type="text" id="userName" value="Input user name." /> </div> <div style="display:block; margin-top: 10px;"> <label> Password: </label> <input type="password" id="password" value="Input password." /> </div> </body> </html>
- how-to-change-label-size-in-html.js.
function changeLabelTagWidth(){ var labelNodeList = document.getElementsByTagName('label'); var len = labelNodeList.length; for(var i=0;i<len;i++){ labelNode = labelNodeList[i]; labelNode.style.display = 'inline-block'; labelNode.style.width = '90px'; labelNode.style.textAlign = 'right'; console.log('labelNode.innerHTML = ' + labelNode.innerHTML); console.log('labelNode.style.diplay = ' + labelNode.style.diplay); console.log('labelNode.style.width = ' + labelNode.style.width); console.log('labelNode.style.textAlign = ' + labelNode.style.textAlign); } }