![]() Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву ![]() Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Поля для ввода url, email, телефона
Для определение данных полей устанавливается тип тега input соответственно url, email и tel. Для их настройки используют те же атрибуты, что и обычного текстового поля.
Поля для ввода email, url, телефона для проверки ввода используют соответствующие шаблоны и если мы введем некорректное значение и попробуем отправить форму, то браузер отобразит сообщение о некорректном формате: Элементы для ввода даты и времени Для работы с датами и временем в html5 предназначено несколько типов элементов input: datetime - local – устанавливает дату и время; date – устанавливает дату; month – устанавливает текущий месяц и год; time – устанавливает время; week – устанавливает текущую неделю. <form> <label for="firstname">Имя: </label> <input type="text" id="firstname" name="firstname"/> <p> <label for="date">Дата рождения: </label> <input type="date" id="date" name="date"/> </p> <p> <button type="submit">Отправить</button> </p> </form> Отправка файлов За выбор файлов отвечает элемент input с атрибутом type =” file ”: <form enctype="multipart/form-data" method="post" action="http://localhost:8080/postfile.php"> <p> <input type="file" name="file" /> </p> <p> <input type="submit" value="Отправить" /> </p> </form> При нажатии на кнопку Выберите файл, открывается диалоговое окно для выбора файла, а после выбора, рядом с кнопкой отображается имя выбранного файла. Для отправки файла на сервер, форма должна иметь атрибут enctype =” multipart / form - date ”. С помощью ряда атрибутов можно дополнительно настроить элементы выбора файла: accept – устанавливает тип файлов, которые допустимы для выбора; multiple – позволяет выбирать множество файлов (при зажатии клавиши ctrl или shift); required – требует обязательной установки файла. Список Элемент select создает список. В зависимости от настроек это может быть выпадающий список для выбора одного элемента, либо раскрытый список, в котором можно выбрать сразу несколько элементов. Выпадающий список: <form method="get"> <p> <label for="phone">Выберите модель:</label> <select id="phone" name="phone"> <option value="iphone 6s">iPhone 6S</option> <option value="lumia 950">Lumia 950</option> <option value="nexus 5x">Nexus 5X</option> <option value="galaxy s7">Galaxy S7</option> </select>
</p> <p> <input type="submit" value="Отправить" /> </p> </form> Внутри элемента select помещаются элементы option – элементы списка, который содержит атрибут value для хранения значения элемента. Для создания списка с множественным выбором к элементу select добавляется атрибут muitiple. Зажав клавишу ctrl можно выбрать несколько элементов. Select позволяет группировать элементы с помощью тега < optgroup >. <form method="get"> <p> <label for="phone">Выберите модель:</label> <select id="phone" name="phone"> <optgroup label="Apple"> <option value="iphone 6s">iPhone 6S</option> <option value="iphone 6s plus">iPhone 6S Plus</option> <option value="iphone 5se">iPhone 5SE</option> </optgroup> <optgroup label="Microsoft"> <option value="lumia 950">Lumia 950</option> <option value="lumia 950 xl">Lumia 950 XL</option> <option value="lumia 650">Lumia 650</option> </optgroup> </select> </p> <p> <input type="submit" value="Отправить" /> </p> </form> Текстовое поле Парный тег textarea позволяет создавать многострочные поля. С помощью атрибутов cols – ширина текстового поля (измеряется в пикселях) и rows – высота текстового поля (в строках), можно настроить элемент textarea: <form method="get"> <p> <label for="comment">Ваш комментарий:</label><br/> <textarea id="comment" name="comment" placeholder="Написать комментарий" cols="30" rows="7"></textarea> </p> <p> <input type="submit" value="Добавить" /> </p> </form> Элементы fieldset и legend Для группировки элементов формы часто применяется элемент fieldset, который создает границу вокруг вложенных элементов. Элемент legeng – устанавливает заголовок для группы элементов: <form> <fieldset> <legend>Введите данные:</legend> <label for="login">Логин:</label><br> <input type="text" name="login" id="login" /><br> <label for="password">Пароль:</label><br> <input type="password" name="password" id="password" /><br> <input type="submit" value="Авторизация"> </fieldset> </form> Валидация форм Нередко пользователь в форму вводит некорректные значения: вместо чисел – букву или наоборот. Для предупреждения и проверки некорректного ввода в html5 существует механизм валидации. Для создания валидации у элементов формы используется ряд атрибутов:
required – требует обязательного ввода значения, практически для всех элементов формы; min и max – максимальное и минимальное допустимое значение; pattern – задает шаблон, которому должны соответствовать вводимые данные.
|
||||||
Последнее изменение этой страницы: 2021-04-05; просмотров: 238; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.237.154 (0.011 с.) |