Simple Tricks for More Usable Forms [JavaScript & DHTML Tutorials] Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I’ll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own. I’m going to start off with some simple tricks, before introducing the interesting stuff later on. If the material seems too simple for you, feel free to skip ahead. It’s the Little Things that Count You will certainly have encountered our first trick before; it’s used by Google, the world’s most popular search engine. This is, more or less, the method used by Google. <script type="text/javascript"> window.onload = document.getElementById('myfield').focus; </script> This can be added to any point in your HTML file, or hidden away in an external script. Labels Why the two cursor declarations?
Applying CSS to forms CSS has come a long way in the 12 years since this article was written. Read our latest blog article to check out our latest thoughts on where we see CSS going in 2016! Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up. The original form That form looks horrible! <form action="#"><p><label for="name">Name</label><input id="name" type="text" /></p><p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p><p class="submit"><input type="submit" value="Submit" /></p></form> Positioning the form with CSS The first thing we need to do to the form is make it line up nicely. Right, let's go through that CSS bit-by-bit. The margin-right: 0.5em CSS command means the labels will have a small amount of spacing after them, so that the text isn't up against the input box. So, putting that altogether gives us this form: Applying colours to the form
Web Interface Design Tip: The Yellow Fade Technique (Signal vs. Noise) Web Interface Design Tip: The Yellow Fade Technique 19 Feb 2004 by Matthew Linderman “Because something is happening here / But you don’t know what it is / Do you, Mister Jones?” - Bob Dylan A lot of web sites & applications make you feel a bit like Mr. Why does this matter? Let’s take a look at an example. Let’s say I want to change the name of the second post on this Basecamp page from “CEO Photo” to “Jim Messier Photo.” First off, I’ll go to the “Edit Post” page and change the post’s title. Once I save the change, the original page then reloads with the YFT (the yellow highlights the post I just changed). Voila, the page is back to normal within seconds. To see it in action, sign up for Basecamp (you can try it for free).
Form Design with Sliding Labels « CSSKarma A few weeks ago I was reading an article on form UI by Luke Wroblewski of Yahoo!. For those who aren’t familiar with Luke, he (quite literally) wrote the book on good form design. In the article, one certain section about placing labels inside of form fields stood out to me: Because labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. He brings up a good point. For best practice, Luke talks about leaving your labels outside the form field so it’s always available to the user. Enter: Sliding Labels After reading that article it occurred to me that there’s no reason we can’t have the best of both worlds. View demo The HTML <form action="" method="post" id="info"><h2>Contact Information</h2><div id="name-wrap" class="slider"><label for="name">Name</label><input type="text" id="name" name="name"></div><! At this point we have a pretty basic, and ugly form The CSS The jQuery Try it out and let me know what you think.
Functioning Form - User Experience Diagrams A collection of diagrams about user experience fundamentals. Last updated June 2011. The Elements of User Experience (PDF) Conceptual model of the considerations involved in designing successful user experiences for Web sites. User Experience Cycle (PDF) The user experience is not one simple action -it is an interconnected cycle of attempting to satisfy hopes, dreams, needs, and desires. User Experience Honeycomb A tool for advancing the conversation beyond usability and helping people understand the many facets that can impact the quality of user experience. Designing the User Experience This poster illustrates the path to more usable products. The Fundamentals of Experience Design The model covers the basic UX stuff like moving from a focus on tasks to a focus on activities, as well as more theoretical discussions like activity centered design vs user centered design. User-Centered Design Process (PDF) The User Experience Cosmos (PDF) A Cartesian representation of our field.
A Better Login System | Nettuts+ Net.tuts+ has published several great tutorials on user login systems. Most tutorials only deal with authenticating the user, which allows for two levels of security: logged in and not logged in. For many sites, a finer degree of control is needed to control where users can go and what they can do. Creating an access control list (ACL) system will give you the flexibility for granular permissions. Introduction Imagine you are running a great tutorial site that lets users learn about a wide variety of web development techniques. Your problem You want to restrict users' to only specific pages that their particular account allows access to. The solution Implementing an access control list will allow you a great deal of control over what users can and cannot access on your site. If you view the demo, available with the downloadable source code, you will be greeted with an index page that tests the ACL for each user. Step 1: Create the Database Step 2: Database Include Step 3: Create the ACL Class
The $300 Million Button By Jared M. Spool Originally published: Jan 14, 2009 Editor's note: Thanks to Marco Dini, you can now read this article in Italian. [While Luke Wroblewski was writing his well-received book, Web Form Design: Filling in the Blanks, he asked if I could think of an example where a change in a form's design made a noticeable difference in business. How Changing a Button Increased a Site's Annual Revenues by $300 Million It's hard to imagine a form that could be simpler: two fields, two buttons, and one link. The form was simple. The problem wasn't as much about the form's layout as it was where the form lived. The team saw the form as enabling repeat customers to purchase faster. "I'm Not Here To Be In a Relationship" We conducted usability tests with people who needed to buy products from the site. We were wrong about the first-time shoppers. Some first-time shoppers couldn't remember if it was their first time, becoming frustrated as each common email and password combination failed.
PHP Mail Form: Secure and Protected » tutorialtastic.co.uk The one major downside to the ever-changing fast paced cyber world that we call the Internet is the speed at which code becomes outdated and new security issues are discovered. This tutorial covers the basics as set forth in previous tutorialtastic mail form guides with new, more advanced security techniques and spam-blocking measures. Firstly, the key to any mail form is the actual form — this tutorial is pointless without it. So, we start with the <form> tag — this is where we specify how our data is sent and the file we’ll use to process that data. <html><head><title>My Mail Form</title></head><body><form method="post" action="form-process.php"></form></body></html> (Save this in a file called form.php or form.html) The key to creating a form that you’ll process with PHP is properly naming the form fields. To give an example of a variety of form elements, I’m using the fields: Name, E-mail, Country and Comments. Notice how each field has a name? <? <? <? Phew. …and that’s it!
51 Form Element Resources and Tutorials Using CSS And Javascript I featured many good looking contact forms some time ago – 91 Trendy Contact And Web Forms For Creative Inspiration, so you should know how looks good example. Now let’s take a look how to create outstanding and beautifully designed form elements from scratch ourselves. Things can get tricky even if you are experienced designer. It’s hard to attract visitors attention, but this article should help to stand out and create semantically correct, good looking and accessible web forms, checkboxes, radio buttons, buttons, fieldsets – everything you can think of when you are creating contact or login page! 1. This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. View demo & source 2. Very well explained tutorial showing crucial points you should give attention to. View demo & source 3. View demo & source 4. View demo & source 5. View demo & source 6. View demo & source 7. View demo & source 8. View demo & source 9.
Styling Form Widgets 28 April 2004 "With great power comes great responsibility." So said the Gods of the W3C when they handed man the gift of CSS 1. Much good was done with this boon from the heavens. I'm not pointing fingers here, but even though forms aren't usually the best looking part of a Web site sometimes you've got to resist the urge to style them, for usability's sake. Form elements come from deep within your Operating System, they're the primordial substance of Web pages, and there's a reason why they look like they do. So, why give a form element a uniform one pixel border and make it just look like a box with a word in it? I have only seen one instance of styling form elements where I have thought "yes, that really is an improvement over the default appearance." Example: It even looks OK if you don't want to use an image: ... or if you want to colour it: Tested in Win 98: IE 6, Firefox 0.8, Opera 7.23. Update (2010-09-20): This article has been translated into Belorussian by Patricia Clausnitzer.
Tutorials & Stylish Examples of Web Forms For Web Developers | VisonwidGet Examples of Web Forms and Tutorials Details Category: Tools Last Updated on Sunday, 22 April 2012 14:57 Hits: 8507 When developing a project it’s important to have a good form input structure throughout, most commonly used css forms will tend to be Login, Register and user Profiles, or writing an email through a web-based client such as Gmail - forms are a staple to modern websites and web applications. In this showcase, We have gathered together a great list of Stylish Examples of Web Forms and tutorials that should have your new forms looking great or breath life into your existing form design. Remarkable and well-constructed web form designs Ballpark MAQUINA studio Komodo Media Grooveshark nclud Substrakt Connect Alexandru Cohaniuc SocialSnack Digg Digitalmash Media Temple Kontain Tea Round App 40 CSS Style Tutorials of Web Forms 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40.