I want to ask something about html and/or css.
I created a checkbox input and its label, whenever users click the label, the checkbox is ticked/unticked, but in the middle of the label I insert a link to show some pop-up modal, now the behaviour of the label is, whenever Users click that modal link, the checkbox is getting clicked and ticked/unticked as well, how do I make it so when Users click the link, the checkbox didn't get clicked too?
<div class="form-check">
<input type="checkbox" class="form-check-input" id="agree" formControlName="agree">
<label class="form-check-label" for="agree">
I agree to give some of my <span class="info-button text-muted"><a (click)="showModal()">personal information</a></span> to the partner that i worked with.
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="agree" formControlName="agree">
<label class="form-check-label" for="agree">
I agree to give some of my <span class="info-button text-muted">personal information</span> to the partner that i worked with.
</label>
</div>
update your html (a tag) with adding javascript:void(0) :
personal information
will do.
use:
event.preventDefault();
event.stopPropagation();
to stop 'clck' event to bubble.
Related
I'm creating a web page and I want to create a section with images so the user can select only one by clicking on it. I'm trying with checkbox and radio but it only gets selected when I press on the checkbox itself, not in the image. How can I do that?
I've tried this:
<section>
<fieldset>
<legend><h2>Favorite character</h2></legend>
<input type="checkbox" id="imagen">
<label for="imagen"><img src="image.jpg"></label>
</fieldset>
</section>
And also the same but with radio
<section>
<fieldset>
<legend><h2>Favorite character</h2></legend>
<input type="checkbox" id="imagen">
<label for="imagen"><img src="image.jpg"></label>
</fieldset>
</section>
You have to give the same name to the for of label as you gave to the id of your input.
Apply this in your code and it will work.
I'm using Bootstrap 3 and I have a radio button like this:
<input type="radio" name="attr_var" class="minimal">
Add To Attribute
Users can properly click on it for checking it, but it does not unchecked when it's re-clicked.
Basically when it's checked, users can be uncheck it when they re-click on it but this does not workout.
So how to fix this?
Radio buttons are distinct from checkboxes. The user can change options between a set of radio buttons, but it cannot be deselected.
You can refer to this answer for a better explanation as to Why is it impossible to deselect HTML "radio" inputs?
PS. This applies to native HTML radio buttons. You can still use a checkbox for this purpose, or create your own buttons with CSS and Javascript that behave the same way.
Radio buttons can't be unchecked, I think you just need a checkbox which you can check or uncheck.
Please find the reference here:https://getbootstrap.com/docs/5.0/forms/checks-radios/
<input type="checkbox" name="attr_var" class="minimal">
Add To Attribute
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
If you want to use just single option to be check or uncheck, use Checkbox instead of Radio button.
For example,
<input type="checkbox" name="attr_var" class="minimal"> Add To Attribute
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
I'm trying to enable a submit/go-to site button when only one of my checkboxes(any single box) has been checked - can anyone help?
this is the checkbox I'm using
<input type="checkbox" id="number2" name="number2" value="2">
<label for="number2">02 </label>
hope that helps
if you could give me help using HTML and CSS as I don't know how to use scripts that would be great thanks
try it:
<input type="checkbox" id="number2" name="number2" checked />
the checked attribute is for Checkbox Input element, when you use it and open your page, it have to check your checkbox automatic!
You have to use JS, sample:
<input type="checkbox" id="number2" name="number2" value="2" onclick="
if (this.checked)
document.getElementById('SomeSubmitButton').enable = true;
">
I told:
When user clicked on this Checkbox, enable #SomeSubmitButton if that's checked.
I'm about to style some checkboxes for Bootstrap 3, and I absolutely cannot get my head around why in their examples they use this markup:
<label>
<input type="checkbox"> Check me out
</label>
instead of this:
<input type="checkbox" id="a"><label for="a">Check me out</label>
I just would love to know why they went with the nested approach. I can't see any upsides. The huge huge downside is, that checked/unchecked states cannot be styled with CSS such as:
input:checked + label { }
The answer is user-experience. Nesting your radio or checkbox inputs inside a <label> provides additional functionality. Consider:
<label>
<input type="checkbox" value="">
This is my Checkbox Option inside a Label
</label>
In the above code the checkbox is selected by clicking on either the box itself or the text within the <label>.
While in the below code the <label> text is not clickable. The only way to select the checkbox is to click directly upon the box.
<input type="checkbox" value="">
<label>This is my Checkbox Option outside a Label</label>