| Casual Articles |
Hubs | Hubbers | Topics | Request |
| #1 in Business | Subscribe Email Print |
|
You are here: Home > Internet and Businesses Online > Web Design > Styling HTML Forms With Accessibility In Mind |
|
Casual Articles - Styling HTML Forms With Accessibility In Mind
6 Steps to Effective Customer Relationship Management >Nurture Your Customer RelationshipsSimply put, customer relationship management is a way of tracking and nurturing your customer relationships throughout the customer's life-cycle, as they move from prospect to customer, to repeat-buyer. Once a customer buys from you, it is much more profitable to make efforts to keep that customer, than it is to acquire a new one, because there is now trust between you. If your customer is happy with your product, then that customer is much more likely to buy from you again in the future, much more likely than a new prospect would be. That’s why customer relationship management i < label >First Name: < input type="text" name="fname"/ >< /label > < label for="fNameId" >First Name:< /label > You could use the for="inputEl Still designing HTML forms using tables? You will be happy to know there is a better way to design forms. HTML has enough elements to enable you to design stylish forms without resorting to the often-used table element. Besides the usual input (input, select, textarea) elements, you also have the fieldset, label, and legend elements. By using these elements, you enhance the accessibility of your forms without any extra effort on your part. A word about these three often neglected elements... < fieldset > The fieldset element is a structural container for form elements. You can use it to group your form elements in a logical manner. For example, for a feedback form, you could group a user’s name and address in one fieldset, and the feedback questions in another fieldset. Being a block level element, by default, the fieldset box extends the full width of its container. Like other elements, you can set its width property to a more suitable value. Browsers typically draw a border around the element to enhance its visual appeal. < legend > It's good practice to add a title to each fieldset group to explain what the group is all about. The standards-compliant way of doing this is to use the legend element. You place this immediately after the opening tag of the fieldset element. If the fieldset element has a border, the legend will be nicely placed on the top border. < label > The label element is a container for the label associated with an input element. You can assign a label to an input element in two ways:
You could use the for="inputEl < fieldset > The fieldset element is a structural container for form elements. You can use it to group your form elements in a logical manner. For example, for a feedback form, you could group a user’s name and address in one fieldset, and the feedback questions in another fieldset. Being a block level element, by default, the fieldset box extends the full width of its container. Like other elements, you can set its width property to a more suitable value. Browsers typically draw a border around the element to enhance its visual appeal. < legend > It's good practice to add a title to each fieldset group to explain what the group is all about. The standards-compliant way of doing this is to use the legend element. You place this immediately after the opening tag of the fieldset element. If the fieldset element has a border, the legend will be nicely placed on the top border. < label > The label element is a container for the label associated with an input element. You can assign a label to an input element in two ways:
You could use the for="inputEl Being a block level element, by default, the fieldset box extends the full width of its container. Like other elements, you can set its width property to a more suitable value. Browsers typically draw a border around the element to enhance its visual appeal. < legend > It's good practice to add a title to each fieldset group to explain what the group is all about. The standards-compliant way of doing this is to use the legend element. You place this immediately after the opening tag of the fieldset element. If the fieldset element has a border, the legend will be nicely placed on the top border. < label > The label element is a container for the label associated with an input element. You can assign a label to an input element in two ways:
You could use the for="inputEl < label > The label element is a container for the label associated with an input element. You can assign a label to an input element in two ways:
You could use the for="inputEl < label >First Name: < input type="text" name="fname"/ >< /label > < label for="fNameId" >First Name:< /label > You could use the for="inputElementId" attribute even for the first method, but it's not necessary. Also, normally you set the input element name to be the same as the element id (except for checkboxes and radio buttons ). I have made them different here just for illustration. It's a good idea to always use the label element to help users determine the purpose of the form element. On Styling The Form The fieldset, label, and legend elements can be styled using CSS. That’s how you can make your form come alive. The mark-up for the form is simple, and might look like this:
< form action="processForm.php" method="post" > < input type="text" name="email" id="email" / > The form styles might be:
fieldset { This makes each fieldset have a green border which is 1px wide, and a green fieldset heading ("About You"). The label (e.g. "Email" ) will be in bold font. The ‘display: block’ rule forces the label elements to display in individual rows. For more detailed examples of form styling, see the resources box. The accesskey Attribute
HTTP = HTML link (for blogs, profiles,phorums):
Related Articles:How to Find Good Marketing Consultants? Target Marketing: The Bell Curve Hire a PR Firm - Before You Need One
|