So currently I'm trying to edit the general layout and look of html input forms. Heres a snippet of my code for my html input forms:
<p> <form action='register.php' method="POST"></p>
<p>First Name: <input type="text" name="firstName" />Last Name: <input type="text" name="lastName"/></p>
<p>Address: <input type="text" name="address" /></p>
<p>City: <input type="text" name="city" /></p>
And the css that edits this is:
#Address, #emailAddress, #password, #confirmPassword, #firstName, #lastName{
width:50%;
outline: double 1px #FFA500;
height:16px;
padding:10px;
}
Problem is, nothing changes with this code. Shouldn't this change my html input forms?
Try using the id attribute instead of the name attribute on your html.
<input type="text" id="firstName" />
It'd be much better to define a style for all of your input elements at once:
input {
width: 50%;
outline: double 1px #FFA500;
height: 16px;
padding: 10px; }
You should read up on CSS selectors.
Here are some quick observations:
improper nesting of elements. Example, opened form tag within paragraph tag. Also, form tag isn't closed
use "id" attribute instead of "name"
be sure that #Address matches the input id (currently, it doesn't)
city input id isn't reflected in the CSS
You need to assign an ID or class to the input.
Remember, with CSS;
ID = #object
Class = .object
<p>First Name: <input type="text" name="firstName" id="firstName" />
Related
How to create a input box that with 2 parts that 1st part not editable with default text and rest of that editable by user.
<input type='text' value='read only'><input type='text' value='editable>
Mix 2 input in 1 input.
You can try mix two inputs to look like one as #DoeNietZoMoeilijk proposed.
You can achieve it by HTML and CSS, try this:
HTML:
<input type="text" value="Read only" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />
CSS:
#first {
border-right: none;
}
#second {
border-left: none;
margin-left: -5px;
}
Here is example in jsfiddle
And here is example snippet:
#first {
border-right: none;
}
#second {
border-left: none;
margin-left: -5px;
}
<input type="text" value="This is read only part" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />
You can't really mix two inputs in one input, of course, but using CSS you should be able to make two inputs look like one. Setting the readonly attribute on the first input renders it... well, read-only.
I've got a form laid out using the css below. Mostly it works well, but whenever there are two input fields with the <label> tags I cannot click to select the second field.
If you click the 1st input field it's fine. If you click into the 2nd input field it automatically jumps focus back to the first one.
However, you can tab between the two successfully.
div.largeblock{
margin:5px 0px 20px 0px;
background:#d7e5f2;
border:1px solid #d7e5f2;
}
div.largeblock label{
display:block;
margin-bottom:5px;
}
div.largeblock label span{
display:block;
float:left;
margin-right:6px;
width:130px;
text-align:right;
}
<label>
<span>Postcode</span>
<input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</label>
I have the same problem where I have a <select> & <input> within 1 label. But for the other 20 or so lines with just 1 <input> it's fine.
When you click on a label, the behaviour in most browsers is to give focus (or check in the case of a checkbox) to the related input.
You need to move the second input tag out of the label tag. Probably into it's own.
A label element should refer to a single input element, using the for attribute that should have the same value as the id of the input element it refers to. Otherwise it won't behave predictably, like in your example where the label focuses the first input, which doesn't make any sense in your example. If you are grouping form elements you should use the element fieldset (which can be styled with css to look like a label).
The correct syntax would be:
<label for="postcode1">Postcode 1</label>
<input type="text" id="postcode1" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<label for ="postcode2">Postcode 2</label>
<input type="text" id="postcode2" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
Or if you want to use fieldset:
<fieldset>
<legend>Postcode</legend>
<input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</fieldset>
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
I have a very simple HTML layout I'm trying to implement. It is something like this:
A Label: [Input ]
Another Label: [Input ]
The Last Label: [Input ]
In the past, I'd just go ahead and use a table for this. Otherwise, it's a pain getting the input controls to line up correctly.
Can anyone suggest a simple and reliable way to implement this layout without using a table?
Thanks.
You can use display: inline-block
<style type="text/css">
label { display: inline-block; width: 200px; }
ul { list-style: none; }
</style>
<ul>
<li><label for="input1">A Label:</label> <input type="text" name="input1" id="input1"></li>
<li><label for="input2">Another Label:</label> <input type="text" name="input2" id="input2"></li>
<li><label for="input3">The Last Label:</label> <input type="text" name="input3" id="input3"></li>
</ul>
However, in order for this to line up vertically, you either have to wrap the label-input pairs in another tag (such as <li> or <div>) or put linebreaks after the inputs.
<style>
label { width: 200px; float:left; clear:left; }
input { float:left;}
</style>
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
With the added benefit that, if the horizontal space isn't sufficient, the inputs will wrap below the labels.
http://jsbin.com/anuziq (narrow down your browser window)
If you don't actually want them to wrap around, I suggest this approach:
<style>
label { white-space: nowrap; }
span { width: 200px; display: inline-block; }
</style>
<form>
<label>
<span>Full Name:</span>
<input type="text" name="fullname">
</label>
<label>
<span>Email Address:</span>
<input type="text" name="email">
</label>
</form>
From my experience, structuring the HTML like that usually allows for any layout you can possibly think of. Want the inputs always below the label? Use display:block on the span elements. Want the text to the right of the input? Just use float:right on the span.
Bonus here is that you don't need the for and id attributes to connect the label with the input. They're only really necessary, if you can't put the label right next to the input, like in 2 separate table cells.
How do I make forms with background colour? Using tables?
Also I can't seem to line up the text to the first row of each textarea?
Edit:
To clarify, this is my code:
Summary: <textarea rows="1" cols="50"> </textarea><br/><br/>
Changing the background colour of the form is very simple. Using CSS and a unique id, apply a style to the form:
<form id="myForm"></form>
Using CSS
#myForm {
background-color: your-color-of choice;
}
In fact, you don't even have to use an ID, but it's advisable if you are going to have several forms with each requiring a unique style. Otherwise, you could just reference the form element in your CSS as such: form { background-color: your-color-of choice; }
As far as aligning the text along with a text area, you can use plain CSS, divs, or tables. But I think you should ask this separately as it is another scope altogether. Do some research and search for other questions on alignment here on SO to see which method will work best for you.
To give you an idea, though, try this:
<form id="myForm">
<label for="myTextArea">Summary</label>
<textarea id="myTextArea"></textarea>
</form>
In CSS
#myForm {
width:500px
}
#myForm label {
float:left;
display:block;
width:150px;
}
#myForm textarea {
float:left;
width:200px;
}
I don't recommend you do it exactly this way, but this should give you a start.
If you will have many different fields in the form, you might consider wrapping each section in a fieldset:
<form id="myform">
<fieldset id="customerinfo">
<legend>Personal Info</legend>
Name: <input type="text" /><br/>
Address: <input type="text" /><br/>
etc...
</fieldset>
<fieldset id="orderinfo">
<legend>Your Order:</legend>
Product: <input type="text" /><br/>
Quantity: <input type="text" /><br />
etc...
</fieldset>
</form>
The fieldset lets you define a "legend" for the group of fields (the name at the top) and puts a box around them. IMHO it gives a pretty cool effect. And, of course, you can style them with css.
Good luck!