HTML – walk-through – Part 2

Replace the native checkbox with an image of our own

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms

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:

Check box 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.

Although CSS is expressive enough for check boxes and radio button, it is far from true for more advanced widgets. Even though a few things are possible with the <select> element, the file widget cannot be styled at all; the same goes for the date picker, etc. If you want to gain full control over form widgets, you have no choice but to rely on JavaScript.

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.
  • Formalize is an extension to common JavaScript frameworks (such as jQuery, Dojo, YUI, etc.) that helps to normalize and customize your forms.

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.

sending files
The enctype attribute

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 enctype to multipart/form-data because 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.

Leave a Reply

Your email address will not be published. Required fields are marked *