I have an example here: http://jsfiddle.net/3zSbt/
I don't know how I'd even up my input boxes with eachother...
Any help would be greatly appreciated.
HTML
<div id="contactContent">
<form>
Email: <input type="text" name="firstName">
<br>
Subject: <input type="text" name="lastName">
</form>
</div>
CSS
#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}
There are many ways. One way is putting your value names in label. Example:
HTML
<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />
CSS
label{
display:inline-block;
width:100px;
}
JSFiddle.
If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;
input {
display:inline-block;
float:left;
}
Related
I am trying to make an html form and I have to replicate the following image:
I've done almost everything right but I can't get the positioning just right, specially on the submit button. What is the best to do this? and also how do I reposition the "message" caption next to the text box?
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 60%;
}
</style>
<body>
<form>
<div>
Name: <input type="text" name="name" id="formElements">
<p>
Email: <input type="email" name="email" id="formElements">
<p>
Message: <textarea name="message" id="formElements"> </textarea>
<p>
<input type="submit" id="button" value="send your message">
</div>
</form>
</body>
A few problems here:
1. Broken HTML
You have several places where the HTML is broken. Remember to always close your <p> tags, and close the <input> tags with a soft closing /> just for good practice.
2. Never use IDs in place of class
IDs are only ever meant to be assigned to one element. They are to be unique. If you want to assign some CSS to multiple elements, use a class:
.class
//Not
#id
3. Use Labels for text in forms
Not only can you style them independently, but you can use the for attribute to link them to your inputs.
4. Repaired CSS
I used some different CSS tricks, such as block-style display for the button to allow me to position it in the right spot.
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
.formElements {
width: 300px;
}
label {
display: inline-block;
vertical-align: top;
}
input[type="submit"] {
display: block;
margin-left: 95px;
}
5. Repaired HTML
Here it is. Always always always write proper HTML. It will save you a bunch of headaches.
<form>
<div>
<label>Name:</label>
<input type="text" name="name" class="formElements" />
<p>
<label>Email:</label>
<input type="email" name="email" class="formElements" />
</p>
<p>
<label>Message:</label>
<textarea name="message" class="formElements" rows="4"></textarea>
</p>
<p>
<input type="submit" id="button" value="send your message" />
</p>
</div>
</form>
Here is a JSFiddle that demo's the form for you.
I hope this helps.
Take a look at this.
There are a few things you should consider in your code:
Do Not use an ID more than once in a page, it must be specific to 1 element. Use classes instead to style multiple elements at once.
Use label tag to explain the form elements
Don't forget to close a container tag like p after opening it.
I would almost put it in a two columns table with the text on the left and the text boxes and button on the right.
I should look like this
<style type="text/css">
form {
background-color: gray;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 20px;
width: 400px;
text-align:right;
}
#formElements{
width: 100%;
}
.right {
text-align:right;
}
.wide {
width:300px;
}
</style>
<body>
<form>
<div>
<table>
<tr>
<td class="right">Name:</td>
<td class="wide"><input class = "wide" type="text" name="name" id="formElements"></td>
</tr> <tr>
<td class="right">Email:</td>
<td class="wide"> <input class="wide" type="email" name="email" id="formElements"></td>
</tr> <tr>
<td class="right">Message:</td>
<td class="wide"> <textarea class="wide" name="message" id="formElements"> </textarea></td>
</tr> <tr>
<td></td><td class="wide"><input type="submit" id="button" value="send your message"></td>
</tr>
</div>
</form>
</body>
For my first website, I had to create a simple HTML/CSS form. But my problem was in the fact that my radio buttons don't want to hear what I order him.
(this is without float)
I want it below the email input together, but the more I give margin-left, the more apart (in width) those two radio buttons get.
(this is the code below)
How to fix the radio button position problem?
As you can see I have tried last-child but it doesn't show any effect. In my code for the footer there is no auto height or width.
I am not allowed to use JavaScript. Only pure HTML and CSS.
HTML
<form>
<label class="field">Name:</label><input id="email" type="Name" placeholder="Name"><br>
<label class="field">Lastname:</label> <input id="lastname" type="lastname" placeholder="Lastname"><br>
<label class="field">Email:</label> <input id="Email" type="Email" placeholder="Email"><br>
<label class="radio">No<input type="radio" name="st" value="No"/></label><br>
<label class="radio">Yes<input type="radio" name="st" value="Yes" /></label><br>
<label class="textarea"><textarea></textarea></label><br>
<label class="submit"><input type="submit" value="Submit"></label><br>
<label class="feedback">Feedback:</label>
</form>
CSS
/*FORM*/
form {
width: 100%;
margin-top:5px;
}
label.field {
text-align: right;
width:100px;
float:left;
font-weight:bold;
padding-top:4px;
}
label.radio{
float:left;
margin-top: 20px;
margin-left: 15px;
padding:0px 0px 5px 0px;
border:1px solid black;
white-space: nowrap;
}
label.radio:last-child{
margin-right: 10px;
}
label.feedback{
text-align:right;
width:100px;
float:left;
font-weight:bold;
padding-top:4px;
margin-top: -40px;
}
Wrap them in a list, and clear on the LI. Get rid of the breaks. You should reset the list first: ul, li {margin:0;padding:0list-style:none}
li { clear:both }
HTML:
<ul>
<li>
<label class="field">Name:</label>
<input id="email" type="Name" placeholder="Name">
</li>
<li>
<label class="field">Lastname:</label>
<input id="lastname" type="lastname" placeholder="Lastname">
</li>
....
</ul>
Lists are semantic, which makes then good for people with disabilities. You can also use the list for formatting the layout by adjusting margin/padding.
See: A List Apart - Prettier Accessible Forms
For some reason I cant get CSS to work with my form? I have tried just about everything and I cant seem to find the issue? What am I doing wrong?
My HTML Structure
<div class="login-container">
<form>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email" class="input" id="email" />
<br /><br />
<label for="pword">Password:</label>
<input type="text" name="pword" id="pword" />
</fieldset>
</form>
</div>
My CSS Structure
.login-container fieldset {
padding: 1em;
}
.login-container label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
.input {
background-color:#F00;
}
Remove the . in front of your input selector.
input {
background-color:#F00;
}
See also: CSS element selector vs. CSS .class selector
Seems to work just fine, please see jsfiddle.net/4FCgc/
What is not working? Maybe it is your web browser's cache... But I doubt that.
I'm noticing most folks are talking about using DIVs and CSS for
label, textbox pairs. How would one convert a table such as:
<table>
<tr>
<td><some Label1> </td>
<td><some TextBox1> </td>
</tr>
<tr>
<td><some Label2> </td>
<td><some TextBox2> </td>
</tr>
...
</table>
From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format?
Assume the labels / textbox's are ASP.net labels and textboxes.
Consider this article at Woork titled Clean and Pure CSS Form Design
I've implemented this style, including the fieldset and tweaked all the styles appropriately for the look/feel that was required.
Consider using <label runat="server"> to inherit the style of the label via CSS instead of asp:label. Alternatively you could put your asp:label within label tags. Since asp:label emits <span>, that would simply result in a set of <label><span></span></label>.
Consider this article titled Tableless forms using CSS from CssDrive.
A little bit of style really helps. I've been refactoring/replacing all my table'd forms with the pattern found in the article above.
With the following code:
asp:textbox works perfectly, needs no modification for all kinds of textboxes
asp:button works perfectly, needs no modification
asp:checkbox would likely need modification, perhaps wrapped in another div with a special style
Here's the basic example presented:
The CSS:
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
The HTML:
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
Extract from my code:
<div>
<label for="Password"> Password:</label>
<input id="Password" type="password" name="Password"/>
<label for="ConfirmationPassword"> Confirmation: </label>
<input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
<label for="FirstName"> Prénom:</label>
<input id="FirstName" type="text" value="" name="FirstName"/>
<label for="LastName"> Nom:</label>
<input id="LastName" type="text" value="" name="LastName"/>
<div class="clear"/>
</div>
</div>
with the following css:
label {
float:left;
margin-right:0.5em;
margin-top:10px;
padding-left:5px;
text-align:justify;
width:200px;
}
input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
float:left;
margin-right:10px;
margin-top:5px;
}
.clear {
clear:both;
}
I've used basically the same idea for creating a tableless form layout. But, I use an unordered list to hold my labels and inputs. For example:
<form>
<fieldset>
<ul class="formFields">
<li>
<label for="user">
Name</label><input type="text" name="user" value="" /></li>
<li>
<label for="emailaddress">
Email Address:</label><input type="text" name="emailaddress" value="" /></li>
<li>
<label for="comments">
Comments:</label><textarea name="comments"></textarea></li>
<li>
<label for="terms">
Agree to Terms?</label><input type="checkbox" name="terms" class="boxes" /></li>
</ul>
<p>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></p>
</fieldset>
</form>
The CSS styles can be just the same as what pcampbell has used in his example. The only difference for mine would be the addition of a style for the UL such as:
ul {list-style: none; margin: 0; padding: 0;}
Based on #p.cambell answer and the implementation with css, I wrote this code in asp.net for a login popup screen:
css
.flotante-login {
border:solid 2px #b7ddf2;
border-radius: 5px;
padding: 15px;
background:#ebf4fb;
}
.loginBox {
margin: 0 auto;
width: 400px;
padding: 10px;
}
#login{
}
#login h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
#login p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#login label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#login .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#login input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#login a{
clear:both;
width:125px;
padding: 10px;
background-color: #E2B66B;
color:#FFFFFF;
text-align:center;
text-decoration: none !important;
line-height:30px;
font-weight:bold;
color: #FFF !important;
border-radius: 5px;
}
aspx page:
<div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contraseña:
<span class="small">Ingresa tu contraseña</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>
The result is:
Let's say I have an html snippet like this:
<div style="width:300px;">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" />
</div>
This isn't my exact code, but the important thing is there's a label and a text input on the same line in a fixed-width container. How can I style the input to fill the remaining width of the container without wrapping and without knowing the size of the label?
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input text auto width filling 100% with other elements floating
It is important to wrap the input field with a span which is display:block. Next thing is that the button has to come first and the the input field second.
Then you can float the button to the right and the input field fills the remaining space.
form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}
<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>
A simple fiddle: http://jsfiddle.net/v7YTT/90/
Update 1: If your website is targeted towards modern browsers only, I suggest using flexible boxes. Here you can see the current support.
Update 2: This even works with multiple buttons or other elements that share the full with with the input field. Here is an example.
as much as everyone hates tables for layout, they do help with stuff like this, either using explicit table tags or using display:table-cell
<div style="width:300px; display:table">
<label for="MyInput" style="display:table-cell; width:1px">label text</label>
<input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>
I suggest using Flexbox:
Be sure to add the proper vendor prefixes though!
form {
width: 400px;
border: 1px solid black;
display: flex;
}
input {
flex: 2;
}
input, label {
margin: 5px;
}
<form method="post">
<label for="myInput">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input"/>
</form>
Please use flexbox for this. You have a container that is going to flex its children into a row. The first child takes its space as needed. The second one flexes to take all the remaining space:
<div style="display:flex;flex-direction:row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex:1" />
</div>
Easiest way to achieve this would be :
CSS :
label{ float: left; }
span
{
display: block;
overflow: hidden;
padding-right: 5px;
padding-left: 10px;
}
span > input{ width: 100%; }
HTML :
<fieldset>
<label>label</label><span><input type="text" /></span>
<label>longer label</label><span><input type="text" /></span>
</fieldset>
Looks like : http://jsfiddle.net/JwfRX/
Very easy trick is using a CSS calc formula. All modern browsers, IE9, wide range of mobile browsers should support this.
<div style='white-space:nowrap'>
<span style='display:inline-block;width:80px;font-weight:bold'>
<label for='field1'>Field1</label>
</span>
<input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>
you can try this :
div#panel {
border:solid;
width:500px;
height:300px;
}
div#content {
height:90%;
background-color:#1ea8d1; /*light blue*/
}
div#panel input {
width:100%;
height:10%;
/*make input doesnt overflow inside div*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*make input doesnt overflow inside div*/
}
<div id="panel">
<div id="content"></div>
<input type="text" placeholder="write here..."/>
</div>
The answers given here are a bit outdated. So, here I'm with the easiest solution using modern flexbox.
.input-container{
display:flex;
}
input{
flex-grow: 1;
margin-left: 5px;
}
<div style="width:300px;">
<div class="input-container">
<label for="MyInput">label text: </label>
<input type="text" id="MyInput"/>
</div>
<div class="input-container">
<label for="MyInput2">Long label text: </label>
<input type="text" id="MyInput2" />
</div>
</div>
If you're using Bootstrap 4:
<form class="d-flex">
<label for="myInput" class="align-items-center">Sample label</label>
<input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>
Better yet, use what's built into Bootstrap:
<form>
<div class="input-group">
<div class="input-group-prepend">
<label for="myInput" class="input-group-text">Default</label>
</div>
<input type="text" class="form-control" id="myInput">
</div>
</form>
https://jsfiddle.net/nap1ykbr/