I am trying to add space before an input tag, and I noticed that Chrome didn't render the whitespace. What can I do to add a space. My code is very straightforward:
Q: <input type="text" id="q">
notice the space between Q: and the tag. I will use JS if I absolutely have to, but pure HTML is much better.
You could try .
Q: <input type="text" id="q">
Add margin-left into you #q,
#q{
margin-left:10px;
}
If you would like a regular line whitespacing you can use <br>
but if you mean the literal whitespace before the the input box, you can use a margin tag to give it more space.
E.g.
#q{
margin-left:10px;
}
Here is the two example of having a whitespace before your input tag. It's either using   or css. Using css is more neat for me in which you can easily change it's styles. Example below css with one character space.
#q1 {
margin-left: .5em;
}
<label for="q">Q:</label> <!-- using a space -->
<input type="text" name="q" id="q">
<br />
<label for="q1">Q:</label><!-- using css -->
<input type="text" name="q1" id="q1">
Related
I have this code below which I have built in order for it to be ALL on the same line. Problem is, for some reason the form input field is several spaces away from the label. Thus something like this happens:
https://jsfiddle.net/pswLLhru/
Any help so as to remove the extra spacing between the two input fields?
Thank you
label {
display:inline-block;
width: 130px;
}
<div class="block">
<label>Currently I am </label>
<input type="text" id="labelinput" style="width:60px;"/>
<label> in </label>
<input type="text" id="labelinput" style="width:60px"/>
</div>
Just deleting your CSS:
label {
display:inline-block;
width: 130px;
}
will remove the white space from your inputs and show your div with the 2 inputs on the same line.
Also I would recommend indenting your code to make it easier to read in larger/future projects.
Delete the width in your css and use comments in your markup
<div class="block">
<label>Currently I am </label><!--
--><input type="text" id="labelinput" style="width:60px;"/><!--
--><label> in </label><!--
--><input type="text" id="labelinput" style="width:60px"/>
</div>
I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
This is how elements function as inline-block.
Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.
If you want to remove the space completely, you can float the elements.
float: left;
You can also remove the whitespace from your template document. Like so:
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.
Magic.
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:
form {
font-size: 0;
}
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2">
<input type="submit" value="Go!" class="btn">
</form>
becomes:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
</form>
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><!--
!--><input type="submit" value="Go!" class="btn">
</form>
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.
Can someone explain how I can modify the second input id shown below so that it is not visible on the page and also does not take up any space on the page?
<section>
<label for="muni">Municipality</label>
<div>
<input id="county_select" type="text" />
<input id="county_no" type="text" value="" disabled="disabled" style="visibility:hidden" />
</div>
</section>
Currently, this second input id takes up space on my form and I don't want it to take up any space. Thank you.
Use display: none;, as shown:
<input id="county_no" type="text" value="" disabled="disabled" style="display: none;" />
Reference:
The CSS display property.
display:none in stead of visibility:hidden
Use the style="display:none;" instead of visibility:hidden
visibility:hidden leaves space.
You can style the input using CSS, targeting it via its id tag.
In your .css file:
#county_no {
display: none;
}
Styling HTML inline should be avoided.
I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.
The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a form with <input> fields. Something like this:
<form>
Thingy 1: <input class="a" type="text" name="one" />
Thingy 2: <input class="a" type="text" name="two" />
Thingy 3: <input class="b" type="checkbox" name="three" />
Thingy 4: <input class="b" type="checkbox" name="four" />
</form>
I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this:
input.a:after { content: "\a" }
But that didn't seem to do anything.
It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.
Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.
<label>
Thingy one: <input type="text" name="one">;
</label>
then use CSS on your label elements...
label {display:block;clear:both;}
Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label> and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: left to the <label> elements.
It looks like you've got a bunch of form items you'd like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...
I'd recommend you set it up like this:
<form>
<ul>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
<li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
</ul>
</form>
Then the CSS gets a lot easier.
the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.
form { white-space: pre }
<form>
<label>Thingy 1: <input class="a" type="text" name="one" /></label>
<label>Thingy 2: <input class="a" type="text" name="two" /></label>
<label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
<label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>
and the following css
form label { display: block; }
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>
<form>
<label>thing 1:</label><input />
<label>thing 2:</label><input />
</form>
One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.
Once in XHTML you could simply add some padding around the elements with CSS, e.g.
form input.a { margin-bottom: 1em }
The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:
CSS
<style type="text/css">
.lb {
display:block;
clear:both;
}
</style>
HTML
<form>
<span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
<span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
<span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
<span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>
I agree with John Millikin. You can add in <span> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.
Even so, your best bet is to logically group the data up in <span> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).
The CSS clear element is probably what you are looking for the get linebreaks.
Something along:
#login form input {
clear: both;
}
will make sure the no other floating elements are left to either side of you input fields.
Reference
The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.
Use javascript. If you're using the jQuery library, try something like this:
$("input.a").after("<br/>")
Or whatever you need.