HTML 5 - LocalStorage, Web Forms

HTML 5 предоставляет новый уровень для ввода данных в web приложениях. В этом сообщение покажу пример использования новых типов полей ввода данных, валидацию, сохранение данных формы в localStorage.

Поля типа INPUT получили новые типы

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

теперь ввод данных идет с первичной проверкой на соответствие типу.
Атрибут placeholder - позволяет указать в поле значение, подсказку в случае отсутствия данных.Возможны указание максимального и минимального значения, шаблонов (pattern) валидации ввода в виде RegExp и др.

Примеры валидаций полей для разных типов и шаблонов:

Обязательность поля:

 

Ввод e-mail:

 

Числовое поле:

Ввод по шаблону ("[A-Za-z]{3}"):

 

Появился замечательный объект в javaScript  localStorage позваляющий на клиентской стороне сохранять различные данные, а после возобновления работы браузера, восстанавливать их.

Вот так можно сохранить данные:

localStorage.setItem("formStorage", data);

а затем восстановить:

var form = localStorage.getItem("formStorage");

На Демо стенде показана форма в которой использованы новые типы полей и возможность сохранения данных формы в localStorage. Форма сделана на чистом HTML ее код доступен,  есть ссылка и на javaScript. 

Пример формы

<form id="form">
                        <label for="name">
                            Имя:
                        </label>
                        <input type="text" id="inName" name="name" placeholder="Введите имя" required="required"/>
                        <label for="browser">
                            Ваш браузер:
                        </label>
                        <input id="inBrowser" list="browsers" name="browser" placeholder="Введите название"
                               required="required"/>
                         
                        <datalist id="browsers">
                            <option value="Internet Explorer"/>
                            <option value="Firefox"/>
                            <option value="Chrome"/>
                            <option value="Opera"/>
                            <option value="Safari"/>
                        </datalist>
                        <label for="r1">
                            Первый:
                        </label><input type="radio" name="r1" value="1" id="radio1"/><label for="r1">
                            Второй:
                        </label><input type="radio" name="r1" value="2" id="radio2"/>
                        <label for="bday">
                            Дата:
                        </label>
                        <input id="bday" type="date" name="bday" required="required"/>
                        <label for="color">
                            Цвет:
                        </label>
                        <input id="col1" type="color" name="color"/>
                        <label for="email">
                            E-mail:
                        </label>
                        <input id="em1" type="email" name="email"/>
                        <label for="email">
                            Число:
                        </label>
                        <input id="nm1" type="number" name="num"/>
                        <label for="rng">
                            Диапазон:
                        </label>
                        <input id="rng1" type="range" name="rng" min="1" max="10"/>
                        <label for="code">
                            Код:
                        </label>
                        <input id="code1" type="text" name="code" placeholder="Код из трех символов"
                               pattern="[A-Za-z]{3}"/>
                        <input type="submit"/>
        </form> 

        <script src="http://dlodenan.ucoz.ru/script.js">    
        </script>

        <script>
            initForm();
        </script>

 
 Пример скрипта

/**
 * Инициализация после загрузки страницы
 * @returns {undefined}
 */
function initForm() {
    setEvents();
    loadForm();
}

/**
 * Установить для всех полей ввода событие - onChange
 * @returns {undefined}
 */
function setEvents() {
    var form = document.getElementById("form");
    for (i = 0; i < form.length; i++)
    {
        var el = form.elements[i];
        trace("setEvents nodetype:" + el.tagName);
        if (el.tagName == "INPUT") {
            el.onchange = onChange;
        }
        var type = el.type;
    }
}

/**
 * Событие изменение значения в элементе ввода
 * @param {type} ev
 * @returns {undefined}
 */
function onChange(ev) {
    //trace("change:" + ev.target.value);
    var form = document.getElementById("form");
    var pkForm = packageForm(form);
    saveForm(pkForm);
}

/**
 * Конструктор для элемента формы
 * @param {type} id
 * @param {type} type
 * @param {type} value
 * @returns {FormElement}
 */
function FormElement(id, type, value) {
    this.id = id;
    this.type = type;
    this.value = value;
}

/**
 * Упаковка формы для сохранения
 * @param {type} form
 * @returns {Array}
 */
function packageForm(form) {
    var formElement = new Array();
    for (i = 0; i < form.length; i++)
    {
        var el = form.elements[i];
        if (el.type == "radio")
            formElement[i] = new FormElement(el.id, el.type, el.checked);
        else {
            formElement[i] = new FormElement(el.id, el.type, el.value);
        }
    }
    return formElement;
}

/**
 * Чтение массива 
 * @param {type} form
 * @returns {undefined}
 */
function unPackageForm(form) {
    trace("unPackageForm");
    for (i = 0; i < form.length; i++) {
        var formEl = form[i];
        var el = document.getElementById(formEl.id);
        if (el != null) {
            if (el.type == "radio") {
                el.checked = formEl.value;
            }
            else {
                el.value = formEl.value;
            }
        }
    }
}

/**
 * Сохранение данных формы в localStorage
 * @param {type} form
 * @returns {undefined}
 */
function saveForm(form) {
    trace("saveForm");
    localStorage.setItem("formStorage", JSON.stringify(form));
}

/**
 * Загрузка формы из localStorage
 * @returns {undefined}
 */
function loadForm() {
    trace("loadForm");
    var form = localStorage.getItem("formStorage");
    if (form != null) {
        form = JSON.parse(form);
        unPackageForm(form);
    }
}

Демо стенд