Skip to main content

HTML Form Elements and Attributes

Estelle Weyl (Instart Logic)
HTML5, CSS3, and Browser Tech
Location: Salon 9
Average rating: ****.
(4.36, 14 ratings)
Slides:   external link

HTML forms have been the bane of web developers for years. Not anymore! With HTML5 you may learn to love forms. Browsers now enable you to provide users with rich date GUIs, validate forms and provide validation feedback without JavaScript. JavaScript-free placeholder text, pattern matching, required fields, auto focus, error handling is now a reality.

In this session we’ll discuss new to HTML5 form input types and attributes. I can’t promise that you’ll love creating web forms, but you will at least appreciate rather than dread them.

We’ll cover the new HTML5 input types, controlling which dynamic keyboard gets displayed on keyboard-less devices, and what you can do without frameworks, or even any JavaScript, including:

  • Placeholder text which clears on data entry
  • Form validation with error messaging
  • jQuery UI-like datepickers, spinners and sliders
  • Regular expression pattern matching
  • Autosuggest on inputs
  • Unhiding and styling inputs, labels and error messaging, and
  • Custom error messaging (OK, that last one requires a teeny bit of JS)

Sometimes less is more. While this is a JavaScript conference, in this session you’ll learn how to create more responsive form elements by using less JavaScript; relying on your browser instead of JS frameworks to get your job done.

Photo of Estelle Weyl

Estelle Weyl

Instart Logic

Estelle Weyl started her professional life in architecture and then managed teen health programs. In 2000, Estelle took the natural step of becoming a web standardista. She is the Open Web and performance evangelist for Instart Logic and has consulted for Kodak Gallery, SurveyMonkey, Samsung, Yahoo, Visa, and Apple, among others. Estelle shares esoteric tidbits learned while programming and detailed grids of CSS3 and HTML5 browser support in her blog. She is a coauthor of Mobile HTML5, CSS3: The Definitive Guide, and HTML5 and CSS3 for the Real World. While not coding, Estelle works in construction, de-hippifying her 1960s throwback abode.

Comments on this page are now closed.

Comments

Picture of Estelle Weyl
Estelle Weyl
03/14/2014 9:15am PDT

Hi Ryan-

Slides are up at http://estelle.github.com/forms.

-Estelle

Ryan Tainter
03/14/2014 8:48am PDT

Is there a link to your slides?...I didn’t take notes, but would love to review :) Thank you