I am new to HTML5 so all the help I can get is appreciated. I have three fields (First Name, Last Name and Birth Date) and I am trying to align them together. I would like to align the fields together horizontally and vertically.
Here is my simple code so far:
<html>
<!DOCTYPE html>
<html>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<form>
<label for="firstname">First Name:</label> <input name="firstname" type="text" size="50" autofocus><br>
<label for="lastname"><br>Last Name:</label> <input type="text" name="lastname" size="50" autofocus><br>
<label for="birthdate"><br>Birth Date:</label> <input type="date" name="bdate" size="50"><br>
<form> </body> </html>
Here is the CSS I have:
input[type=text] {
border: 1px solid #D4E2F1;
}
input[type=date] {
border: 1px solid #D4E2F1;
}
input[type=color] {
border: 1px solid #D4E2F1;
}
I would prefer not use tables as I am not trying to display tabular data. I am looking for a efficient and correct way to do this.
Your help would be greatly appreciated.
Thanks.
AJ
Try this:
HTML:
<form class="user-form">
<div class="field">
<label for="firstname">First Name:</label>
<input name="firstname" type="text" size="50" autofocus />
</div>
<div class="field">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" size="50" />
</div>
<div class="field">
<label for="birthdate">Birth Date:</label>
<input type="date" name="bdate" size="50" />
</div>
<form>
CSS:
.user-form { padding:20px; }
.user-form .field { padding: 4px; margin:1px; background: #eee; }
.user-form .field label { display:inline-block; width:120px; margin-left:5px; }
.user-form .field input { display:inline-block; }
jsFiddle: http://jsfiddle.net/VuSX4/
Try this
HTML:
<
div style="display:block; position:relative; width:100(or something)px; height:auto; margin:0px auto 0px;"
>
Put your form markup in here
<
/div>
I looked all over for this answer and found the information at W3C Schools and a bit of trial and error
This validates at http://validator.w3.org/
Related
How to put form labels inside a input form only on mobile?
example:
my code:
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10"required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Something like this? I changed the position of input and label in the HTML
.form-group {
position: relative;
min-height: 3.5em;
}
input.form-control {
height: 3em;
position: absolute;
top: 0;
left: 0;
}
label.form-control-label {
position: absolute;
font-size: .8em;
top: 0;
left: 5px;
text-transform: uppercase;
}
<form>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
<label class="form-control-label" for="firstName">Firstname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
<label class="form-control-label" for="lastName">Lastname</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
<label class="form-control-label" for="phone_number">Mobile Number</label>
</div>
</form>
You can use like the below method. We have to write mobile screen style with in the media queries
body{
font-family:arial;
}
.form-group{
position:relative;
}
.input-element{
padding:30px 5px 5px 5px;
width:100%;
border:1px solid #CCC;
}
#media screen and (max-width: 767px) {
.label-element{
position:absolute;
top:5px;
left:5px;
font-size:12px;
color:#666;
}
}
<div class="form-group"><label class="label-element">First Name</label>
<input type="text" class="input-element"/></div>
I've just added a border to form-group and overwritten some bootstrap code.
For mobile only, try to use CSS3 Media Queries.
You could try this:
.form-group {
border: 1px solid black; /* Change border width and color here */
}
/* the !important declaration is for this snippet, because this snippet include bootstrap after this declarations **/
.form-control {
border: none !important; /* No border for input */
box-shadow: none !important; /* No border for input */
}
.form-control:focus {
box-shadow: none !important; /* Remove the blue shining at focus */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="form-control-label" for="firstName">Firstname</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Firstname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="lastName">Lastname</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Lastname" required />
</div>
<div class="form-group">
<label class="form-control-label" for="phone_number">Mobile Number</label>
<input type="text" class="form-control" id="phone_number" name="phone_number" placeholder="A valid 9 or 10 digit phone number" maxlength="10" required pattern="0[689]?[0-9]{8}" />
</div>
</form>
Inspired by another answer, here is a short way to do it:
.input-group {
position: relative;
}
.input-label {
position: absolute;
top: 5px;
left: 5px;
color: #666;
}
.input-element {
padding: 30px 5px 5px 5px;
}
<div class="input-group">
<label class="input-label">First name</label>
<input type="text" class="input-element" />
</div>
I'm styling a portal where I cannot change any HTML but CSS and came across the following bit of code and I want to target the first label(Your Name).
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
I tried chevron and first-child selectors but none seem to work.
Try using first-of-type:
/* CSS3 */
form.no-tables > div > label:first-of-type {
background: red;
}
/* or with CSS2 */
form.no-tables > div > input + label {
border: 1px solid black;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
You can do this by using input + label for CSS2 only.
edit So fcalderan mentioned this already.
input + label {
background-color: blue;
}
<form class="no-tables" name="" action="" method="post">
<div>
<input type="hidden" name="" value="1">
<label>Your Name</label>
<label>Your Age</label>
</div>
</form>
I have the following form. How do I create this look without <table>. Thanks
<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>
This enough for basic styling:
input {
display: block;
}
label {
width: 100px; /* whatever value you wish */
float: left;
}
You can see how this works at http://dabblet.com/gist/2794359
.label {width:30px;} certainly won't do it. First of all, because when you write .label, that selects elements having a class called label. Secondly, even if you didn't use the dot, the label element is by default an inline element, so setting a width on it is useless if you don't give it a display: block as well (floating it also does the trick).
You can use this styles:
CSS markup:
.divContainer
{
display: table;
}
.divRow
{
display: table-row;
}
.divColumn
{
display: table-cell;
}
HTML markup:
<div class="divContainer">
<div class="divRow">
<div class="divColumn">
<label for="firstname">First Name</label>
</div>
<div class="divColumn">
<label for="lastname">Last Name</label>
</div>
</div>
</div>
Sample HTML:
<div id="container">
<div class="row">
<div>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" name="firstname" id="firstname"/>
</div>
</div>
<div class="row">
<div>
<label for="lastname">Last Name</label>
</div>
<div>
<input type="text" name="lastname" id="firstname"/>
</div>
</div>
<div/>
CSS:
.row {
width: 100%;
}
.row > div:first-child {
width: 20%;
float: left;
}
.row > div:last-child {
float: left;
width: 80%;
}
jsFiddle: http://jsfiddle.net/Q4g2u/1/
Apart from religious-like issues, there is no reason to format tabular data such as a form without using table markup. But if you must, the technique described in the answer of Luis Sánchez comes closest – but it is just simulating tables in CSS, with more limited browser support.
I've got the following form where everything formats properly with the exception of the submit buttons at the bottom of the form: they should be centered.
I've tried a variety of different combinations of nesting divs in combination with setting widths, margins, and text-aligns, but I can't seem to figure out what I am doing wrong.
http://jsfiddle.net/vM5fp/
Here is what I have so far...
HTML
<form id="myForm" action="#" method="post">
<div>
<label for="pickone" id="ruleTypeLabel">Pick One: </label>
<select id="pickone" name="pickone">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
<div>
<label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
<input type="text" id="field1" name="field1" />
</div>
<div>
<label for="field2" id="field2label">field 2: </label>
<input type="text" id="field2" name="field2" />
</div>
<div>
<label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
<textarea id="field 3" name="field 3"></textarea>
</div>
<div>
<label for="field4" id="field4label">field 4: </label>
<input type="text" id="field4" name="field4" />
</div>
<div>
<label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="startDate" name="startDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="endDate" name="endDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<div class="buttonrow">
<input type="submit" id="submitButton" value="Submit" />
<input type="submit" id="cancelButton" value="Cancel" />
</div>
</div>
</form>
And the css:
form {
width:300px;
margin:10px auto;
}
form div {
clear:both;
width:100%;
}
form div label {
display:block;
text-align:right;
width:140px;
float:left;
}
form div label .helpercomment{
display:block;
font-size:.8em;
font-style:italic;
color:#C1C2D7;
background-color:#FFF;
text-align:right;
}
form div input, form select, form textarea {
float:left;
width:140px;
margin:2px 0 20px 10px;
}
form div input.date {
width:113px;
}
form div a.calendaricon {
}
form div a.calendaricon img {
display:inline;
border:none;
margin-top:2px;
margin-left:4px;
}
form div div.buttonrow {
text-align:center;
width:auto;
margin:auto;
}
.buttonrow #submitButton, .buttonrow #cancelButton {
width:auto;
}
The buttons are floating (because they're inputs too). Either change them to <button> or modify the CSS:
.buttonrow #submitButton, .buttonrow #cancelButton {
float: none;
width:auto;
}
http://jsfiddle.net/UcPD2/
You're far better off using a styled unordered list than DIVs to format forms.
form ul, form li {
margin:0;
padding:0
}
<ul>
<li><label>....</label> <input ... /></li>
...
</ul>
Is there any way to have the width of a <fieldset> be the width of the largest field inside it?
Just put your question in a general context. A <fieldset> is a block element, thus its default behaviour is to expand to fill the available horizontal space. So you basically have two options:
Set a new explicit width.
Change its layout from block to something else.
Here's a quick example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
fieldset.explicit-width{
width: 1%; /* Will expand to fit content */
}
fieldset.inline-block{
display: inline-block;
}
--></style>
</head>
<body>
<fieldset><legend>Unstyled</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="explicit-width"><legend>Explicit width</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="inline-block"><legend>Inline-block</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
</body>
</html>
Update: I forgot to mention that floating a block-level element also changes its layout.
Do you mean this:
jsFiddle fieldset that is wide as biggest containing input-element
<form action="#" id="test" name="test">
<fieldset>
<input type="text" class="first" />
<input type="text" class="second" />
<input type="text" class="third" />
</fieldset>
</form>
fieldset{
overflow: hidden;
float: left;
background-color: #eee;
}
input {
display: block;
}
input.first{ width: 150px; }
input.second{ width: 200px; }
input.third { width: 250px; }
It is a floating fieldset. If you want it in another way, please let us know.