I have the following CSS and HTML code for a simple form, however, I don't can't get vertical lines that will separate my text from my radio buttons, currently, I am just using the '|' in the body to separate it, but it doesn't look nice. How can I get the vertical lines to connect all the way from the top of the text box to the bottom?
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 300px;
height: 20px;
padding: 5px;
border: 1px solid black;
margin: 0;
float: left
}
input[type=radio] {
display: inline;
}
</style>
</head>
<body>
<div class="box1">
<form method="GET" action="." target="new">
Up Down |
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
|
<input type="submit" />
</form>
</div>
</body>
</html>
I personally wouldn't use table elements for layout in this case (unless I am rendering a bunch of data in a table, then it applies) because its not semantic. Instead, flexbox can handle this easily.
display: flex;
.box1 form {
width: 300px;
border: 1px solid black;
margin: 0;
display: flex;
}
.col {
display: inline-block;
border-right: 1px solid black;
padding: 5px;
}
.col:last-child {
border-right: none;
}
.col.input-control {
padding-right: 20px;
}
<div class="box1">
<form method="GET" action="." target="new">
<label class="col">Up Down</label>
<span class="col input-control">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
</span>
<span class="col">
<input type="submit" />
</span>
</form>
</div>
You need to create a table and inside put the html inputs, labels.
Also you need to add CSS style to the table for a better visualization.
You can wrap your radiobuttons into a div element and add borders to left and right.
https://jsfiddle.net/krbp8tx7/
.box1 {
height: 20px;
padding: 5px;
border: 1px solid black;
margin: 0;
float: left
}
input[type=radio] {
display: inline;
}
.separateradios {
display: inline-block;
border-left:1px solid #000;
border-right:1px solid #000;
padding: 0 0.2em;
}
<body>
<div class="box1">
<form method="GET" action="." target="new">
Up Down
<div class="separateradios">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
</div>
<input type="submit" />
</form>
</div>
</body>
Related
I'm working on a hotel reservation webpage, and having trouble aligning the input/select fields. For example, my current code shows the first name and the last name in two different lines, but I want to have them all together. This is my form looks like with my code:
first name
last name
address 1
address 2
city
state
zip
And below is how I wanted it to be:
first name last name <<----
address 1
address 2
city state <<----
zip
From my research I was able to do similarly by using display: inline-block, so I tried using it in my code as below, but it does not change anything. What am I doing wrong here?
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
width:50%;
float:left;
margin-bottom: 50px
}
#contact input {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact select {
width: 70%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input [class="customerFullName"] {
display: inline-block;
width: 50%;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
You made a little mess about all those "width" declarations. You made your div #customerInformationForm "width" for a half of a parent (50% width). Then you inserted in that div your first, last name etc. inputs, and set up their width for 70% of the parent, which actually made no possible, to insert two inputs side by side (70% + 70% equals more than 100%, so it displays in new line). Reconsider using all these width declarations, below you have a little start how you may handle it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mainContainer {
width: 1139px;
display: flex;
justify-content: center;
padding: 0;
margin: auto;
text-align: center;
}
#formContainer {
max-width: 1000px;
width: 100%;
height: 100%;
margin-top: 110px;
background-color: white;
}
#contact {
padding-top: 25px;
}
#customerInformationForm {
/* width:50%;*/
float:left;
margin-bottom: 50px;
background-color: red;
}
#contact input {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input:nth-child(3),
#contact input:nth-child(4) {
width: 70%;
}
#contact select {
width: 35%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact #customerInformationForm input .customerFullName {
display: inline-block;
width: 70%;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<div id="customerInformationForm">
<input class="customerFullName" placeholder="First name" type="text">
<input class="customerFullName" placeholder="Last name" type="text">
<input placeholder="Address 1" type="text">
<input placeholder="Address 2" type="text">
<input placeholder="City" type="text">
<select id="state" name="state">
<option value="State" selected>State</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
<input placeholder="ZIP" type="text">
</div>
</form>
</div>
</div>
</body>
</html>
Use semantic tags like fieldset to you advantage here to group elements. I also champion the proper use of label, not hijacking the place holder attribute for that purpose.
The example below could use a bit of style tidying but it will give you the idea.
It uses flexbox to achieve inlining the field where required.
#customerInformationForm {
padding-top:2em;
}
fieldset {
border: none;
position:relative;
}
#customerInformationForm fieldset {
padding-left:0;
}
#customerInformationForm {
background-color:#DDD;
}
#customerInformationForm > fieldset {
background-color:#EEE;
padding: 1.5em 1em;
margin-bottom: 0.5em;
border-radius:5px;
}
input, select {
width:100%;
}
legend {
font-weight: bold;
padding-left: 0;
position:absolute;
top:0;
}
label {
display: block;
}
.flex {
display:flex;
align-items:stretch;
}
.flex > .form_group {
flex:1;
}
.form_group {
margin-right:10px;
}
<div id="mainContainer">
<div id="formContainer">
<form id="contact" action="" method="post">
<fieldset id="customerInformationForm">
<legend>Customer Information</legend>
<fieldset class="customer_name flex">
<legend>Customer Name</legend>
<div class="form_group">
<label for="firstName">First Name</label>
<input class="customerFullName" id="firstName" placeholder="Eg: John" type="text">
</div>
<div class="form_group">
<label for="lastName">Last Name</label>
<input class="customerFullName" placeholder="Eg: Smith" id="lastName" type="text">
</div>
</fieldset>
<fieldset class="address">
<legend>Address</legend>
<div class="form_group">
<label for="address1">Address 1</label>
<input type="text" id="address1">
</div>
<div class="form_group">
<label for="address1">Address 2</label>
<input type="text">
</div>
<fieldset class="city_state flex">
<div class="form_group">
<label for="City">City</label>
<input type="text" id="City">
</div>
<div class="form_group">
<label for="state">State</label>
<select id="state" name="state">
<option value="" selected></option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
</select>
</div>
</fieldset>
<div class="form_group">
<label for="zip">Zip</label>
<input id="zip" type="text">
</div>
</fieldset>
</fieldset>
</form>
</div>
</div>
How do I make the button stay under the text? If I do a <br> the button goes outside the div. Why?
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
color: #ccc;
text-align: center;
line-height: 200px;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
The input went outside of the div when you inserted a <br> tag, because you set the line height to 200px. A <br> represents a new line, apparently with a spacing of 200px to other lines. The following code displays the button under the <span>:
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: center;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span><br>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
If you remove the line-height:200px; it will not push the button down 200px.
You can use a <p> tag instead of span and it will move the text under without needing the <br>.
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: center;
}
<div class="dropzone" id="dropzone">
<p>Drag and drop a file or</p>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
Try This:
.button {
display: block;
}
This should position the button under the element behind it.
Added some css and br tag
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: left;
}
.dropzone span{
margin-bottom:5px;
display:inline-block;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span><br>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
Your use of line-height is what's pushing the button outside of the div when you insert a <br> after your text. I suggest removing it if you want to use the line break, as well as looking into flexbox or padding properties if you want to vertically align your div contents.
For example:
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
padding: 10px;
color: #ccc;
text-align: center;
/* line-height: 200px; */
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span>
<span>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</span>
</div>
I am trying to align the button radios on my page and it seems that one of the buttons (Gender) is highly indented. The radio for the M (Gender) is at the center and the other button is at the far right. I've been changing the values in css but it doesn't align. How do I align them? Anyone help? My css is combined and I got most of help here from SO.
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>
This is happening because of this the following style.
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
All inputs following a label will gain a width of 30%.
The reason only the first radio-button is affected by this is because it's the one that's adjacent to the gender label.
You could change this rule so it only affects input boxes for example.
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
Snippet example
form {
width: 80%;
margin: 0 auto;
}
label,
input {
display: inline-block;
}
label {
width: 30%;
}
label + input[type='text'] {
width: 30%;
margin: 0 10% 0 1%;
}
.label-align input[type="checkbox"] {
cursor: pointer;
margin-top: 6px;
}
.label-align span {
margin: 0 0 10px 10px;
display: block;
}
.left {
float: left;
}
<div id="register" class="container">
<form action="" method="post">
<label>*First Name:</label>
<input type="text">
<br>
<label>*Last Name:</label>
<input type="text">
<br>
<label>*Birth Date:</label>
<input type="text">
<br>
<label>*Gender:</label>
<input type="radio" name="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F
<br>
<label>*Email:</label>
<input type="text">
<br>
<label>*Password:</label>
<input type="text">
<br>
<label>*Re-enter Password:</label>
<input type="text">
<br>
<button class="button" type="submit" value="Submit" onclick="" style="vertical-align:middle"><span>Submit</span>
</button>
</form>
</div>
label + input {
width: 30%;
margin: 0 10% 0 1%;
}
Remove width :30%;
Please add following css,
input[type="radio"] {
margin: 4px 4px 4px 4px;
width: 2%;
}
In your code add one class like this
<input type="radio" name="gender" class="gender" value="male" checked>M
<input type="radio" name="gender" value="female" checked>F<br>
in your css style property add this class gender property like this.
.gender{
width: 0px !important;
margin: 0px 0px 0px 4px !important;
}
What I need to do is to replace the look of the radio button with image. That can be easily achieved with jQuery, but it this case I need to do it with CSS only. Is there any way to do that? Here is my HTML:
<div class="radio-buttons">
<div class="holder">
<span></span>
<input type="radio" class="radio" id="cheetah" value="" />
</div>
<div class="holder">
<span></span>
<input type="radio" class="radio" id="horse" value="" />
</div>
<div class="holder">
<span></span>
<input type="radio" class="radio" id="lion" value="" />
</div>
</div>
I've tried to apply a style background-image: on the radio button, but of course it didn't work. Then I added the <span>'s and I am wonderig if I can set style to the buttons display: none , and somehow on input:checked to display the <span> which will be styled with background-image: ? Is this the right way or I am on completely wrong direction? And can it be achieved with CSS only at all ?
Edit: the radio buttons might be changed to checkboxes if needed.
As Dominik said that is almost the way to achieve this. May be his code is for a specific case, and I found something similar but much simple than that. I had to make list of photos, and on click of a photo, it must display the clicked photo, but larger and in section after the list. That's why it didn't work with me. But I will first explain everything and then I will paste my code.
The Dominic code will work only if the label is next to the radio-button. It didn't work for me because I have my <label>'s separated from the radio-buttons. Labels are in <ul> and the radio-buttons are in <div> after the <ul>. That way it doesn't work and that's why I needed to add another same <label> next to each radio-button. Now I had two labels for 1 radio button. So here is my entire code. I had styled the ul labels inline just to save some space in the css. I made it with bg-color so if someone want to try ... it works fine with bg-image too
HTML:
<div class="shell">
<form>
<ul>
<li><label class="label" for="cheetah" style="background-color: white"></label></li>
<li><label class="label" for="horse" style="background-color: yellow"></label></li>
<li><label class="label" for="lion" style="background-color: green"></label></li>
<li><label class="label" for="squirrel" style="background-color: red"></label></li>
<li><label class="label" for="tiger" style="background-color: purple"></label></li>
<li><label class="label" for="bear" style="background-color: black"></label></li>
</ul>
<div class="radio-buttons">
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="cheetah" value="" />
<label class="label" for="cheetah" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="horse" value="" />
<label class="label" for="horse" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="lion" value="" />
<label class="label" for="lion" ></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="squirrel" value="" />
<label class="label" for="squirrel"></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="tiger" value="" />
<label class="label" for="tiger"></label>
</div>
<div class="wrapper">
<input type="radio" name="radio" class="radio" id="bear" value="" />
<label class="label" for="bear" ></label>
</div>
</div>
</form>
</div>
CSS:
*{ margin: 0; padding: 0; }
.shell { width: 1000px; margin: 0 auto; }
ul { height: 150px; list-style: none; padding-bottom: 50px; }
ul li {
float: left;
border: 1px solid #666;
margin-right: 14px;
}
ul li label {
display: block;
width: 150px;
height: 150px;
cursor: pointer;
}
ul label {
display: inline;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label.label {
border: 1px solid red;
background-repeat: no-repeat;
display: inline-block;
height: 500px;
width: 500px;
}
input[type="radio"]:checked + label[for="cheetah"] {
background-color: white
}
input[type="radio"]:checked + label[for="horse"] {
background-color: yellow
}
input[type="radio"]:checked + label[for="lion"] {
background-color: green
}
input[type="radio"]:checked + label[for="squirrel"] {
background-color: blue
}
input[type="radio"]:checked + label[for="tiger"] {
background-color: purple
}
input[type="radio"]:checked + label[for="bear"] {
background-color: black
}
As described in the Link I provided in the comment, you can use the following html:
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
together with the css similar to:
.regular-radio {
display: none;
}
.regular-radio + label {
-webkit-appearance: none;
background-image: url("unchecked.png");
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}
.regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background-image: url("checked.png");
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
.regular-radio:checked + label {
background-image: url("checked.png");
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
Block-level HTML elements have a few restrictions:
They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.
I'm looking for the most efficient way to code a fairly simple html form layout I've done a mockup of.
So far I've thought of a number of ways to code this but they all seem rather cumbersome when implemented.
Basically what I'm trying to put into action is plain text aligned to the right and form imputes aligned to the left with a line in the center of both. Below is an image that should give an example of what I'm trying to achieve.
Here's one approach, though I think you could have helped yourself a great deal more, by showing previous attempts and explaining problems you had. However:
form {
width: 80%;
max-width: 40em;
margin: 0 auto;
color: #3f3a27;
background: #f4f0e5 url(http://davidrhysthomas.co.uk/linked/test.png) 35% 0 repeat-y;
padding: 0.5em;
}
label, input[type=text], select {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-box-sizing: border-box;
margin-bottom: 0.6em;
}
label {
width: 30%;
text-align: right;
margin: 0 10% 0 0;
}
label:after {
content: ': ';
}
input[type=text] {
width: 40%;
}
select {
width: 20%;
}
fieldset {
margin: 0 0 1em 0;
}
With the HTML:
<form action="#" method="post">
<fieldset>
<label for="fullName">Full name</label>
<input type="text" id="fullName" />
<label for="companyName">Company</label>
<input type="text" id="companyName" />
</fieldset>
<fieldset>
<label for="select">Select</label>
<select id="select" name="select">
<option>Option one</option>
<option>Option two</option>
</select>
<label for="t1">Text input 1</label>
<input id="t1" type="text" />
<label for="t2">Text input 1</label>
<input id="t2" type="text" />
<label for="t3">Text input 1</label>
<input id="t3" type="text" />
</fieldset>
</form>
JS Fiddle demo.
Here is a basic form with minimal style
HTML
<form>
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Company</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="nselect">Dropdown Menu</label>
<div class="input">
<select name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="line">
<label for="input">Text 1</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 2</label>
<div class="input">
<input type="text" size="30" name="input">
</div>Save
</div>
<div class="line">
<label for="input">Text 3</label>
<div class="input">
<input type="text" size="15" name="input">
</div>
</div>
</form>
CSS
form {
margin:10px 0;
}
label {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 6px;
text-align: right;
width: 130px;
}
label, input, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
input, textarea, select {
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
color: #808080;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
select {
height: 27px;
line-height: 27px;
}
form .input {
margin-left: 150px;
}
form .line {
margin-bottom: 18px;
}
Test
http://jsfiddle.net/andresilich/qxMVd/
I recommend using the display values of table, table-row, and table-cell to keep the markup as semantically neat as possible: See this jsFiddle
CSS & HTML http://jsfiddle.net/27cdz/3/
I have it like you wanted it: http://jsfiddle.net/XURye/
With the same colors and every position is correct too!
This minimal two selectors CSS from this Drupal post worked really well:
.form-item {
padding: 10px 0 10px 200px;
position: relative;
}
.form-item label {
left: 0;
position: absolute;
}