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).
Related
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 am using windows to create a simple HTML form, and I cannot figure out how to create the sub-labels for the various inputs. The picture (link in comment below) shows what I am trying to produce. Is this a Safari only thing? The closest I came was using CSS display:block which allowed me to move the label on top of the input.
You can accomplish that by wrapping each group of label & input within e.g. div, like so:
<div class="form-line">
<div class="form-field">
<input class="form-field-input" id="input1" type="text" placeholder="Your value..." />
<label class="form-field-label" for="input1">
Text 1
</label>
</div>
<!-- other groups go here -->
</div>
Here's the CodePen example
To do this you'd need something like
<input type='name' class='my-input'>
<label for="name">
<span class="label">First</span>
</label>
and then style that.
HTML offers the dir option where i can put the direction of the elements to "right-to-left".
When i add this attribute to my body, everything works fine, except of the order of the label-input fields.
I place the input before the label like this:
<input id="input_id" type="radio" name="radio_button">
<label for="input_id">Radio Button text</label>
I understand that the dir attribute "just" changes the direction of the characters. But what is an easy way to reorder the input/label pair?
Demo via JSFiddle.
If your questions really is how to control the order of label and input field you need to add styling rules for this:
label{float:right;}
http://jsfiddle.net/ruv5w5zo/3/
<div>
<input id="input_id" type="radio" name="radio_button"/>
<label for="input_id">Radio Button</label>
</div>
input{
float:left;
}
link for FIDDLE
http://jsfiddle.net/ruv5w5zo/2/
You can simply use the following code
div{
display:flex;
flex-direction:row-reverse;
}
<div>
<input type="checkbox" id="tesone"/>
<label for="tesone">اهلا وسهلا</label>
</div>
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">
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.