dlearman1
asked on
What is the correct setup for a Bootstrap 3 Form, phone input?
I have the following setup for a Bootstrap 3 contact form:
<form name="contactForm" class="contactForm form-responsive" method="post" action="http://www.serenaconstruction.com/sendForm-contact.php" role="form">
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputName">Name</labe l>
<input type="text" class="form-control input-sm" name="InputName" id="InputName" placeholder="name:" required>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputEmail">Email</la bel>
<input type="email" class="form-control input-sm" id="InputEmail" name="InputEmail" placeholder="email:" required >
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="inputPhone">Phone</la bel>
<input type="text" class="form-control bfh-phone input-sm" data-format="+1 (ddd) ddd-dddd" id="InputPhone" name="InputPhone" placeholder="phone:" >
</div>
</div>
<div class="col-md-10">
<select id="box1" name="contactCombobox" class="combobox form-control" onChange="go()">
<option value="" disabled selected>What are you interested in?</option>
<option value="#">Summerstone</opt ion>
<option value="#">Artessa</option>
<option value="#">Houghton Custom Home</option>
<option value="#">Lower Somerset Custom Home</option>
</select>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputMessage">How can we help you?</label>
<textarea name="InputMessage" id="InputMessage" class="form-control" placeholder=" How can we help you?" rows="75"></textarea>
</div>
</div>
<div id="send" class="col-md-12 text-center">
<button id="contactButton" type="submit" class="btn btn-default">SEND</button>
</div>
</form>
This form returns the following validation error on the inputPhone:
"Line 265, Column 93: The for attribute of the label element must refer to a form control.
… <label class="sr-only" for="bfh-phone">Phone</lab el>
I don't understand what correction is wanted here. Some sage advice would be greatly appreciated.
<form name="contactForm" class="contactForm form-responsive" method="post" action="http://www.serenaconstruction.com/sendForm-contact.php" role="form">
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputName">Name</labe
<input type="text" class="form-control input-sm" name="InputName" id="InputName" placeholder="name:" required>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputEmail">Email</la
<input type="email" class="form-control input-sm" id="InputEmail" name="InputEmail" placeholder="email:" required >
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="inputPhone">Phone</la
<input type="text" class="form-control bfh-phone input-sm" data-format="+1 (ddd) ddd-dddd" id="InputPhone" name="InputPhone" placeholder="phone:" >
</div>
</div>
<div class="col-md-10">
<select id="box1" name="contactCombobox" class="combobox form-control" onChange="go()">
<option value="" disabled selected>What are you interested in?</option>
<option value="#">Summerstone</opt
<option value="#">Artessa</option>
<option value="#">Houghton Custom Home</option>
<option value="#">Lower Somerset Custom Home</option>
</select>
</div>
<div class="form-group">
<div class="col-md-10">
<label class="sr-only" for="InputMessage">How can we help you?</label>
<textarea name="InputMessage" id="InputMessage" class="form-control" placeholder=" How can we help you?" rows="75"></textarea>
</div>
</div>
<div id="send" class="col-md-12 text-center">
<button id="contactButton" type="submit" class="btn btn-default">SEND</button>
</div>
</form>
This form returns the following validation error on the inputPhone:
"Line 265, Column 93: The for attribute of the label element must refer to a form control.
… <label class="sr-only" for="bfh-phone">Phone</lab
I don't understand what correction is wanted here. Some sage advice would be greatly appreciated.
ASKER
Hi Bob,
I goofed up on the error message. The actual message is:
<label class="sr-only" for="inputPhone">Phone</la bel>
The code above seems to show; id="InputPhone" correctly, but I still get the error message. I must be missing something. Thanks a lot for your help.
Best,
Doug
I goofed up on the error message. The actual message is:
<label class="sr-only" for="inputPhone">Phone</la
The code above seems to show; id="InputPhone" correctly, but I still get the error message. I must be missing something. Thanks a lot for your help.
Best,
Doug
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The for attribute needs to point to the id of an element not the class. However I cannot see that element in the code you've pasted above so it would be in another section of your code.