I'm trying to stack the checkboxes to the left side of the page. Any help would be much appreciated. Here's what I have so far:
<body>
<h1>Fitness Survey</h1>
<form class="pure-form" name="survey" method="post"action="mailto:email#youraddress.com" enctype="text/plain">
<fieldset>
<legend>Do you belong to a gym or fitness center?</legend>
<p>
<input type="radio" name="gym" value="yes">Yes
<input type="radio" name="gym" value="no">No
<br>
</p>
</fieldset>
<fieldset>
<legend>How do you stay in shape?</legend>
<p>
<input type="checkbox" name="exercises" value="classes">Fitness classes
<input type="checkbox" name="exercises" value="weights">Weights
<input type="checkbox" name="exercises" value="jogging">Jogging
<input type="checkbox" name="exercises" value="cardio machines">Cardiovascular machines
<input type="checkbox" name="exercises" value="swimming">Swimming
<input type="checkbox" name="exercises" value="team sports">Team sports
<input type="checkbox" name="exercises" value="other">Other
<br>
</p>
</fieldset>
<fieldset>
<legend>How often do you exercise?</legend>
<p>
<input type="radio" name="frequency" value="once per week">Once per week
<input type="radio" name="frequency" value="2-3 per week">2-3 times per week
<input type="radio" name="frequency" value="4-6 per week">4-6 times per week
<input type="radio" name="frequency" value="every day">Every day<br>
</p>
</fieldset>
<fieldset>
<legend><strong>Why do you exercise?</strong></legend>
<p>
<input type="checkbox" name="why" value="pleasure">I enjoy it
<input type="checkbox" name="why" value="fitness">I want to keep fit<br>
</p>
</fieldset>
<p>
<input type="submit"><input type="reset">
</p>
</form>
</body>
</html>
And the CSS is:
fieldset {
width: 400px;
border: 2px ridge #ff0000;
padding: 10px;
margin-bottom: 10px;
}
legend {
font-family: Georgia, "Times New Roman", serif;
font-weight: bold;
}
input {
font-family: Arial, sans-serif;
}
JSFiddle with the example
In order to improve semantics of your markup and solve your particular problem, I would suggest to:
Update markup for your inputs to have label element, like:
<fieldset>
<legend>Do you belong to a gym or fitness center?</legend>
<label><input type="radio" name="gym" value="yes" />Yes</label>
<label><input type="radio" name="gym" value="no" />No</label>
</fieldset>
Note absence of <br> and p elements. Those are not needed and are not adding any value to your code's semantics. Wrapping your inputs and text with label makes the text clickable (allowing to select a checkbox/radiobutton by clicking that text and not only the input itself) and associated with appropriate field.
In your CSS add the following:
.pure-form label {display: block; clear: left}
.pure-form input {float: left;}
Related
I want to put a label for a radio input outside the div where the input is. Something like this
<div class="externalDiv">
<div class="internalDiv">
<input type="radio" id="someId"/>
</div>
<label for="someId"> Label content </label>
</div>
But it's not working this way unless I put the label inside the internal div. How can I make this work?
Edit: What I mean by not working is that when I click on label, the radio button does not get checked.
Try this code.
p,
label {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
<fieldset>
<legend>Select a maintenance drone:</legend>
<div>
<input type="radio" id="huey" name="drone" value="huey"
checked>
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" value="dewey">
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie">
<label for="louie">Louie</label>
</div>
</fieldset>
I'm new. Just trying to learn HTML. I was working on forms and made a "build a donut" form using a couple of different forms. Everything seems to work fine.
But I saw someone else's project that also dealt with forms and their code was full of div tags where I have breaks and label for=.
So I'm just looking for feedback. Do I need the extra tags to be technically correct? Here's my code:
<!doctype>
<html>
<head>
<title>Create Your Own Donuts</title>
</head>
<h2>Fill Out The Form Below To Create Your Order</h2>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 30%;
margin-right: 30%;
border: 2px solid black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
<body>
<p>
Choose Donut Base:
<select type="Base">
<option value="Base"> Cake</option>
<option value="Base"> Yeast</option>
</select>
</p>
<p>
Choose A Shape:
<select type="Topping">
<option value="Glazed">Rectangle</option>
<option value="Chocolate">Disk</option>
<option value="Powdered">Ball</option>
</select>
</p>
<p>
Choose Your Filling: <br>
<input type="radio" name="filling" value="jelly">Jelly<br>
<input type="radio" name="filling" value="cream">Cream<br>
<input type="radio" name="filling" value="none">None<br>
</p>
<p>
Toppings:
<br>
<input type="checkbox" name="toppings" vaule="Blueberries">Blueberries
<br>
<input type="checkbox" name="toppings" value="Shredded Coconut">Shredded Coconut
<br>
<input type="checkbox" name="toppings" value="Caramel Drizzle">Caramel Drizzle
<br>
<input type="checkbox" name="toppings" value="Strawberries">Strawberries
<br>
<input type="checkbox" name="toppings" value="Marshmallows">Marshmallows
<br>
<input type="checkbox" name="toppings" value="Crushed Oreos">Crushed Oreos
<br>
<input type="checkbox" name="toppings" value="Coffee Crisp">Coffee Crisps
<br>
<input type="checkbox" name="toppings" value="Whipped Cream">Whipped Cream
<br>
<input type="checkbox" name="toppings" value="Hot Fudge">Hot Fudge
<br>
<input type="checkbox" name="toppings" value="Crushed Graham Crackers">Crushed Graham Crackers
<br>
<input type="checkbox" name="toppings" value="Sprinkles">Sprinkles
<br>
<input type="checkbox" name="toppings" value="Powdered Sugar">Powdered Sugar
<br>
</p>
<p>
Hot or Cold: <br>
<input type="radio" name="Sprinkles" value="Yes">Hot <br>
<input type="radio" name="Sprinkles" value="No">Cold
</p>
<p>
Quantity:
<input type="number" min="1" max="100">
</p>
<p>
Name:
<input type="Name" placeholder="Name" required><br> Email: <input type="email" placeholder="example#gmail.com"><br> Phone Number: <input type="tel" placeholder="555.55.55" required>
<br> Pickup Date: <input type="date"> <br> Pickup Time: <input type="time">
</p>
<p>
<button input type="submit">Place Order</button>
</p>
</body>
</html>
As you can see, your code seems to work just fine without label tags. However, when creating a form, you should always use label and input tags. They belong together and it's important for accessability reasons.
Have you ever noticed when filling out a form, that you can just click on the label and it fills the checkbox or the radio button. You can achieve this by using label tags that have as their for attribute whatever the corresponding input tag has as an id. So for example:
<input type="checkbox" name="toppings" vaule="Blueberries" id="blueberries">
<label for="blueberries">Blueberries</label>
Now you can click on the label and the checkbox gets filled. Visually impaired users that use screenreaders also rely on that behaviour.
I'm doing one of the project for FreeCodeCamp's certificate and I'm having trouble getting the FlexBox's child elements to have equal size (height and width).
I have tried multiple use of Flex-Grow, Shrink, etc. But it seems like because of the length of the contents inside the element, they are not equally sized.
My Codepen: https://codepen.io/jyjang703/pen/PooeGxv
Basically, I want the third and 4th box of the FlexBox to be same size...
Any help would be appreciated!
<header>
<h1>Self-Happiness Survery</h1>
<h4>For anyone with regrets, griefs, and looking for changes...</h4>
</header>
<main>
<div>
<fieldset class="PersonInfo">
<form action="">
<label>First Name:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Last Name:</label>
<input type="text" name="Last Name">
<br>
<br>
<label>Email:</label>
<input type="text" name="Email">
<br>
<br>
<label>Number:</label>
<input type="tel" name="Number" minlength="1" maxlength="10">
<br>
<br>
</form>
</fieldset>
<fieldset class="PersonInfo_2">
<form action="">
<label>Age:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Sex:</label>
<select>
<option disabled selected value> -- select an option -- </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br>
<br>
<label>Occupation:</label>
<input type="text" name="Email">
<br>
<br>
<label>Current Martial Status:</label>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
<br>
<br>
</form>
</fieldset>
<fieldset class="Checkbox_1">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
<fieldset class="Checkbox_2">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
</div>
<fieldset class="Additional_Information">
<h3>Please provide any additional information</h3>
<form action="">
<textarea rows="4" cols="50" placeholder="Additional Life Storeis Here...">
</textarea>
</form>
</fieldset>
</main>
Below is CSS:
body{
background-color: #f3e9fc;
}
header{
text-align: center;
font-size: 1.5rem;
}
div{
margin: auto;
display: flex;
justify-content: space-between;
}
label{
display: inline-block;
float: left;
width: 150px;
text-align: left; /*Change to right here if you want it close to the inputs*/
}
.Additional_Information{
text-align: center;
}
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2
{
width:25%;
}
I added this at the end of your css in codepen which made it all the same size
Use flex-basis:0 and flex-grow:1 on the child element of flexbox.
Basis is like minimum size. Then flex-grow gives the size equally to all elements.
Isn't this what you want? 1st & 2nd fieldsets are the same size and 3rd & 4th are the same size.
fieldset {
flex-grow: 1;
}
If you want equal width for the child element, You need to set the width.
div {
width: 80%;
display: flex;
margin: 0 auto;
}
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2 {
flex-basis: 25%;
}
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.
Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}
It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird
Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>