I need to split input to few cells. I want to draw few blocks and in each user press, one of the blocks will fill. Something like this:
What is the right way to do it?
This is the code of the form:
<div class="wrap-log-in-form" *ngIf="step == 'pass'">
<input type="text" class="spliting-input" maxlength="6">
<div class="buttens-log-in">
<input type="button" value="אמת">
<input type="button" value="קבל הודעה בטלפון">
</div>
</div>
You can use a CSS background image on the input and try to use letter-spacing to get the text to fall in the correct areas, BUT this is really hard and not a great solution.
The issue is each device and browser displays characters slightly differently so the spacing is always off just a bit. This is pretty hacky but works if you only have access to the CSS.
A better solution
Use Javascript to parse the input and split each character into its own element with unique placement and background styling.
My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...
While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here
Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with Insightly..
Thanks in advance for any help!
[EDIT 1]
Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...
<style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
The key to attractive layouts is DIVs and CSS.
First, use DIVs to group the various input areas, and to divide each area into left/right (via float).
For example, you might want the label and the input fields to be nicely aligned:
.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>
The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.
You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.
DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.
*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.
Here is a jsFiddle of the above demo that you can experiment with.
Consider below html code, which uses bootstrap 3 input group to create an input three input groups.
<h1>border radius</h1>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">
<input value="false" type="radio"/>
</span>
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">?</span>
</div>
</div>
</div>
The default bootstrap style puts border radius for all input groups, which is not good for the middle input groups (I mean the tiny left radius around * ).
To remove this radius, I try to set the border radius for all input groups to zero except the last one.
div.input-group > div.input-group > span.input-group-addon:not:last-child{
border-radius: 0px !important;
}
But it did not work !
Please let me know what is wrong with this selector, and if I can do it easier !
fiddle : http://jsfiddle.net/mtamx8bs/
:not() is a functional pseudo-class so it needs parentheses around its argument:
div.input-group > div.input-group > span.input-group-addon:not(:last-child)
And on that note I removed the !important as it's no longer needed now that I've fixed the selector.
Due to the way that Bootstrap applies the rounded border styling to the .input-group-addon class, only the first and last "addon" within an .input-group will end up with rounded corners.
Based on this, I'd suggest you consider wrapping all your required elements in a single input group, rather than trying to nest one inside the other.
For example:
<div class="input-group">
<span class="input-group-addon"><input value="false" type="radio"/></span>
<span class="input-group-addon">*</span>
<input type="text" class="form-control" />
<span class="input-group-addon">?</span>
</div>
I updated your fiddle with these changes if you want to play with it. (Edit: or check this one for a slightly more verbose version, showing how much cleaner the code looks with multiple groups)
As an extra note: there are some cases where you may end up nesting different types of "group" classes from Bootstrap, but you'll probably need to play with them to work out which combinations will achieve exactly what you want.
This page in the docs shows an example of two button elements (normal button and a drop-down button) inside an .input-group-btn class, which is nested inside an .input-group.
I'm trying to get an <input /> to line up correctly next to a <button> in IE7.
Ideally, the rendered HTML should appear as: (or similar)
but instead it's appearing as
This is an example of the HTML/CSS I'm using: http://jsfiddle.net/wLpQg/1/
Note how the textbox appears on a different line to the button. This works correctly in all browsers except IE7 (and maybe IE6, but I haven't checked that!)
How can I get this to appear on the same line as the button, preferably as similarly to the first image as possible?
float in the input box to the left, and float button to the right. Then add margins until they're lined up correctly.
If you want the <input> and <button> to always exist on the line below, the easiest way to do this is wrap them in a container, for example:
<div class="search">
<input type="text" watermarktext="Enter share class name or partial name" value="" name="Search" id="Search" class="search-input watermarkOn">
<button id="btnViewResults" type="submit" class="linkButton medium submit"><span><span id="resultCount">View 27090 matches</span></span>
</button>
</div>
with the associated CSS:
.search {
position:relative;
padding:16px 0;
}
.search button {
position:absolute;
right:12px;
}
I ended up commenting out a lot of the CSS in your example, since the container now takes care of the padding and positioning. I forked your fiddle into a new demo to demonstrate. This is working for me in IE6/IE7/IE8 and Chrome 14.
I want to display an HTML form containing labelled text fields, like this:
First Name: [_____________]
Last Name: [_____________]
Date of Birth: [________]
My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?
EDIT:
I'm looking for a way that reduces the verbosity in the HTML file.
And yes, I'm looking for auto-sizing of the labels. See a related question about wrapping labels
If you need the labels to the left of the fields like that, just go ahead and use a table. Not only do tables degrade nicely on older browsers, but they auto-size the column of labels to the text in them (assuming you use white-space: no-wrap on the cells containing the labels, and/or — and this is true heresy — the trusty old nowrap attribute on the th tag), they handle being made fairly narrow well, and they're easy. Make each label cell a header and each field cell a normal cell. And it's a pain, but make sure the labels really are labels and link to their fields, because accessibility matters, even if (perhaps especially if) you're using a table non-semantically.
I'd love to hear about CSS solutions that auto-size the label columns, handle being narrow well, and don't involve 18 hacks to deal with inconsistencies across browsers. I'd be thrilled to see them. But every time I've looked (and that's several), it's still been a gap. A gap that needs filling, IMV, so we can stop doing this without wearing hairshirts.
For anyone reading who doesn't need the labels to the left like that, check out jball's answer for a good-looking, semantic alternative.
In terms of usability and if vertical space is not a limiting factor, a list of fields with the label above each field is the quickest to read and fill out, and can be done aesthetically. See many of the usability studies on the web for more info, eg. http://www.lukew.com/resources/articles/web_forms.html
I'd like to use definition lists (<dl>) they tends to be semantically correct.
A label is defined by an user input. It has sense to me.
<dl> expresses semantic contents more accurately than a table.
<dl>
<dt><label for="name>Name</label></dt>
<dd><input type="text" id="name" /></dd>
<dt><label for="email>Email</label></dt>
<dd><input type="text" id="email" /></dd>
</dl>
Here is an example
By the way they degrade gracefully in all browser, even text-based.
I think something like this is what i do but also won't autosize to the length of the text but it's cleaner in my opinion
<form>
<label for="firstName">First Name</label>
<input type="textfield" name="firstName" />
<label for="lastName">Last Name</label>
<input type="textfield" name="lastName" />
</form>
label {
float:left;
width:30px;
}
input {
float:left;
margin-left:30px;
}
The article is a bit old, but I've always found a list apart's advice to be solid: (if you do want to get rid of your tables)
http://www.alistapart.com/articles/prettyaccessibleforms/
CSS Table Display
From IE8+ you can use CSS Table Display for this:
<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>
<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>
<div>
<label></label>
<input type="submit" value="Send"/>
</div>
</form>
</body>
</html>
Use a CSS framework like Blueprint and use that to style the forms.
Another trick would be to create virual "columns" with css and float them next to each other. Labels in one column and inputs in another. Put that (both columns) in a div with a large enough width and float the columns the opposite way you want to align them.
Here's some code (because I am creating a form) that will work for basic forms. The only constraint is the large right margin on inputs.
form input, form select
{
float: right;
margin-right: 650px;
}
form label
{
float: right;
margin-top: 5px;
margin-right: 10px;
}
form .nofloat
{
float: none;
margin: 0;
}
form br
{
clear: both;
}
And layout like so
<input type="text" id="name" />
<label for="name">Name</label>
<br />
On top of this small, narrowly written code, there is an entire article related to creating tableless forms in CSS.
Typically, I have found that there are at least some issues when not using Tables for forms. The general things I have not been able to solve:
Background-color for fields/inputs is not really possible without a faux background
Auto-sizing columns, but I think this is OK
Field hover with CSS, you could use JS but Tables can do this with pure CSS
I might be missing a few things, but the most flexible mark-up if you are using CSS is as below:
<div class='form-field'>
<label>Name</label>
<input />
</div>
You have issues if you want multiple fields per label section, so you have to introduce another div to hold the inputs (to allow the label to still float left etc):
<div class='form-field'>
<label>Name</label>
<div class='form-inputs'>
<input />
<input />
</div>
</div>
With the above mark-up you can achieve very flexible forms, I won't post the CSS as it's very similar to a 2 Column-Layout.
I still need to sit down and try and figure out if pure CSS forms are viable for all occasions but tbh it's very unlikely!
Forms are the worst thing to style using CSS. The only major Cross Browser problems i've had are when styling the FieldSet and Legend elements. No real hacks, but they take some work to look good.
One problem with tables is the space bug. When you don't use tables you can write your label and input like this:
<label for="foo">Blah <input id="foo" type="text"/></label>
which properly encapsulates the input and the label.
In a table, on the other hand, you get those separated:
<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>
That means the area between the </label> and the <input/> does not respond to mouse clicks.
It's not too bad with plain fields, it's really annoying with radio buttons and checkboxes though (or maybe I'm just being super picky.)
Now, to answer your question: I don't think there is a good way to do formatting of a column in CSS (unless the column width is known--you could obtain that feat with JavaScript...) So T.J. Crowder certainly has an excellent answer.
However, there's one argument for CSS (and forced widths) as in one case I created a very large form that covered the whole screen. All the fields would appear in one screen (As the customer wanted) and the CMS did not output a table. But even though, a table would have been a nightmare simply because all the fields were for many placed in non-aligned columns. That would be quite difficult with a table (lots of rowspan using the table as a grid which would be a table for layout!).
Update:
As per comment below, singe31 says that <input/> cannot be defined within the <label> tag. This is wrong. The HTML 4.01 DTD is easy to read and we see that:
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
So in other words an <input/> can appear in a <label> tag. It is perfectly legal.
HTML 5 clearly shows that this is legal in the documentation on w3c here:
http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element
Scroll down a bit up to the "Code Example" and you see:
Code Example
For example, on platforms where clicking or pressing a checkbox label checks the checkbox, clicking or pressing the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control, or do nothing.