tailieunhanh - The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P11

The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P11:Apart from writing books like this one, I write code. I make my living by building web sites and applications as, I’m sure, many readers of this book do. I use CSS to complete jobs every day, and I know what it’s like to struggle to make CSS work when the project needs to be finished the next morning. | Chapter Forms and User Interfaces Forms are an inescapable part of web design and development. We use them to capture personal data from our users to post information to message boards to add items to shopping carts and to update our blogs to name just a few Despite the necessity of forms on the Web HTML makes virtually no styling options available to the designer so forms have traditionally been rendered in the default style of the browser. CSS has brought with it many ways to address form elements so this chapter will consider what can be styled in a form and why you might want to do so. That said this chapter will also cover some of the less-common HTML form tags and attributes whose application can boost the accessibility and usability of our forms as well as providing additional elements to which we can apply CSS. In the following pages we ll consider forms laid out using CSS positioning as well as their table-based counterparts. Debate rages as to whether it s appropriate to lay out a form using a table my take is that if a form is tabular in nature for instance like the one in the spreadsheet example we ll encounter in this chapter a table is the most logical way to structure the fields. Otherwise your form is likely to be more accessible if it s laid out using CSS. Download at 178 The CSS Anthology As we work with forms it s especially important to consider the usability of the forms themselves. Forms are designed to accept user input but they ll fail in that task if site visitors are unsure how to use them regardless of how beautiful they look. In most cases I would suggest that you avoid styling forms too heavily as doing so may confuse visitors. Also be aware that browsers differ in how much control over form elements you have you ll need to accept the differences and be sure to test your CSS in as many browsers and platforms as possible. How do I style form elements using CSS Unstyled form elements will display according to browser and .