HTML 5 Forms

Gupta, G. (2013) Mastering HTML5 Forms – Create dynamic and responsive web forms with this  in- depth, hands-on guide, Packt Publishing

Download eBook PDF (PDF 1,346KB)

Download Source Code (ZIP 2,189KB)

HTML5 has given web developers the ability to easily develop sites and applications which, previously, were extremely time consuming. Now, they can not only build visually stunning forms and web pages, but can also increase the scope of their applications, as well as collect valuable user inputs and data through customized forms.

This practical guide will teach you how to create responsive forms, and how to link them to the database. This will enable you to take advantage of the power behind HTML5 elements for building forms, and make the user interfaces attractive and more interactive.

Explore the benefits of web forms, and learn how to create them using new HTML5 form elements. This guide will take you through a number of clear, practical examples that will help you to take advantage of the forms built and customized using HTML5 and related technologies, quickly and painlessly. Your ability to build responsive forms will be enhanced throughout the book.
You will also learn about the necessity of validations, CSS3 properties for improving the look of the form, and how to link the form to the server. Lastly, you will learn to make the standard forms responsive by making them compatible with desktops and mobile devices.

What You Will Learn

  • Get to grips with the new HTML5 form elements and attributes
  • Add client-side validation to your forms using HTML5 attributes
  • Discover form validation constraints and the supported APIs
  • Style your forms using CSS3
  • Prevent spoofing and forging of the forms
  • Utilize PHP and MySQL to store information in databases
  • Understand responsive design techniques

Table of Contents

1: Forms and Their Significance
2: Validation of Forms
3: Styling the Forms
4: Connection with Database
5: Responsive Web Forms

reate dynamic and responsive web forms with this in- depth, hands-on guide

Overview

  • Enhance the look and feel of your form
  • Optimize your user experience for any device
  • Utilize HTML5’s brand new form elements

In Detail

HTML5 has given web developers the ability to easily develop sites and applications which, previously, were extremely time consuming. Now, they can not only build visually stunning forms and web pages, but can also increase the scope of their applications, as well as collect valuable user inputs and data through customized forms.

This practical guide will teach you how to create responsive forms, and how to link them to the database. This will enable you to take advantage of the power behind HTML5 elements for building forms, and make the user interfaces attractive and more interactive.

Explore the benefits of web forms, and learn how to create them using new HTML5 form elements. This guide will take you through a number of clear, practical examples that will help you to take advantage of the forms built and customized using HTML5 and related technologies, quickly and painlessly. Your ability to build responsive forms will be enhanced throughout the book.
You will also learn about the necessity of validations, CSS3 properties for improving the look of the form, and how to link the form to the server. Lastly, you will learn to make the standard forms responsive by making them compatible with desktops and mobile devices.

What you will learn from this book

  • Get to grips with the new HTML5 form elements and attributes
  • Add client-side validation to your forms using HTML5 attributes
  • Discover form validation constraints and the supported APIs
  • Style your forms using CSS3
  • Prevent spoofing and forging of the forms
  • Utilize PHP and MySQL to store information in databases
  • Understand responsive design techniques

Approach

This tutorial will show you how to create stylish forms, not only visually appealing, but interactive and customized, in order to gather valuable user inputs and information.

Who this book is written for

Enhance your skills in building responsive and dynamic web forms using HTML5, CSS3, and related technologies. All you need is a basic understanding of HTML and PHP.

Bolton, J., Featherstone, D. and Connell, T. (2009) Fancy Form Design, SitePoint Pty. Ltd

Download eBook PDF (PDF KB)

Download Source Code (ZIP 333KB)

Forms’ – is there any other word that strikes as much fear into the hearts of web designers? Not any more …

Fancy Form Design is a practical hands-on, full color book that follows the process of creating visually stunning yet usable web forms, from start to end. The book covers all design elements from planning the form’s purpose and interface through to mastering markup, applying style with CSS, and adding interactivity and visual effects with JavaScript. By the end of the you’ll will have the code, and wisdom, they need to build fancy forms of their own.

What you’ll learn

  • Plan your design with prototyping, visitor profiles, and use cases.
  • Use grids, color, typography, icons, and texture in your design.
  • Code with usable, accessible, and meaningful markup.
  • Style with proven CSS tricks and techniques.
  • Give your forms the “wow” factor with JavaScript

Contents

  1. Planning
  2. Designing
  3. Structure
  4. Styling
  5. Enhancing
Enders, J. (2016) Designing UX: Forms, SitePoint Pty, Ltd
A recent study found that on average, designing a form to have a great user experience almost doubled the rate of successful first-time completions. For example, Ebay made an additional $USD 500 million annually from redesigning ?just the button? on one? of their mobile form screens. More conversions, fewer dissatisfied users, better return on investment. Can you afford not to improve your forms’ user experiences?
This book will walk you through every part of designing a great forms user experience. From the words, to how the form looks, and on to interactivity, you’ll learn how to design a web form that works beautifully on mobiles, laptops and?desktops. Filled with practical and engaging insights, and plenty of real-world examples, both good and bad. You’ll learn answers to common queries like: Where should field labels go? What makes a question easy to understand? How do you design forms to work on small screens? How does touch impact on form design? How long can a form be? What look and feel should the form have: skeumorphic, flat, or something else? What’s best practice for error messaging?

Jarrett, C. and Gaffney, G.(2008) Forms that Work: Designing Web Forms for Usability (Interactive Technologies), Morgan Kaufmann

Download eBook PDF (PDF 11,984KB)

Companion Web Site: http://www.formsthatwork.com/

Forms are everywhere on the web – for registration and communicating, for commerce and government. Good forms make for happier customers, better data, and reduced support costs. Bad forms fill your organization’s databases with inaccuracies and duplicates and can cause loss of potential consumers. Designing good forms is trickier than people think. Jarrett and Gaffney come to the rescue with Designing Forms that Work, clearly explaining exactly how to design great forms for the web. Liberally illustrated with full-color examples, it guides readers on how to define requirements, how to write questions that users will understand and want to answer, and how to deal with instructions, progress indicators and errors.

*Provides proven and practical advice that will help you avoid pitfalls, and produce forms that are aesthetically pleasing, efficient and cost-effective.

*Features invaluable design methods, tips, and tricks to help ensure accurate data and satisfied customers.

*Includes dozens of examples — from nitty-gritty details (label alignment, mandatory fields) to visual designs (creating good grids, use of color).

*Foreword by Steve Krug, author of the best selling Don’t Make Me Think!

Table of Contents

Introduction: What is a form?

1. Persuading people to answer
Pick the right moment to ask a question
Think about relationship question by question
Follow three rules that that influence response rates
Think about who will answer your questions
Summary
Interlude: Registration forms: rules and suggestions

2. Gathering the right information
Find out why you need the information
Check if your organization already holds the information
Find out what others ask for
Summary: only ask for information that you need
Case study: conference registration form

3. Making questions easy to answer
How questions work
Make it easy to understand the question
Make it easy to find the answer
Judging the answer: avoiding privacy errors
Placing the answer: avoiding category errors
Summary: writing questions
Case study: avoiding choice points

4. Writing instructions
Writing instructions
Rewriting instructions in plain language
Cut the instructions that aren’t needed
Move the instructions to where they are needed
A before- and after- example
Summary: Writing instructions
Interlude: help for forms

5. Choosing between drop-downs and other controls
Picking controls for your forms
How users expect controls to work
Use these six questions to choose the right control
Specialist controls may help
Think about the form as a whole
Summary: Providing the answer
Interlude: names and addresses

6. Making the form flow easily
Make the form flow easily
Use progress indicators
Avoid surprising users with sudden changes
Be gentle with errors
Say ‘thanks’ to close the conversation
Conversational flow – summary
Interlude: why we hate pop-ups

7. Taking care of the details
Taking care of the details
Where to put the labels compared to the fields
Colons at the end of labels?
Sentence or title case for labels?
How to indicate required fields
Choosing legible text: fonts and words
Summary
Interlude: serif or sans-serif

8. Making the form look easy
What makes a form look good
Make sure users know who you are: logos and branding
Make your form look tidy with grids
Make it look organized with grouping
Avoid two-column forms
Summary
Case study: an appearance makeover

9. Testing (the best bit)
We’re passionate about usability testing
How to do really good usability testing of forms
Final message from this book
Appendices
Suggestions for further reading
References