I have the following code,

HTML

<label for="fName">First Name<sup>*</sup></label>
<input type="text" autoplete="off" name="fName" id="fName" value='' required/>

JavaScript

var fName = document.getElementById("fName");
fName.label.style.color="red";

Is this a valid way to change the color or the label or does it need it's own id?

Thanks for the help! Clarification, the color needs to change if the field is empty on the form submit.

I have the following code,

HTML

<label for="fName">First Name<sup>*</sup></label>
<input type="text" autoplete="off" name="fName" id="fName" value='' required/>

JavaScript

var fName = document.getElementById("fName");
fName.label.style.color="red";

Is this a valid way to change the color or the label or does it need it's own id?

Thanks for the help! Clarification, the color needs to change if the field is empty on the form submit.

• javascript
• css
• forms
• styles

• 1 you may simply achieve this by using CSS - jsfiddle/WEBpe do you really want to use JS specifically? – Pravin W Commented Mar 28, 2014 at 18:45
• Yeah the javascript is triggered when the user tries to submit the form to change the fields to alert them to empty field. I've tried the require, but it's not functional in Safari. – trinathon Commented Mar 28, 2014 at 19:25
• @Pravin Waychal : Is it possible to change the label color when the field is invalid without javascript. tried different options,couldn't achieve it. – Raphael Commented Nov 30, 2016 at 7:08
• @user1645290 Check this html5doctor./css3-pseudo-classes-and-html5-forms e.g. input:required + label{ color: red; } I don't this so there is way in css you can put style on previous element hence for this case label should be after input – Pravin W Commented Nov 30, 2016 at 7:41

6 Answers 6

Your code is valid for changing attribute color. But I don't think your code will change colour of your label. If this style unique for that element you can use a id for label and make same kind script to change color for label too. I think it would be great if you define a class in css and add this class name using JavaScript,Code for that follows.

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

If your can use jQuery framework. It will save lots of time.

Check out this very plete answer: Javascript change color of text and background to input value

I believe that there is not any short and direct way to access the attached label corresponding to an input field using javascript. You can access the attached label via CSS (with some tweaks in layout) but in javascript, you have to set up a few lines of code. To use this code, the layout also has a requirement that all the attached label should go before the input field (spaces in between are allowed). This code just use the previousSibling property of a DOM element with some other DOM stuffs. Here is the detail:

function getLabelFromInputID(inputID){
   var prevSib = document.getElementById(inputID).previousSibling;
   //remove the spaces if any exists
   while(prevSib.nodeName=='#text') prevSib=prevSib.previousSibling;
   if(prevSib.getAttribute('for') != inputID) prevSib = null;
   return prevSib;
}

Use the getLabelFromInputID function to access the attached label from the corresponding input field's ID. Note that the label should have for attribute set-up correctly (this is the standard and mon practice).

Here is the Fiddle Demo. In this demo, you just try clicking on the page to see it in action.

This all depends on your use case. If you are simply trying to style the element red statically, you should define a css class (e.g. `red-label { color: red; }) and apply that class to the label.

If you are trying to dynamically set the color to red (e.g. upon a form validation error), you'll need to target the label using a query selector of some sort.

function makeLabelRedDirectly() {
  document.getElementById('fNameLabel').style.color = 'red';
}

function makeLabelRedViaClass() {
  // Note you can use the more robust `element.classList` with modern browsers
  // document.getElementById('fNameLabel').classList.add('red-label');
  document.getElementById('fNameLabel').className += ' red-label' ;
}

The examples above use document.getElementById to target the element. You could also opt to use document.querySelector or a library like jQuery to target the labels.

Working example: http://jsbin./calol/1

using css

form label{color:red};

using javascript

<label for="fName" class="lbl">First Name<sup>*</sup></label>
<input type="text" autoplete="off" name="fName" id="fName" value='' required/>

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4.3/jquery.min.js></script>
<script>
    $(document).ready(function() {
       $('.lbl').css('color','red');
    });
</script>

or simple javascript

document.getElementsByClassName("lbl").style.color="red";

An input element does not have a label property or another way to directly refer to its label. You need to assign an id to the label element or otherwise find a way to access it. You could traverse all label elements on a page and use the one with a for property matching the input element, but it’s probably easier to just use id for it.