Udacity Building High Conversion Web Forms Notes

Useful links:

• 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

Touch Support

• Add Touch to Your Site on Google Developers

Notes:

Touch Events

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.

Snippets:

Input numbers validation example

    // 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;
    };

Prevent text from being selected

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>

Touch Event Example

  // 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);
  }