- Create Amazing Forms on Google Developer
- Web Forms the Right Way (Presentation)
- Datalist element on MDN
- Styling Calendars
- Autocomplete attribute on MDN
- Autofocus input on MDN
- Input validation on MDN
- Learn, build, & test Regular Expressions (RegEx / RegExp) online
- Constraint Validation API with setCustomValidity() on MDN
- The Current State of HTML5 Forms
- Using Geolocation on MDN
- Multi-touch Web Development on HTML5Rocks
- Video: how pseudo classes work on mobile devices
- Touch Events on MDN
Each touch event includes three lists of touches.
- touches: a list of all fingers currently on the screen.
- targetTouches: a list of fingers on the current DOM element.
- changedTouches: a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.
These lists consist of objects that contain touch information:
- identifier: a number that uniquely identifies the current finger in the touch session.
- target: the DOM element that was the target of the action.
- client/page/screen coordinates: where on the screen the action happened.
- radius coordinates and rotationAngle: describe the ellipse that approximates finger shape.
// grab <input id="range-example" type="range" min="0" max="5" step="1"> from the page
var rangeInput = document.querySelector('input#range-example');
// grab <p id="output"></p> to display the output
var output = document.querySelector('p#output');
// update the display when the range changes
rangeInput.onchange = function() {
output.innerHTML = this.value;
};
On mobile devices by long press on the screen
<style>
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
</style>
// Check if pointer events are supported.
if (window.PointerEventSupport) {
// Add Pointer Event Listener
swipeFrontElement.addEventListener(pointerDownName, this.handleGestureStart, true);
} else {
// Add Touch Listener
swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
// Add Mouse Listener
swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
}