"Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface Using the correct structure when building an HTML form will help ensure that the form is both usable and accessible."
- Be simple and straightforward
- Use one column
- Arrange your form fields from easiest to hardest
- Use inline form field validation
- Align text to the left
- Clearly title your form
- Don’t ask for phone numbers
- Use auto-fill browsers
- Address possible user concerns with summary boxes
- Design mobile forms differently
- Use positive error messages
- Include smart defaults
- Add progress bars for long forms
- Use reCAPTCHAs, not CAPTCHAs
- Enable the ability to tab to next form field
From a user experience (UX) point of view, it's important to remember that the bigger your form, the more you risk frustrating people and losing users. Keep it simple and stay focused: ask only for the data you absolutely need.
One of the most used form element is the input element. The input element can be displayed in several ways, depending on the type attribute.
The label element defines a label for several form elements.
The label element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The elect element defines a drop-down list
The option elements defines an option that can be selected.
The textarea element defines a multi-line input field (a text area):
"In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur.
- The user selects, clicks, or hovers the cursor over a certain element.
- The user chooses a key on the keyboard.
- The user resizes or closes the browser window.
- A web page finishes loading.
- A form is submitted.
- A video is played, paused, or ends.
- An error occurs."
The name of the event and a function to handle the event. The method addEventListener() works by adding a function, or an object that implements EventListener, to the list of event listeners for the specified event type on the EventTarget on which it's called.
Sometimes, inside an event handler function, you'll see a parameter specified with a name such as event, evt, or e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information.
Event bubbling describes how the browser handles events targeted at nested elements.
Event Capture is like event bubbling but the order is reversed: so instead of the event firing first on the innermost element targeted, and then on successively less nested elements, the event fires first on the least nested element, and then on successively more nested elements, until the target is reached.
HTML5 Input Types This article discusses newer form controls such as: E-mail address field Client-side validation Search field Phone number field URL field Numeric field Slider controls Date and time pickers Color picker control
"This topic provides an index to the main sorts of events you might be interested in (animation, clipboard, workers etc.) along with the main classes that implement those sorts of events. At the end is a flat list of all documented events."