I'm not sure if I got the title right. But my point is:
I want to replace standard checkox, eg:
Select <input type="checkbox" name="sel" />
with something witch will allow me to click on text (like 'select' in above code) and by clicking it I would select 'sel' property and make this text bold. Clicking it again would deselect it and unbold text.
A don't want to checkox to be shown.
Ideas? I thought of javascript but I don't know how.
Use the label-node around.
<label>
Select
<input type="checkbox" hidden="true"
onclick="parentNode.style.fontWeight=checked?'bold':'';" />
</label>
Regards
You can use the css to define text in chrome.
<style>
input:before{content:attr(myTextAnno)}
input:checked{font-weight:bold;}
</style>
<input type="checkbox" myTextAnno="Select">
You can use the css to define text in all browsers.
<style>
input:before{content:'Select'}
input:checked{font-weight:bold;}
</style>
<input type="checkbox">
Related
So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here
i tried display: inline; but still nothing changed
The below code will work as you expected. Just add necessary attributes like name and for.
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes">
<label for="test">Yes</label><br>
According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.
<style>
.inline-radio{width: auto;}
</style>
**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes" class="inline-radio" >
<label for="test">Yes</label>
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 do something i think should be simple but i'm not getting it right, these are the lines i have written with no luck:
<input type="checkbox"> I agree to the <a hraf="terms & conditions.html></a> </input>
[i want this [this is the page i want the
as regular hyperlink to go to]
text]
how can i make it right? Thanks!
You need to use label like:
<label for='checkterm'>I agree to the terms</label>
<input type="checkbox" id='checkterm'>
Reference:
<label>: The Input Label element
I recommend that you also read this article regarding inputs (I see that you make mistakes)
Try with this:
<input style="float:none; vertical-align: middle;" type="checkbox" id="agree" />
<label style="display:inline; float:none" for="agree">
I agree with the terms and conditions.
</label>
Also check that you put the tag correctly. <a href=...>, you've got a mistake (you did put hraf).
I want to display the related text of the checkbox along with it.
<input id="Checkbox1" type="checkbox" value="Admin"><span>Admin User</span>
This is the most used markup to do that. But it doesn't feel good to use a separate span for the check box. And it doesn't even look good in a form.
Is there a way to relate these two with each other? Or what is the best way to do this?
use a Label and the for attribute.
The for attribute specifies which form element a label is bound to
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">AdminUser</label>
Also give your input a name
Instead of using for attribute you can use the nested <input type="checkbox">:
<label><input name="Checkbox1" type="checkbox">Admin User</label>
Instead of using <span> you can use the <label>-tag:
<label for="Checkbox1">Admin User</label>
It will 'attach' the label to your checkbox in a sense that when the label is clicked, it is as if the user clicked the checkbox.
For the styling, you need to apply your own styles to make them look 'together' yourself.
Any idea why firefox acts so weird with this code?
It works perfect in IE & Chrome.
<LEGEND>Basistaal </LEGEND>
<LABEL class=alg_kantoor_taal for=alg_kantoor_taal>
<INPUT id=alg_kantoor_taal value=NL type=radio name=alg_kantoor_taal .>
NL
</LABEL>
<LABEL class=alg_kantoor_taal for=alg_kantoor_taal>
<INPUT id=alg_kantoor_taal value=FR type=radio name=alg_kantoor_taal .>FR</LABEL>
I have seen another question where firefox behaved strange because there was a block element inside the label. That is not the case here. I would have like to keep this structure since my css is based up this html... Guess i will have to change it to get it working in FF?
edit-> fiddle here :http://jsfiddle.net/ZXSKH/59/ you can see in firefox the radiobuttons just don't work as they should.
I'll save you the trouble and fix the HTML for you:
<LEGEND>Basistaal</LEGEND>
<INPUT id="alg_kantoor_taal-nl" value="NL" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal">NL</LABEL>
<INPUT id="alg_kantoor_taal-fr" value="FR" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal">FR</LABEL>
An element are built up with a opening and closing tag, or a single tag.
Double tag: <tagname>content</tagname>
Single tag: <tagname />
Also, an attribute should be surrounded with quotes: <tagname attribute="value" />
Please note that an element id should be unique at all times. You can't have 2 elements with the same id.
In fact, this should fix most of your problems. But please, for the love of god, learn how to use HTML properly first.
All elements on a page should have a unique id. Both of the lables reference the second input. You should give each input a unique id and change the for attribute of the label to reference the new id. Or you could remove the id and for attributes and it would work how you expect.
Move the input tags out of the labels.
<LEGEND>Basistaal</LEGEND>
<INPUT id="alg_kantoor_taal1" value="NL" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal1">NL</LABEL>
<INPUT id="alg_kantoor_taal2" value="FR" type="radio" name="alg_kantoor_taal" />
<LABEL class="alg_kantoor_taal" for="alg_kantoor_taal2">FR</LABEL>
http://jsfiddle.net/ZXSKH/61/