Replace the native checkbox with an image of our own
Full example: https://jsfiddle.net/7szyry4b/
First, we need to prepare an image with all the states required by a check box. Those states are: unchecked, checked, disabled unchecked, and disabled checked. This image will be used as a CSS sprite:
Do not use display:none to hide the check box because as we’ll see below, we need the check box to be available to the user. With display:none, the check box is no longer accessible to the user which means that it’s impossible to check or uncheck it.
We are hiding real check box widgets from client. Simple technique is that pushing them out of view port.
Most important part is that we are using label:before selector and background property set custom background image for our checkbox widgets.
Since labels are for checkboxes (attached to them), if client clicks on labels, browsers will act like checkboxes are clicked, so css properties like checked, focus will become active. In this case we can benefit of these events (in this case checkbox state/status) and set appropriate css classes for those states.
there are some very useful libraries out there that can help you:
- Uni-form is a framework that standardizes form markup and styles it with CSS. It also offers a few additional features when used in concert with jQuery, but that’s optional.
The following libraries aren’t just about forms, but they have very interesting features for dealing with HTML forms:
- jQuery UI offers some very interesting advanced and customizable widgets, such as date pickers (with special attention given to accessibility).
- Twitter Bootstrap can be really helpful if you want to normalize your forms.
There are no clean, universal solutions but modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS as applied to HTML form widgets.
Many older pages use the following notation to indicate that the data should be sent to the same page that contains the form; this was required because until HTML5, the
action attribute was required. This is no longer needed.
The GET method
Hey server, I want to get this resource.
The POST method
Hey server, take a look at this data and send me back an appropriate result.
Because HTTP is a text protocol, there are special requirements to handle binary data.
This attribute lets you specify the value of the
Content-Type HTTP header. This header is very important because it tells the server what kind of data is being sent. By default, its value is
application/x-www-form-urlencoded. In human terms, this means: “This is form data that has been encoded into URL form.”
- Set the value of
multipart/form-databecause the data will be split into multiple parts, one for each file plus one for the text of the form body that may be sent with them.
Some browsers support the
multiple attribute on the <input> element in order to send more than one file with only one input element. How the server handles those files really depends on the technology used on the server.
Authors can include data for inline client-side scripts or server-side site-wide scripts to process using the data-*=”” attributes. These are guaranteed to never be touched by browsers, and allow scripts to include data on HTML elements that scripts can then look for and process.