Новые элементы html5
HTML5 включает 5 новых элементов форм. Форма progress показывает процесс загрузки. Форма meter показывает шкалу измерения. Форма datalist используется для ввода. Форма keygen используется для создания пары ключей, один из которых передается через форму на сервер. Форма output отображает сумму вводимых элементов. Например: PROGRESS <progress max="100" value="25">25%</progress>
METER <meter value="50" min="0" low="20" optimum="50" high="80" max="100"></meter>
KEYGEN <keygen name="key" keytype="rsa" challenge="challenge" />
DATLIST Элемент ввода с возможными значениями в datalist описанными c помощью элементов option. Элемент input связывается с элементом datalist c помощью атрибута list. DATALIST <input list="company" /> <datalist id="company"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
OUTPUT Определяет область в которую выводится информация, преимущественно с помощью скриптов. <form action="" oninput="out.value=range.value"> <div> <input type="range" name="range" min="0" max="100" value="25" /> </div> <div> <output name="out">25</output> </div> </form>
Новые типы ввода HTML5 предоставляет 13 новых типов ввода |
|
|
|
|
|
|
|
|
Определяет поле для ввода email. Поле не отличается от элемента input.
Хорошо реализовано на iPhone/iPad.
URL
Определяет поле для ввода url. Поле не отличается от элемента input.
Хорошо реализовано на iPhone/iPad.
TEL
Определяет поле для ввода телефона. Поле не отличается от элемента input.
Хорошо реализовано на iPhone/iPad.
SEARCH
Определяет поле для поиска
<input type="search"/>
DATE
Служит для ввода даты
<input type="date" min max/>
TIME
Служит для ввода времени
<input type="time" min max step />
DATETIME
Служит для ввода даты и времени
<input type="datetime" min max step />
NUMBER
Служит для ввода числовых данных
<input type="number" min max step />
RANGE
Служит для ввода значения из диапазона
<input type="range" min max step />
MONTH
Служит для ввода месяца
<input type="month" min max />
WEEK
Служит для ввода недели
<input type="week" min max />
COLOR
Служит для ввода цвета
<input type="color" />
Новые атрибуты ввода
AUTOFOCUS
При загрузке страницы автоматически передает фокус элементу. На странице может быть один элемент с этим атрибутом.
<input type="text" autofocus />
Атрибут FORM связывает элемент с формой.
<form action="" id="form">
<div><input type="text" name="login" /></div>
<div><button type="submit"></button></div>
</form>
<input type="email" name="email" form="form" />
PLACEHOLDER
Устанавливает подсказывающий текст в поле ввода.
<input type="password" placeholder="enter your password"/>
Состояние off можно использовать когда вводимые данные строго конфиденциальны, либо когда эти данные никогда не будут использоваться повторно.
<input type="text" autocomplete="off"/>
FORMACTION
formaction, formenctype, formmethod, formtarget эти атрибуты добавляются к элементам, отвечающим за отправку форм, и переопределяют соответствующие им атрибуты форм Эти атрибуты поддерживаются элементами ввода и кнопками
<input type="submit" formmethod ="post" />
formaction атрибут для переопределения действия элемента формы.
formenctype атрибут Для переопределения enctype элемента формы.
formmethod -атрибут для переопределения метода элемента формы.
<input type="submit" formmethod ="post" />
formnovalidate атрибут для переопределения NOVALIDATE элемента формы.
formtarget - атрибут для главной целевой атрибут
REQURED
Проверяемое поле не пройдет валидацию, если его значение будет пусто, либо не выбрано для checkbox, radio.
<input type="text" name="name" placeholder="Enter your name" required>
PATTERN
Позволяет создавать регулярное выражение, которому должны соответствовать вводимые данные.
SET CUSTOM VALIDITY
Позволяет задать ваше собственно собщение валидации.
<form action="">
<div><input type="email" name="email" required/></div>
<div><input type="password" name="pass1" required/></div>
<div><input type="password" name="pass2" required/></div>
<div><input type="submit" value="Register"/></div>
</form>
<script>
document.querySelector('input[name="pass2"]')
.addEventListener("input", function(e){
if ( this.value != document.querySelector('input[name="pass1"]')
.value )this.setCustomValidity("The two passwords must match.");
else
this.setCustomValidity("");
}, true);
</script>
autocomplete уточняет, что поле должно /не должно автозаполнятся или быть предварительно заполнена браузером, на основании прошлых записей пользователя. Это может быть, например, номер кредитной карты или одноразовый пароль. По умолчанию автозаполнение включено, если вы хотите отключить, установите его в положение OFF. dirname для подачи направленности кон-TROL с формой.
Валидация формы использует код JavaScript или библиотеку, чтобы делать проверку входных данных или обеспечить заполнение необходимых полей перед отправкой формы. Есть и другие методы проверки, например атрибут required
Если атрибут required присутствует, то поле должно содержать значение при отправке формы. Вот пример строки ввода адреса электронной почты. гарантирует, что поле имеет значение и что значение действительный адрес электронной почты, как определено здесь. <input type="email" id="email_addr" name="email_addr" required />
Pattern-атрибут для проверки значения элемента с регулярным выражением.Атрибут pattern содержит регулярное выражение, используемое для проверки поля ввода. Для примера, предположим, что номер состоит из трех прописных букв следуют четыре цифры. Использование необходимых и структура обеспечения того, чтобы поле имеет значение и что значение соответствует правильный формат для номера детали. Если пользователь находится над полем, сообщение в названии атрибута не отображается.
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
Основываясь на предыдущем примере, вы также можете обозначить поле ввода красным цветом, если неверный номер части вводится. Чтобы сделать это, добавьте в CSS, чтобы положить красную рамку вокруг поля ввода, если значение является недопустимым.
:invalid {
border: 2px solid #ff0000;
}
novalidate – атрибут используется для отключения проверки данных формы. Formnovalidate атрибут может применяться для input or button элементов. Если оно есть, то проверка данных формы отключено. Вот пример, где отправке формы с помощью кнопки Отправить требует допустимых входных данных, но и представления с помощью кнопки
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}"
title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
API ограничения проверки предоставляет мощные инструменты для пользовательской проверки. API позволяет вам делать такие вещи, как набор пользовательской ошибки, проверьте, является ли элемент в силе, и определить, причина того, что элемент является недействительным. Вот пример, который отображает пользовательские ошибки, если значения в двух полях не совпадают.
<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">
<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">
<script>
function check(input) {
if (input.value != document. getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Собираем все вместе. Вот пример формы заявки
Полное имя:
Адрес электронной почты:
Повторите адрес электронной почты:
Дата заезда:
Количество ночей (номера $ 99,00 за ночь):
Количество гостей (каждый дополнительный гость добавляет $ 10,00 за ночь):
Предполагаемая общая сумма: $ 99.00 Промо-код: Это HTML и JavaScript для формы:
|
|
|
Конец формы
This is the HTML and JavaScript for the form:
<form oninput="total.value = (nights.valueAsNumber * 99) +
((guests.valueAsNumber - 1) * 10)">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>
<label>Email address:</label>
<input type="email" id="email_addr" name="email_addr" required>
<label>Repeat email address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" required
oninput="check(this)">
<label>Arrival date:</label>
<input type="date" id="arrival_dt" name="arrival_dt" required>
<label>Number of nights (rooms are $99.00 per night):</label>
<input type="number" id="nights" name="nights" value="1" min="1" max="30" required>
<label>Number of guests (each additional guest adds $10.00 per night):</label>
<input type="number" id="guests" name="guests" value="1" min="1" max="4" required>
<label>Estimated total:</label>
$<output id="total" name="total">99</output>.00
<br><br>
<label>Promo code:</label>
<input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}"
title="Promo codes consist of 6 alphanumeric characters.">
<input type="submit" value="Request Reservation" />
</form>
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
This is the CSS that goes with the form code:
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
-moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
-o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
-ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
box-shadow:0 0 5px rgba(255, 0, 0, .8);
}
:required {
border-color: #88a;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
-o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
-ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}
form {
width:300px;
margin: 20px auto;
}
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
}
input[type=submit] {
background:none;
padding:10px;
}
- Web – программирование
- Глава 2. Проектирование и разработка сайтов……………………………45
- Глава 3. Информационноый обмен в Веб…………………………………..85
- Глава 4. Язык JavaScript…………………………………………………..….176
- Глава 5. Язык серверных скриптов php……………………………………270
- Глава 6. Лабораторные работы…………………………………………...…358
- Введениев Интернет Коротко об истории Интернет
- Как работает Интернет?
- Система адресации в Интернет
- Способы подключения к сети Интернет
- Сервисы Интернет
- Электронная почта
- Передача файлов по ftp
- Всемирная паутина www
- Коротко о компьютерных сетях, входящих в Интернет
- Локальные сети
- Распределенная сеть (wan) и глобальные сети
- Сеть vpn
- Компьютерные игры
- Задания по теме “Введение в Интернет”
- Глава 1. Протоколы Интернет Адресация в компьютерных сетях
- Ip адрес в компьютерных сетях Ethernet и Интернет
- Понятие и краткое описание протоколов
- Соотношение между tcp/ip и osi/iso
- Межсетевой протокол ip
- Транспортный протокол tcp
- Флаги (управляющие биты) Это поле содержит 6 битовых флагов:
- Протокол дэйтаграмм udp
- Ip-маршрутизация
- Протоколы arp и rarp
- Протоколы сетевого уровня
- Протоколы электронной почты
- Протокол smtp
- Протокол pop3
- Протокол imap4
- Спецификация mime
- Проблемы с кодировкой
- Протокол ftp
- Http – Протокол передачи гипертекстов
- Транзакции http
- Клиентские методы http
- Что возвращается обратно: коды ответа сервера
- Заголовки http
- Развитие прикладных протоколов
- Безопасность в сети
- Протокол ssl
- Анонимный обмен ключами
- Обмен ключами при использовании rsa и аутентификация
- Протокол записи (Record Layer)
- Как работает ssl
- Шифрование данных
- Хэширование
- Установление подлинности участников
- Предупреждения системы безопасности web-браузера.
- Реализация ssl
- Задания по теме «Протоколы Интернет»
- Глава 2. Проектирование и разработка сайтов
- Виды сайтов
- Этапы проектирования и разработки сайта
- Модели проектирования
- Спиральная модель
- Microsoft Solutions Framework (msf)
- Управление проектами
- Веб – дизайн и разработка сайтов
- Логическое проектирование дизайна сайта
- Главная страница сайта
- Внутренние страницы сайта
- Краткий обзор основных технологий разработки Веб приложений
- Язык разметки гипертекста html
- Язык xml
- Правильно построенные и действительные документы xml
- Синтаксис xml
- Объявление xml
- Корневой элемент
- Комментарий
- Спецсимволы
- Сильные и слабые стороны
- Отображение xml во Всемирной паутине
- Применение стилей css.
- Применение xsl.
- Словари xml
- Как выглядит xml-документ?
- Правила создания xml- документа
- Конструкции языка
- Элементы данных
- Комментарии
- Атрибуты
- Cпециальные символы.
- Директивы анализатора.
- Adobe Flash и Adobe Flex
- Вставка флэш в страницу
- Язык ActionScript
- Видео-аудио проигрыватели
- Язык программирования клиентских скриптов JavaScript
- Технология «клиент-сервер» cgi
- Программирование для серверов
- Язык программирования Perl
- Язык Java на клиентской и серверной странице
- Сжатие изображений с помощью фракталов
- Глава 3. Информационноый обмен в Веб
- Язык разметки гипертекста html
- ©2012 Romanchik Valery
- Формы html
- Новые элементы html5
- Email Inputs
- Placeholders
- Вопросы и задания
- Задания для выполнения
- Каскадные таблицы стилей css
- Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта: font-family| font-style | font-variant | font-weight| font-size
- Заголовок1 Заголовок2 Заголовок3
- Свойства текста.
- Цвет и фон.
- Некоторые подсказки по синтаксису css:
- 1. Свойства шрифтов.
- 2. Свойства текста.
- 3. Свойства цвета и фона.
- 4. Свойства рамки.
- 5. Свойства списков.
- 6. Свойства изображений.
- Форматирование блока
- Форматирование псевдоклассов и псевдоэлементов
- Единицы измерения в css
- Новое в css3
- Валидация css
- Глава 4. ЯзыкJavaScript Введение
- Включение скриптов JavaScript в html-код
- Создание простых сценариев
- Комментарии. Скрытие сценариев от браузеров
- Отладка скриптов. Ввод и вывод данных
- Описание языка Типы данных
- Преобразование типа
- Специальные числа
- Булев тип
- Переменные типа Undefined и Null
- Массивы
- Операторы и выражения
- Оператор with
- Оператор switch
- Метод eval()
- Функции
- Передача параметров по значению и по ссылке
- Глобальные и локальные переменные
- Модель событий
- Ключевое слово this
- Перехват события.
- Исключения: throw/catch/finally
- Объектная модель
- Пользовательские объекты
- Прототипы
- Хеш-таблицы в JavaScript
- Встроенные объекты String, Array, Date, Math Объект String
- Объект Array
- Объект Number (Число)
- Объект Date (Дата)
- Методы объекта Date
- Объект Function (Функция)
- Свойства:
- Методы :
- Шаблоны и регулярные выражения.
- Объекты браузера
- Объект window
- Методы объекта window
- Свойства окна, передаваемые методу open
- Свойства и методы объекта navigator
- Свойства объекта screen
- Свойства и методы объекта history
- Свойства и методы объекта document
- Коллекции и подчиненные объекты объекта document Обращение к элементам страницы
- Свойства и методы объекта location
- Свойства и методы объекта style
- Объект layer
- Свойства объекта layer
- Методы объекта layer
- Document Object Model (dom)
- Навигация по дереву документа
- Создание новых узлов
- Добавление узлов в документ
- Копирование: метод cloneNode()
- Удаление и замена узлов в документе
- Использование каскадных таблиц стилей в dom
- Свойство элемента innerHtml и outerHtml
- Работа с атрибутами элементов
- Метод removeAttribute()
- JavaScript и ajax
- Модель ajax:
- Запрос к серверу. Класс xmlHttpRequest
- Методы класса xmlHttpRequest
- Свойства класса xmlHttpRequest
- Создание экземпляра объекта xmlHttpRequest
- Использование dom
- Информируйте пользователя
- Если скрипты отключены
- Объект FormData
- Cookies
- Работа с cookie
- Синтаксис http заголовка для поля Cookie
- Дополнительные сведения
- Способы задания значений cookie
- Примеры на JavaScript
- Тестовые вопросы по языку JavaScript
- Упражнения и задачи поJavaScript
- Глава 5. Язык серверных скриптов php
- Возможности php.
- Инструменты для разработки
- Как phPработает
- Типы данных
- Массивы и инициализация массивов
- Операции и выражения
- Операции сравнения
- Логические операции
- Строковые операции
- Операторы управления
- Функции
- Рекурсивные функции
- Аргументы функции
- Область действия и время жизни переменных
- Изменяемые (динамические) переменные
- Внешние библиотечные функции
- Функции для работы с массивами
- Функции для работы со строками. Базовые строковые функции
- Функции для работы с отдельными символами
- Функции форматных преобразований строк
- Преобразование строк и файлов к формату html и наоборот
- Преобразование html в простой текст
- Преобразование строки к верхнему и нижнему регистру
- Установка локальных настроек
- Регулярные выражения
- Perl-совместимые функции рнр для работы с регулярными выражениями
- Функции даты и времени
- Математические функции
- Объектно-ориентированное программирование в php Основные понятия ооп
- Классы и Объекты
- Конструкторы и деструкторы
- Наследование классов и интерфейсов
- Магические методы
- Обработка ошибок
- Ошибки php и журнал error_reporting
- Чтение и запись бинарных файлов
- Работа с каталогами в рнр
- PhPиMySql
- MySql– сервер: бд1; бд2; бд3; бд4;
- Язык запросов sql
- Операция соединения.
- Команды sql для создания баз данных и таблиц
- Phpmyadmin
- Выборка данных из таблиц бд
- Работа с MySql (сохранение данных в базе данных).
- Работа с MySql занесение и получение данных из базы данных
- Некоторые улучшения в организации работы с данными
- Передача данных от клиента к серверу и обратно. Протокол http
- Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Php и различные формы
- Обработка форм
- Более сложные переменные формы
- Глава 6. Лабораторные работы Лабораторная работа №1 (4 часа). Инструменты и средства создания простых сайтов
- Вопросы по теме:
- Лабораторная работа №2 Работа с документами .Doc, .Pdf, .Html(4 часа).
- Лабораторная работа №3. Применение каскадных таблиц стилей css
- Пример 1. Двухколоночный контейнерный макет сайта с применением css.
- Пример 2. Трехколоночный контейнерный макет сайта с применением css.
- Задания для создания сайтов
- Лабораторная работа №4. Применение каскадных таблиц стилей css
- Лабораторная работа №5 по JavaScript(4 часа). Динамика на Веб –странице. Включение скриптов JavaScript в html-код
- 1. Выполнить следующие задания на JavaScript:
- Пример вывода даты и времени на сайте с помощью JavaScript.
- Пример вывода строки в стиле печатной машинки
- Лабораторная работа №6 по JavaScript(4 часа). Проверка правильности заполнения формы на сайте
- Методы объекта window
- Window.Open()
- Window.Close()
- Методы focus() и blur()
- Лабораторная работа №7. Php Задание 1. Массивы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 2. Функции
- Задание 3. Файлы и строки
- Выполнить одно из перечисленных ниже упражнений
- Задание 4. Работа с базами данных Выполнить одно из перечисленных ниже упражнений
- Задание 5. Создание web-объектов Клиентские методы http
- Обработка html-форм
- Передача переменных в скрипт.
- Передача значений переменных по методу get
- Передача данных из клиентской формы на сервер по методу get
- Передача данных из клиентской формы на сервер по методу post
- Список заданий
- Литература
- Приложение 1. Программное обеспечение Adobe Dreamweaver
- Приложение 2. Системы быстрой разработки Веб-приложений и cms
- Администрирование
- Установка модуля
- Создание шаблона в Drupal
- Создание индивидуальных шаблонов
- Движок шаблонирования xTemplate
- Создание нового шаблона
- Основы создания шаблона
- Удаление блока с формой входа на сайт
- Включение блока для отображение популярных статей
- Удаление ссылки "Далее" в отображение статьи
- Drupal: практические примеры
- Часть 1. Введение
- 6 Шагов к тому, чтобы заставить Drupal работать быстрее
- Приложение 3. Основы cgi/Perl
- Типы данных
- Ассоциированные массивы
- Операторы
- Подпрограммы
- Common Gateway Interface
- Приложение 4. Базы данных и язык sql
- Реляционные субд Модель данных в реляционных субд
- Нормализация модели данных
- Язык sql
- Команды sql
- Команды определения структуры данных (DataDefinitionLanguage–ddl)
- Команды манипулирования данными (Data Manipulation Language – dml)
- Команды управления транзакциями (TransactionControlLanguage-tcl)
- Команды управления доступом (DataControlLanguage–dcl)
- Работа с командами sql Извлечение данных, команда select
- Ключевое слово distinct
- Секция from, логическое связывание таблиц
- Секция where
- Секция orderby
- Групповые функции
- Секция group by
- Секция having
- Изменение данных
- Команда insert
- Команда delete
- Команда update
- Определение структуры данных Команда createtable
- Команда altertable
- Курсовая работа №2. Проекты сайтов
- Курсовая работа №3. Технологии разработки Веб – приложений Проекты сайтов
- Перечень заданий