Archive for the ‘Tags, Code and Techie Stuff’ Category

New Commands in HTML 5 – Forms

Posted 17 Aug 2010 — by admin
Category Design Tips and Ideas, Tags, Code and Techie Stuff

Web Browser support for HTML 5 support is increasing at an ever increasing pace. HTML 5 provides several new design elements for website forms by adding new tags and improving old ones. The INPUT tag has several new attributes and input types. Some attributes remove the need for cumbersome JavaScript scripts for form validation, and others simply make the forms easier to use.

New INPUT Tag Attributes

autocomplete – Values: ON/OFF: Tells the web browser to either auto-fill the form field if the user returns to the page using previous data, or to disable the feature.

autofocus – Values: AUTOFOCUS: This tells the web browser to give focus to this field upon page load

pattern – Values: pattern: This allows for the web browser to automatically validate the field’s contents based upon the regular expression supplied (i.e. [0-9] means only numeric characters are accepted)

placeholder – Values: text: This tells the browser to display the text supplied when the field is empty. The text will be slightly lighter in color than the regular text color to indicate that it is a placeholder.

required – Values: required: Defined field is required for the submission of its form.

New INPUT Tag Input Types

color – only color values
date – only date values
datetime – only timestamps [HH:MM:
datetime-local – Only timestamps in local time format
email – Only e-mail addresses
month – Only months
number – Only numeric characters; no text values
range – Range of values
tel – Only telephone numbers
time – Only time values
url – Only URLs
week – Only week values

Page Layout & Design

Page Layout refers to the layout of information on a website while design rerfers more stylized choices such as colors and font types. These two ideas blend together harmoniously for the information provided below. Imagine the first time you saw a web page with yellow font on a white background and animated GIF files everywhere — you left the site pretty quickly I bet.

Page Layout Ideas

1. Page Length – Pages should be no more than one page in length if possible. Important information
Page Design should be listed closest to the top, and ]
2. Page Navigation – Sufficient navigation menu(s) should allow the users to traverse all of your website’s content in a quick and easy manner. Confusing or non-existent navigation systems will definitely frustrate website visitors.
3. Use DIV elements rather than TABLE elements to arrange information on your page. DIV elements provide more flexible options and a professional look.
4. No Horizontal Scrolling – Vertical Scrolling is bad enough, but horizontal scrolling is practically unforgivable. Many a website have had users leave simply because horizontal scrolling makes page navigation hard and it makes pages look sloppy.

Page Design Ideas

1. Theme – All pages should have a similar theme throughout a website. This can easily be accomplished via cascading style-sheets (CSS).
2. Colors – Colors should provide good definition and contrast, which allows website viewers to view your content and spend more of their time reading your content. Poor color choices can and will scare away prospective visitors and/or buyers.
3. Fonts – Fonts should be easily read by both web browser and humans. Only make use of fonts readily available on all Windows/Mac OSX machines. Specification of a custom or different font will only lead to confused or frustrated visitors.
4. Whitespace – Space around elements and page borders frames the content that you want website visitors to see. Too little whitespace makes a website look cluttered, un-organized, and somewhere to be avoided for purchases.