Ajax Updates |
- Form Style
- Form Layout Stylish and Accessible
- Moo.Fx Super Light Weight
- MochiKit to Reduce Javascript Code
| Posted: 22 Dec 2009 09:51 AM PST This form is available for you to create your own style. If you want to have a go just follow these instructions: 1. Copy the xhtml below. xhtml <form id="two" action="..." method="post"> <fieldset id="personal"> <legend>PERSONAL INFORMATION</legend> <label for="lastname">last name : </label> <input name="lastname" id="lastname" type="text" tabindex="1" /> <br /> <label for="firstname">first name : </label> <input name="firstname" id="firstname" type="text" tabindex="2" /> <br /> <label for="address">address : </label> <input name="address" id="address" type="text" tabindex="3" /> <p>...more personal information...</p> </fieldset> <fieldset id="medical"> <legend>MEDICAL HISTORY</legend> <label for="smallpox">smallpox : </label> <input name="illness" id="smallpox" type="checkbox" value="smallpox" tabindex="20" /> <br /> <label for="mumps">mumps : </label> <input name="illness" id="mumps" type="checkbox" value="mumps" tabindex="21" /> <br /> <label for="dizziness">dizziness : </label> <input name="illness" id="dizziness" type="checkbox" value="dizziness" tabindex="22" /> <br /> <label for="sneezing">sneezing : </label> <input name="illness" id="sneezing" type="checkbox" value="sneezing" tabindex="23" /> <p>...more medical history...</p> </fieldset> <fieldset id="opt"> <legend>OPTIONS</legend> <select name="choice"> <option selected="selected" label="none" value="none"> none </option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a </option> <option label="cg1b" value="val_1b">Selection group 1b </option> <option label="cg1c" value="val_1c">Selection group 1c </option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a </option> <option label="cg2b" value="val_2a">Selection group 2b </option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a </option> <option label="cg3a" value="val_3a">Selection group 3b </option> </optgroup> </select> </fieldset> <fieldset id="current"> <legend>CURRENT MEDICATION</legend> <p>...are you currently taking any medication?</p> <label for="yes">yes : </label> <input name="medication" id="yes" type="radio" value="yes" tabindex="35" /> <br /> <label for="no">no : </label> <input name="medication" id="no" type="radio" value="no" tabindex="35" /> <br /> <p>...if currently taking medication, please indicate it in the space below :</p> <textarea name="current_medication" tabindex="40" cols="40" rows="10"> </textarea> </fieldset> <p> <input id="button1" type="submit" value="Send" /> <input id="button2" type="reset" /> </p> </form>  Related Listings:
|
| Form Layout Stylish and Accessible Posted: 22 Dec 2009 09:37 AM PST Yes, HTML forms are the worst things known to web designers. Yes, HTML forms have to be accessible and usable. No, HTML forms do not have to be an eyesore. As the unwanted orphan of web pages, forms are neglected by many and designed by few. Most people are content to put in some text fields, some bold text and a submit button. I’ve come across quite a few tutorials on how to make forms as eye-achingly colourful as possible, and on how to customise form widgets in ways that Safari promptly ignores, but I can’t find any articles telling you how to use semantic, accessible code along with CSS to make better form layout. Layout is where most of the problems lie with forms – grouping objects, labeling fields, helping the user cope with the amount of information that they have to fill in. The only article I could find relating to Standards and form layout was a rather oldish Eric Meyer throwback. So, as a service to the web design community, I have journeyed into the foul depths of forms for the last few days, and come out all the more wiser. Here is the tale of my travels … The code I’ve used in my form templates is all the same, and entirely semantic. There’s more than enough valid form data tags to give CSS the ability to style all elements, so there’s no need to introduce any superfluous divs or spans. (Note: The “horizontal” and “margin” forms mightn’t look terribly hot in Safari or Opera. This is easily rectified using divs to clear the floated elements, but I didn’t want to clutter up the code. Feel free to add them in your own experimentation) For usability and accesibility reasons, every form element on a page should have an associated label. Not only do labels let you focus a form element by clicking on its label text (no more fiddling around clicking on the exact circle that is the radio button), but they enable non-visual browsers to create an association between the label text and the form element, allowing each distinct item to be more readily identified. To assign a label to a form element, you need to give the element an id, then reference that id using the label’s “for” attribute: <label for="elementID"> Label text <input id="elementID" type="text" /> </label> The form element doesn’t have to be nested inside the label tag, but I’ve used this method as it gives an extra level for the CSS to refer to. Aside from the label tag, the only other item that may be unfamiliar to you is the “fieldset” tag. A fieldset tag groups together semantically similar form elements, for instance the three elements that could make up someone’s name: title, first name, last name. By grouping these three elements using a fieldset tag it helps to quantify their association, and allow visual and non-visual browsers alike to more easily navigate a form. The legend tag works alongside the fieldset tag, providing it with a title, like so: <fieldset> <legend> Fieldset title </legend> <label for="elementID"> Label text <input id="elementID" name="elementID" type="text" /> </label> <label for="elementID2"> Label text 2 <input id="elementID2" name="elementID2" type="text" /> </label> </fieldset> Once you’ve coded up the HTML for your form, it’s then a simple matter of applying some CSS rules to turn it from an inline mess to a floated wonder. Each of the templates has a description of how it’s styled at the top, this should help you if you decide to play around with the CSS rules. I’ve purposely not styled any of the form elements themselves (beyond width and positioning), as the focus here is on structure and layout. Undoubtedly, further styling would increase the aesthetics and usability of the forms, but such design is much more site-dependent and best left to your own imagination. Related Listings:
|
| Posted: 22 Dec 2009 06:09 AM PST Moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework. It’s very easy to use, blazing fast, cross-browser, standards compliant, provides controls to modify any CSS property of any HTML element, including colors, with builtin checks that won’t let a user break the effect with multiple, crazy clicks. Optimized to make you write the lesser code possible, the new moo.fx is so modular you can create any kind of effect with it. moo.fx is open source, released under the very liberal MIT License, so feel free to do anything you want with it. Moo.Fx2 Introduces a lot of new stuff: beginning with Fx.Style, to modify any chosen CSS property, then Fx.Styles, to modify any number of CSS properties at once. Those two are the most powerful effects, and if you’re hardcore enough, the ones you’ll ever need. They are infact included in the basic package, moo.fx.js. Then in moo.fx.pack we have Fx.Color, to modify the color properties of your elements and Fx.Scroll, to internally scroll your long divs. A completely rewritten Accordion has its own script now, with multiple options to let you decide every aspect of it. For the nostalgics there is even moo.fx.utils, containing Fx.Height, Fx.Width and Fx.Opacity. moo.fx.utils is only useful if you want to toggle your values, and toggle only works with no padding/margin/borders, and in a strict doctype. If it werent enough, moo.fx is now fully compatible with Robert Penner Easing equations, so there’s also moo.fx.transitions in the package. Use it if you like to give your page a more personalized look! get moo.fx for mootools You can go directly to the mootools download page and build your own customized download! There’s a lot more in there, Ajax, Drag, Dom. Just Choose the best setup for you. STEP 2: INCLUDE Include the single javascript file, mootools.js in your page. get moo.fx for prototype Included in the download you’ll find all the scripts. The only required script is moo.fx.js, along with either prototype.lite.js include the scripts in the following order: 1. prototype.js or prototype.lite.js (required) No related Listing. |
| MochiKit to Reduce Javascript Code Posted: 22 Dec 2009 05:35 AM PST MochiKit is a highly documented and well tested, suite of JavaScript libraries. To turn off MochiKit’s export feature (which may be necessary for compatibility with some existing code), do this before loading MochiKit: <script type="text/javascript">MochiKit = {__export__: false};</script> When export mode is off, you must use fully qualified names for all MochiKit functions (e.g. MochiKit.Base.map(…)). Features: Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.