Just have a quick question, I am working on a website and as you can see I have created a few input fields. Ideally I wanted all my input fields to be skewed to the far right, which they are. Unfortunately, they are overly bunched without much padding. I've tried to add a class to my input fields and add appropriate padding via the CSS, but I've only managed managed to get them to go all to the far right.
So my question is, what do I need to add so my input fields are to the far right AND spaced appropriately?
<form action="demo_form.asp">
First Name: <input type="text" name="fname" class="test" required>
<br>Last Name: <input type="text" name="lname" class="test" required>
<br>Contact Me By:
<select name="contactuser" form="carform" class="test"">
<option value="email">Email</option>
<option value="phone">Phone</option>
</select>
<br>Email: <input type="text" name="email" class="test" required>
<br>Phone: <input type="text" name="phone" class="test" required>
<br>Zip Code: <input type="text" name="zipcode" class="test" required>
<br>
<input type="submit">
CSS
.test {
position: absolute;
right: 0;
}
You need to apply a margin.
input{
margin: 5px;
}
CODEPEN DEMO
line-height seems to be the precise way if you don't want to mess with changing anything.
You can just call the form in the CSS and add the line-height there or give the form a class and do the same which will be better
form {
line-height: 30px;
}
This is what i tested with and it spaced things out:
Fiddle - https://jsfiddle.net/20LcL21k/1/
I would use
http://materializecss.com/forms.html
Or bootstrap, but material have such a nice way of doing forms
Related
I tried many times that google give me answers, but, It not working... Someone help?
I tried:
<input type="text" height="10">
<input type="text" style="min-height: 10px;">
use this style to height the input element
input {
height:50px;
}
<input type="text" placeholder="Enter Text Here"/>
Try This
<input type="text" style="height:10px;">
This code you wrote <input type="text" style="min-height: 10px;"> - does work actually. it just won't go to min-height you stated because inside the font for the text is bigger. If you maintain the font correlated with the input height it will work.
This example works if you make the font size smaller.
<input type="text" style="min-height: 5px; font-size: 4px;">
It is not height its size.
If you want in the way you questioned.Something like this help
<input type="text" size="10">
<input type="text" size="10px">
I've inherited a legacy codebase and am tasked with overriding a handful of CSS selectors (among other things). Simple. But I've encountered a weird ID that I can't figure out how to override.
Here's a code snippet:
<form id="formInfo" name="formInfo" method="post">
<label>Phone Number*</label>
(
<input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
) -
<input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">
</form>
All I'm trying to do is add 10px of margin to the left of the last input so the two fields aren't butted up against one another.
I'm unfamiliar with this syntax. I've never seen IDs conjoined with a colon (:) before.
Here's what I've tried:
#formInfo:phoneSuffix {
margin-left: 10px;
}
#phoneSuffix {
margin-left: 10px;
}
#formInfo #phoneSuffix {
margin-left: 10px;
}
As expected, none of these approaches adds the desired margin.
Here's my fiddle if you want to work from that.
Restrictions: As I said, this is legacy code. Unfortunately, I don't have the ability to change or add to the markup. This is a SPA that is used in multiple applications. Changing it might have unintended side effects. I have to deal with it as part of my SPA and override the input margins. Not ideal, but that's the situation.
You could use backslash to escape the colon
#formInfo\:phoneSuffix {
margin-left: 10px;
}
See: Handling a colon in an element ID in a CSS selector
You could use an attribute selector.
[id='formInfo:phoneSuffix'] {
margin-left: 10px;
}
<form id="formInfo" name="formInfo" method="post">
<label>Phone Number*</label>
(
<input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
) -
<input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">
</form>
I am trying to have my forms float right, so that it looks neat when everything is placed next to each other, and it works fine, EXCEPT for the first 2? That is what weirds me out? It works great after the first 2. Here is a screenshot that says it all and my HTML code
<head>
<title>New user</title>
<style type="text/css">
#form_container {
width: 25%;
}
#form_container input {
float: right;
clear: both;
}
</style>
</head>
<body>
<div id="form_container">
<form action="" method="post">
Username: <input type="text" name="username" value="" /><br />
Password: <input type="text" name="username" value="" /><br />
Password again: <input type="text" name="username" value="" /><br />
Password triple: <input type="text" name="username" value="" /><br />
</form>
</div>
</body>
Why is there that "space" between the first and second ones?
Thanks on advance everyone!
It's simply because you are asking for a password 3 times.. the markup doesn't like that and throws a random gap at you.
In all seriousness, there are a few ways to fix this.. the easiest is to set clear:both on the br.. that was causing the gap.
jsFiddle example
br {
clear:both;
}
Also, remove clear:both from #form_container input as that isn't needed anymore.
#form_container input {
float: right;
}
I'd also suggest adding a label to each input for validation purposes.
Restructure your markup a bit to add labels (which you could have anyway), and you can ditch the <br>'s completely. Working example here: http://jsfiddle.net/designingsean/rWfek/1/
HTML:
<div id="form_container">
<form action="" method="post">
<label>Username</label>
<input type="text" name="username" value="" />
<label>Password</label>
<input type="text" name="username" value="" />
<label>Password again</label>
<input type="text" name="username" value="" />
<label>Password triple</label>
<input type="text" name="username" value="" />
</form>
</div>
The important bit of CSS:
label {
float:left;
width:50%;
}
The first answer is fine, but I also suggest wrapping everything in label.
The advantage is that when you click on the label text, 'Username: ', it will automatically put focus in the input box. While this might seem small, it really helps on touch devices, and especially on radio inputs -- try tapping the little 10x10 radio box. Much nicer and more intuitive with label.
<label>Username: <input type="text" name="username" value="" /></label>
and in the CSS:
#form_container label {
display:block;
clear:both;
}
Also, if you didn't already know this, I suggest using <input type="password"/> for passwords.
See this JSFiddle.
I have a form that should look like this one: http://jsfiddle.net/g6kQK/
but if I inspect the generated code this is what I get: http://jsfiddle.net/bxA5X/
The problem seems to be with
display: block;
float: left;
but if delete those attributes nothing changes in my form.
What is the default property for input type=text in html?
What should I set it to make it aligned with the text?
Thanks.
Remove the width from the .cardno div, and move the input element to the outside.
<label>card no</label>
<div class="cardno">04</div>
<input type="text" name="codcard" maxlength="11"/>
Updated Fiddle: http://jsfiddle.net/bxA5X/8/
Just remove diplay:block property form.usersetting input[name="codcard"]
here is what i got you the answer hope this is what you want... just see this fiddle
<form id="change_customer_data" class="usersetting" action="/">
<label>telephone</label>
<input type="text" name="tel" /><br>
<label>email</label>
<input type="text" name="email"><br>
<label>card no:</label>
04<input type="text" name="codcard" maxlength="11"/>
http://jsfiddle.net/bxA5X/8/
I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
http://wufoo.com/gallery/templates/
You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.
This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it.
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div> cluttering things up. You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
I would lookup using the div tag to layout data on a page.
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
View source here on stackoverflow.com, there's probably some good examples.
Think about putting field names above the field, rather than beside. I find this works about the best.
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.