Below is my code, I am not understanding why the text is shown to the left.
<label for="dfg" id="OS">
On which OS device do you play? <br>
</label>
<input type="radio" name="OS" id="Android" value="android" required>Android <br>
<input type="radio" name="OS" id="IOS" value="ios" required>IOS <br>
<input type="radio" name="OS" id="Other" value="other" required>Other <br>
It is not so good to do that
<input type="radio" name="OS" id="IOS" value="ios" required>IOS <br>
because the text(IOS) is child of container or body at all so that's why you have call something like label tag and it will looks like
<input type="radio" name="OS" id="Android" value="android" required><label>Android</label> <br>
and the text will appear on the right of radio input while the following
<label>Android</label><input type="radio" name="OS" id="Android" value="android" required> <br>
text will appear on the left side of radio input and also label it is not the only tag to embed text for input but also you can use something like span, div and so on if you have any special reason
The issue was caused as I had set width: 100%
I'm learning web development and learnt big lesson whenever something is looking weird; first look at the CSS
Related
I basically want to create a select element, where the options are displayed next to each other horizontally. Like this:
How can I implement this design?
Using a basic form a radio button would be one way to do it and then hide the actual input using css while keeping the label
Hide radio button while keeping its functionality
then you are just styling the labels how you want them
<form action="form action goes here">
<input type="radio" value="1">
<label for="1">1</label>
<input type="radio" value="2">
<label for="2">2</label>
<input type="radio" value="3">
<label for="3">3</label>
<input type="radio" value="1">
<label for="3">3</label>
...and so on
</form>
I have used a black colour background image for my HTML page. I want to change the radio button labels/ texts to white ( just like the questions) How do I do that? Following is my code snippet.This is how it is looking on the page.
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<input type="radio" name="cig-stat" style="color:white" value="0" id="never-smoke" required>Never Smoked Cigarettes<br>
<input type="radio" name="cig-stat" style="color:white" value="1" id="curr-smoker">Current Cigarette Smoker<br>
<input type="radio" name="cig-stat" style="color:white" value="2" id="former-smoker">Former Cigarette Smoker<br>
<hr>
You need to wrap those input elements in label tags (which also contain the texts for those respective radio buttons) and apply the styling to those.
BTW: In general it's better to have an external stylesheet for that purpose instead of using inline styles - among other things you avoid havin to repeat the same styles over and over when you simply can apply them to a particular HTML tag or a class.
body {
background: #555;
}
<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="0" id="never-smoke" required>Never Smoked Cigarettes</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="1" id="curr-smoker">Current Cigarette Smoker</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="2" id="former-smoker">Former Cigarette Smoker</label><br>
<hr>
First, I'd set up your markup like this:
<fieldset>
<legend>Cigarette smoking status</legend>
<div>
<input type="radio" name="cig-stat" value="0" id="never-smoke" required />
<label for="never-smoke">Never Smoked Cigarettes</label>
</div>
<div>
<input type="radio" name="cig-stat" value="1" id="curr-smoker" />
<label for="curr-smoker">Current Cigarette Smoker</label>
</div>
<div>
<input type="radio" name="cig-stat" value="2" id="former-smoker" />
<label for="former-smoker">Former Cigarette Smoker</label>
</div>
</fieldset>
Then you can style the <legend> and <label> elements to color: white. I'd split the CSS up from the markup if possible. If not, you can keep them inline.
Here's a fiddle of the above in action:
https://jsfiddle.net/1k3gte76/
If you don't like the white border around the <fieldset> element then just add a border: none rule to that element.
I am trying to create a satisfaction survey using the radio buttons, but not sure if my syntax are correct. This is what I did:
From what I understand, the one I am reading says each radio button should have a label, but in this case, there is no label for each radio button, because I want to align them under "Poor," "Good," "Better," and "Super."
This is how I did one of them:
<div class="radio_menu">
<p>Menu selection</p>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
</div>
Is this correct?
The radio buttons do need labels to be accessible. However, they don't need to be visible if the form makes sense to sighted users without them. You can use <span> elements with a "screen-reader only" class within the <label> elements to visually hide text meant for screen readers and other assistive technologies.
Also, consider using <fieldset> and <legend> elements to group form fields.
This could look like:
<fieldset class="radio_menu">
<legend>Menu selection</legend>
<label>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<span class="sr-only">Poor</span>
</label>
<label>
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<span class="sr-only">Good</span>
</label>
<label>
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<span class="sr-only">Better</span>
</label>
<label>
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
<span class="sr-only">Super</span>
</label>
</fieldset>
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
enter image description here
i am facing this issue for my web pages that i am working right now,
can anybody help me with this issue
<label>Label 1
<input type="radio" name="foo" value="Fooo" />
</label>
<br>
<label>Label 2
<input type="radio" name="foo" value="Baar" />
</label>