I'm developing a webapp (angularjs) that requires user to input a credit card. The first 12 digits of the credit card must be invisible to user, so currently right now I'm using password inputs to achieve this.
The problem with this is that Chrome thinks that I'm really writing a password, so it gives me the option to use/change my stored credentials for this website:
So I want to know if there is a CSS way or angular plugin that I can use in order to make my text inputs looks like password for the user.
You can use HTML5 Input Type Password, like this:
.pass, .regular{
float: left;
width: 80px;
margin: 5px 0px 15px 15px;
}
<div>
<p>Credit Card:</p>
<input type="password" class="pass">
<input type="password" class="pass">
<input type="password" class="pass">
<input type="text" class="regular">
</div>
Here a link to an example.
I cannot use HTML input type password because it tries to use my credentials for the site for autofill, so I went with Nirav Parmar answer and used: -webkit-text-security: disc;
However, this only works for chrome, for all browsers you can use this plugin that creates a font based only of circles or dots.
https://github.com/noppa/text-security
Given these HTML inputs of differing types:
<input type="text" id="username" />
<input type="email" id="emailaddress" />
<input type="date" id="birthday" />
<input type="password" id="pword" />
<input type="search" id="q" />
Is it possible to apply CSS styles to all text boxes without having to either add a class to each or selecting them like this:
input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="search"]
...
Also I don't want to use input { } as that would select radio buttons etc. when I only want to style are the text boxes.
Either
input {...}
input[type="radio"] { (undo changes here) }
or
input:not([type="radio"]) {...}
While the later may look more straightforward, take note that not all browsers support the not syntax yet.
I don't think this is possible. For instance, it's up to the browser to decide how an input is rendered. There's no way to query how the browser has rendered a control (as far as I know).
For example, some browsers will render a 'range' input as as textbox rather than a slider. Also some browsers render the 'search' control differently to other text boxes (rounded corners etc), so your CSS may not work as you expect anyway.
I think you'll have to go for the input[type="text"], input=[type="password"] { } rules as you described.
I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload).
What am I doing wrong?
.tempform input[type="text"] {
-moz-border-radius: 10px;
}
.tempform input[type="file"] {
-moz-border-radius: 10px;
}
<div class="tempform">
<label for="textfield">Test Text Field</label>
<input type="text" id="textfield" name="textfield"></div>
</div>
div class="tempform">
<label for="filefield">Test File Field</label>
<input type="file" name="filefield" id="filefield-0">
<input type="file" name="filefield" id="filefield-1">
</div>
Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.
According to the first Google search result, it's rather involved. See this article on quirksmode.org for information on how to do it.
I'm wondering whether it's acceptable to use tables for forms.
Strictly speaking, name/value pairs are tabular data, aren't they? And a form is just a user customisable set of name/value pairs. So is it right to use tables in this case? Or should I use divs styled with CSS?
Try fieldsets
I prefer to break up the fields into logical <fieldset>s with one <legend> each, because:
The code is less cluttered
The default formatting is user-friendly (I especially like how the legend displays)
It's easy to style with CSS
Here's a code example. Note that the labels' for attribute lets you click that label to move focus to the input specified (it matches the id attribute).
<form>
<fieldset>
<legend>Wombat Statistics</legend>
<ol>
<li>
<label for="punchstrength">Punch Strength</label>
<input id="punchstrength" name="punchstrength" />
</li>
<li>
<label for="beverage">Favorite Beverage</label>
<input id="beverage" name="beverage" />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Questions That Are Too Personal</legend>
<ol>
<li>
<label for="creditcard">What is your credit card number?</label>
<input id="creditcard" name="creditcard" />
</li>
<li>
<label for="gullibility">Did you actually fill that in?</label>
<input id="gullibility" name="gullibility" />
</li>
</ol>
</fieldset>
</form>
For a basic layout, you can use something like:
label, input, textarea, select {
display: inline-block; vertical-align: top; width: 30%;
}
See this article for a more in-depth tutorial.
Both are correct.
I preffer using some div/li, as that allows me to make some different layouts, but tables for forms are not frowned upon.
Actually, by default, Django gives you table formated forms.
A form isn't tabular data.
It's so easy to lay out form elements with CSS, I don't see any value worth obfuscating the markup with tables. Personally, I find that laying out forms with CSS is easier than using tables at this point. For example:
HTML:
<fieldset>
<label for="FirstName">First Name</label>
<input type="text" id="FirstName" />
<label for="LastName">Last Name</label>
<input type="text" id="LastName" />
<label for="Age">Age:</label>
<select id="Age">
<option>18-24</option>
<option>25-50</option>
<option>51-old</option>
</select>
</fieldset>
CSS:
fieldset {
overflow: hidden;
width: 400px;
}
label {
clear: both;
float: right;
padding-right: 10px;
width: 100px;
}
input, select {
float: left;
}
Using simple variations on that theme, you can make great-looking, accessible forms that are actually easier to work with than tables anyway. I've used that basic approach and ramped it up to some fairly complex, multi-column data entry forms too, no sweat.
You can use tables. Simple as that.
Yes
Yes, you may use tables. Div's are supposed to replace tables for page-level layout, but not for, well, tables. Go ahead and use them within pages whenever they solve your problem.
After being the biggest anti table person you can imagine I've started to realize in the end it doesn't matter. Use what's quickest. Of course if you are nesting tables then you have a problem but generally I can't think of a easier way to layout forms. At the end of the day does the client or the visitor give two hoots about whether you used a table or a list?
Some people will say yes, some no.
Here's a way for you to decide: If it truly contains tabular data, then it should, at least according to WCAG, have a summary attribute. The summary attribute should describe the purpose and structure of the table for the benefit of screen reader users. Can you write such an attribute? If so, then you should do so, and include it on your table. If you can't, then it probably isn't a really a table and you should look for another way of laying out your form.
Eric, I would agree with you that form data is tabular data and semantically can live inside a table.
This is the method I use for simple data entry screens.
I wouldn't generally use divs, but possibly an ordered list
<ol>...</ol>
as the form is an ordered list of items also.
I find this method a lot hard to style however.
You'll probably get 50/50 split in answers....
If you're looking for "css purity", you should use something like this:
<form action="http://localhost/Zoleris/" method="post" accept-charset="utf-8">
<ul class="form">
<li>
<label for="username">Username</label>
<input type="text" id="username" name="username">
</li>
<li>
<label for="password">Password</label>
<input type="password" id="password" name="password">
</li>
<li>
<input type="checkbox" id="remember_me" name="remember_me" >
<label class="checkbox" for="remember_me">Remember my username</label>
</li>
<li>
Forgot your password?
</li>
<li>
<button type="submit" id="btnLogin" name="btnLogin" class="button positive" style="float:right"><img src="tick.png">Login</button>
<button type="submit" id="btnRegister" name="btnRegister" style="float: left"><img src="cross.png">I need an account!</button>
</li>
</ul>
</form>
you can use whatever you want,
it just that it is a new standard for making the layout of the html forms, and it's kinda like a rule not use table tags for design, but it's still ok to use tables for displaying a table of data (grid)
It's important to use labels with the 'for' attribute for screen readers (for usability).
That is why I use fieldsets
I never understood why you would use an ordered or unordered list for forms when a definition list seems more semantically appropriate:
<fieldset>
<dl>
<dt><label for="definition">Definition:</label></dt>
<dd><input type="text" name="definition" /></dd>
</dl>
</fieldset>
They can be a wee bit trickier to wrangle format-wise, but it always made a lot more sense to me than lists or tables for the vast majority of forms.
Having said that, tables don't seem inappropriate to me for editable tabular data.
Forms can be or feel tabular, but tables imply a "presentation" along with the semantics. Marking up a form in a table tends to lock the design into a 2-across, field/input layout (assuming you don't want to spend time overriding the table's CSS). Furthmore, you may have to override the styles if you are trying to account for small screens such as mobile phones.
Furthermore, a screen reader will over-announce this form with, "Row 1, column 1, label, 'Name', column 2, input, 'Name'..." instead of simply, "Input, 'Name'..."
My recommendation is to use DIVs, FIELDSETs, or ULs/LIs. This leaves the presentation in the hands of CSS, exactly where it belongs.
I'm looking for some examples of stylish web forms that can be used on any site. I've googled for "stylish web forms", but most of the examples I find are of very ornate forms that use a lots of images, which are unlikely to look good on other sites that use different color schemes. I've also found lots of examples of using CSS to layout forms, but they usually don't apply any styling to the forms to make them look good.
What I'm looking for is something in between:
Properly laid out, e.g. labels and inputs aligned (I have no opinion on the whole "label on top or alongside" debate)
Nicely styled, but without using images so colors can be easily changed
Semantically valid markup, e.g. no tables or JavaScript, though I'm not fundamentalist about this (a few extra divs is OK)
A response that points to a single example is a lot more useful than "here's a page with a million example forms, most of which don't meet your requirements".
I realize I'm being very demanding here, so apologies and thanks!
Here are a few good sites, with self explanatory examples and usage.
http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/.../
http://jeffhowden.com/code/css/forms/
http://24ways.org/2006/showing-good-form
There are billions more online, tutorials, downloadable examples, stylesheets. To get your ideal solution you might have to mash them together.
See Prettier Accessible Forms.
However, as noted in Styling form controls with CSS, revisited, you are going to have a lot of variation in appearance across browsers and operating systems.
These articles will show you how to build visually pleasing forms, instead of giving you a catalog of a bunch of ready made templates.
I'm not sure if this is as comprehensive as what you're asking for, but I like going with something simple like this:
<fieldset>
<legend>New customer? Provide the following</legend>
<label for="FirstName">First Name:</label>
<input type="text" ID="FirstName" name="FirstName" />
<label for="LastName">Last Name:</label>
<input type="text" ID="LastName" name="LastName" />
<label for="Address">Address:</label>
<input type="text" ID="Address" name="Address" />
<label for="City">City:</label>
<input type="text" ID="City" name="City" />
<label for="State">State:</label>
<input type="text" ID="State" name="State" />
<label for="Zip">Zip:</label>
<input type="text" ID="Zip" name="Zip" />
<input type="submit" Text="Submit Order" />
</fieldset>
Using CSS like this:
fieldset {
overflow: hidden;
}
label {
clear: both;
float: left;
margin-top: 10px;
width: 125px;
/* If you want the labels flush along the right edge */
padding-right: 5px;
text-align: right;
}
input {
float: left;
margin-top: 10px;
}
/* Align the submit button under the fields */
input[type=submit] {
clear: both;
float: left;
margin-left: 135px;
margin-top: 10px;
}
That produces the layout shown in the image early in this (completely unrelated) post. There's a source download with the markup and CSS there too, if you don't mind ASP.NET.
Speaking to reuse, I've found that basic structure to be flexible enough to use anywhere. For example, we used basically the same markup and CSS for this more customized contact form: http://www.thirtyfiveatlanta.com/meet/
I really like Wufoo's forms : http://wufoo.com/examples/
I've copied and used their HTML and CSS for my own projects with good results.
Uni-Form
This response was posted as a comment by Darmen, but I feel it's sufficiently useful that it deserves to be promoted to a reply
http://www.rockettheme.com/ has some pretty good templates and themes. They are generally for existing CMS systems but you could adapt them or parts of them for your own sites.