background preloader

Forms

Facebook Twitter

Expanding Text Areas Made Elegant. An expanding text area is a multi-line text input field that expands in height to fit its contents.

Expanding Text Areas Made Elegant

This UI element is commonly found in both desktop and mobile applications, such as the SMS composition field on the iPhone. Examples can also be found on the web, including on Facebook, where it’s used extensively. It’s a good choice wherever you don’t know how much text the user will write and you want to keep the layout compact; as such, it’s especially useful on interfaces targeted at smartphones. Issue № 338 Despite the ubiquity of this control, there’s no way to create it using only HTML and CSS. Trawling the internet, you can find several attempts at creating expanding text areas, but most suffer from one or more of the following problems: The height is calculated by guessing where wrapping occurs based on the cols attribute. The best solution I’ve seen uses a separate pre element absolutely positioned off screen, styled the same as the textarea; let’s call this the mirror element. The Current State of HTML5 Forms · Wufoo.

JavaScript and HTML5 Forms Testing for Support If you intended to write JavaScript to mimic the functionality of HTML5 forms, you may want to first test the current browsers capability and write the JavaScript as a fallback.

The Current State of HTML5 Forms · Wufoo

On the right is how you might test for attribute support. More accurate feature testing can be done through the excellent JavaScript library Modernizr. Custom Validity Messages You can override the default validity error messages through JavaScript More JavaScript Fun HTML5 has a number of useful JavaScript methods for manipulating forms. CSS and HTML5 Forms Pseudo classes CSS3 has a number of new pseudo classes that can select form elements that are in particular states. The :not() selector isn't specific to forms, but is useful for selectors like :not([type=submit]) for selecting all inputs other than submit buttons. The :valid pseudo selector will select the legend element of a fieldset that contains a valid input in Safari 5. Web Forms.

You are here: Home Dive Into HTML5 Diving In Everybody knows about web forms, right?

Web Forms

Make a <form>, a few <input type="text"> elements, maybe an <input type="password">, finish it off with an <input type="submit"> button, and you’re done. You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. Placeholder Text The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. You’ve probably seen placeholder text before. When you click on (or tab to) the location bar, the placeholder text disappears: Here’s how you can include placeholder text in your own web forms: Browsers that don’t support the placeholder attribute will simply ignore it. Ask Professor Markup Q: Can I use HTML markup in the placeholder attribute?

Autofocus Fields Web sites can use JavaScript to focus the first input field of a web form automatically. Here’s how you can set a form field to autofocus: What’s that? Autofocus with fallback. Interaction Design & Strategy. Comment bien placer des labels dans leur zone de texte. Par Anthony T Il existe plusieurs manières de disposer les labels sur les formulaires.

Comment bien placer des labels dans leur zone de texte

En général, les designers web les placent soit au‑dessus, soit à gauche des zones de texte. Mais jusqu’à récemment, personne ne pensait à les insérer à l’intérieur. On commence à rencontrer de plus en plus fréquemment des formulaires de ce genre. Plus ils gagnent en popularité, plus les designers web auront tendance à les utiliser. En plaçant vos labels à l’intérieur des zones de texte, vous apportez à votre formulaire de nombreux avantages. Reconnaissance visuelle contre mémoire Placer les labels à l’intérieur des zones de texte apporte autant d’avantages que de défis. Groupes et intitulés Afin que l’utilisateur puisse reconnaître facilement le type d’information qu’il saisit, vous devez regrouper vos zones de texte en fonction des informations qu’elles contiennent et attribuer un intitulé clair à chaque rubrique.

Lanbito: Mobile Form Builder.