Question:
Is it possible to put a link inside a label like this? This code is being validated. On the one hand, when clicking on the link, the checkbox is not clicked, but at the same time it is one clickable element inside another. Is it possible? Or would it be semantically incorrect? And why? Will this code work everywhere?
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container red">
<div class="row">
<div class="col-12">
<div class="form-group">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">текст<a href="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg">ссылка</a></span>
</label>
</div>
</div>
</div>
</div>Answer:
The validator has no problems with this code, so the standard allows it. If you are afraid that it does not work the same in all browsers, check and fix the unwanted behavior. If the current behavior does not suit you (the checkbox is not clicked when clicking on the link), fix it with JS. Bottom line: if you need to insert a link into a label, insert it!
PS If you plan to open the link from the label in the same browser tab, then do not forget to save the data of the completed form, otherwise the form conversion will start to go to zero, and under someone the chair will definitely burn out.