Введение
- Тег input предназначен для создания текстовых полей, кнопок (submit, button, file, text), переключателей (radio) и флажков (checkbox).
- Тег texarea — используется для создания текстового поля для ввода нескольких строк текста.
- Тег select применяется для создания выпадающего списка в котором можно сделать один или множественный выбор.
- Тег label — для подписи к элементам форм.
Примечание*: каждый тег формы имеет атрибут value — в него вносится значение, которое пользователь ввел или выбрал, и именно это значение передается на сервер.
В этом практикуме я продемонстрирую как с помощью CSS и jQuery стилизовать эти элементы. Начнем с самых простых, а как окажется позже вся стилизация очень простая. Приступим.
Для начала создадим обычную форму, самую простую:
<form action="#" method="post"> ... Сюда вводятся теги формы </form>
Первым рассмотри тег Input.
Input type=file
По умолчанию инпут с таким атрибутом добавляет на страницу кнопку обзора для выбора файла и текстовое поле в котором отображается имя загруженного файла. Моя задача сейчас показать Вам как можно стилизовать эту конструкцию.
Итак для стилизации кнопки нужно создать следующую разметку:
<div class="fileload"> <h2>Загрузка файла:</h2> <div class="file-load-block"> <input type="file" value="" id="file" /> <div class="fileLoad"> <input type="text" value="Select file" /> <button>Select file</button> </div> </div> </div>
Которой добавим таких стилей:
/* = File Load */
/* Стили для контейнера */
.file-load-block {
width: 310px;
height: 35px;
overflow: hidden;
position: relative;
}
/* работаем с инпутом который конкретно file */
.file-load-block input {
/* делаем кроссбраузерную прозрачность */
opacity: 0;
filter: alpha(opacity=0);
/* Позиционируем абсолютно отсносительно контейнера по правому краю */
position: absolute;
top: 0;
right: 0;
/*
Задаем высоту и делаем шрифт огромным
для того чтобы кнопка "обзор" занимала все пространство контейнера
*/
height: 35px;
font-size: 600px;
/* Ставим наш инпут поверх всего содержимого */
z-index: 2;
cursor: pointer;
width: auto;
}
/* Стилизируем инпут и кнопку которые под загрузчиком */
.file-load-block input {
z-index: 1;
width: 190px;
padding-right: 10px;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.file-load-block button {
position: absolute;
right: 0;
top: 2px;
width: 90px;
height: 28px;
border: 1px solid #ccc;
background: #fff;
color: #666;
border-radius: 5px;
box-shadow: inset 0 2px 2px #ccc;
}
.file-load-block .button-hover {
box-shadow: 0 0 2px #ccc;
}
Тут я сделал такой финт: стандартный инпут делаем прозрачным и задаем огромный шрифт, чтобы кнопка обзора была достаточно большой и закрывала весь контейнер, позиционируем его абсолютно по правому краю контейнера (потому что курсор-рука появялется тока на кнопке «обзор»).
Под инпутом который вызывает окно загрузки располагаем еще один инпут, который будет отображать имя файла который мы загрузили и кнопку обзор все стили я написал)
Теперь добавим script который будет показывать имя прикрепленного файла и еще напишем хувер для кнопки если загрузчик получил фокус:
// = Load
// отслеживаем изменение инпута file
$('#file').change(function(){
// Если файл прикрепили то заносим значение value в переменную
var fileResult = $(this).val();
// И дальше передаем значение в инпут который под загрузчиком
$(this).parent().find('.fileLoad').find('input').val(fileResult);
});
/* Добавляем новый класс кнопке если инпут файл получил фокус */
$('#file').hover(function(){
$(this).parent().find('button').addClass('button-hover');
}, function(){
$(this).parent().find('button').removeClass('button-hover');
});
Как оказалось ничего сложного.
Дальше займемся кнопкой сброса формы (reset form).
Значение атрибута type: number
Элемент <input> типа number создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. В поле счетчика по умолчанию разрешен прямой ввод с клавиатуры. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step. Синтаксис создания поля для ввода чисел следующий:
Input type=reset
Сброс формы иногда очень-очень нужен, а там как мы добавили стилизацию почти всех элементов форм то двайте разберемся как их сбросить, потому что стандартный reset не сработает (верней сработает но не на всех элементах)
Делаем разметку:
<div class="reset-form"> <h2>Сбрасываем поля формы</h2> <button>Сброс</button> </div>
Пишем скрипт:
//Reset form
// Вешаем событие клика по кнопке сброса
$('.reset-form').click(function() {
// Устанавливаем пустое значение в атрибут value для всех инпутов
$('.customForm').find('input').val('');
// Убираем атрибут checked и класс активности у чекбоксов
$('.customForm').find('input:checked').removeAttr('checked');
$('.customForm').find('.check').removeClass('active');
// Убираем класс активности у радио переключателей
$('.customForm').find('.radio').removeClass('active');
// Устанавливаем пустое значение в атрибут value для всех textarea
$('.customForm').find('textarea').val('');
// И для открывалки селекта возвращаем начальное значение
$('.customForm').find('.slct').html('Выберите Ваше лучшее качество:');
return false
});
И добавим стилей кнопочке сброса:
/* = Reset Form */
.reset-form button {
width: 90px;
height: 28px;
border: 1px solid #ccc;
background: #fff;
color: #666;
border-radius: 5px;
box-shadow: inset 0 2px 2px #ccc;
cursor: pointer;
}
.reset-form button:hover {
box-shadow: 0 0 2px #ccc;
}
.reset-form button:active {
margin-top: 1px;
margin-bottom: -1px;
zoom: 1;
}
Вот опять все просто)
И заключительным этапом будет кнопка отправки формы.
Рассуждения о семантике
Всю HTML-разметку веб-страницы можно сделать с помощью только . Это легко и часто даже как-то работает. По ситуации легко стилизовать и получить результат, который будет выглядеть приемлемо. Но такой способ работы обманчив. Многие вещи не будут работать нормально. В частности, у таких веб-страниц будут серьёзные проблемы с доступностью. Многие функции доступности встроены в HTML и работают «из коробки» при правильном применении HTML-элементов. Но если их использовать не по назначению, например заменить кнопки и метки абстрактными элементами, типа , браузер не получит достаточного представления об их использовании и назначении. Программы чтения с экрана и другие вспомогательные инструменты не смогут правильно интерпретировать эти элементы.
Это плохо не только для доступности, но и для самой HTML-разметки, состоящей из элементов одинакового типа, например, из одних . Поначалу с этим ещё можно справляться, но по мере развития кода, отсутствие семантики в разметке доставит немало проблем с его поддержкой и расширением. Поэтому следует использовать правильные HTML-элементы в правильном контексте, т.е. в соответствии с их назначением. Так можно бесплатно получить много готовых решений и обойтись без изобретения велосипедов.
В случае с текстовыми полями и метками к ним, для обоих есть соответствующие HTML-элементы: и . У HTML-элемента есть атрибут , который позволяет связать метку и текстовое поле . Вот как это выглядит в коде:
Значения атрибута type¶
| Значение | Описание |
|---|---|
| button | Определяет активную кнопку. |
| checkbox | Устанавливают флажки (пользователь может выбрать более одного варианта из предложенных). |
| color | Определяет палитру цветов (пользователь может выбрать значения цветов в шестнадцатеричном формате). |
| date | Задает поле для ввода календарной даты. |
| datetime | Задает поле для ввода даты и времени. |
| datetime-local | Задает поле для ввода даты и времени без часового пояса. |
| Задает поле для ввода адреса электронной почты. | |
| file | Задает элемент управления с кнопкой «Обзор», нажав на которую можно выбрать и загрузить файл. |
| hidden | Определяет скрытое поле ввода. Пользователю оно не видно. |
| image | Указывает, что вместо кнопки для отправки данных на сервер используется изображение. Путь к изображению указывается атрибутом src. Также могут быть использованы атрибут alt для указания альтернативного текста, атрибуты heigh и width для указания высоты и ширины изображения. |
| month | Определяет поле для выбора месяца, после чего данные будут вводиться в виде год-месяц (например: 2018-07). |
| number | Определяет поле для ввода чисел. |
| password | Определяет поле для ввода пароля (вводимые символы отображаются звездочками, точками или другими знаками). |
| radio | Создает радио-кнопки (при выборе одной радио-кнопки все остальные становятся неактивными) |
| range | Создает ползунок для выбора чисел в указанном диапазоне. По умолчанию диапазон — от 0 до 100. Диапазон чисел задается атрибутами min и max. |
| reset | Определяет кнопку для сброса информации. |
| search | Создает текстовое поле для поиска. |
| submit | Создает кнопку отправки данных формы (кнопка”отправить”). |
| text | Создает однострочное текстовое поле. |
| time | Определяет числовое поле для ввода времени в 24-часовом формате (например, 13:45). |
| url | Создает поле для ввода URL. |
| week | Создает поле для выбора недели, после чего данные вводятся в формате год-неделя (например: 2018-W25). |
Как добавить стиль к тегу <input> ?
Цвет текста внутри тега <input>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <input>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <input>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Input
В HTML его выводят вот таким способом:
<input type="text" id="text" name="text" value="some text" />
Обязательным параметром тега input является атрибут type (тип, это может быть текст , кнопка отправки , скрытое поле , переключатель , чекбокс , загрузка файла).
Для стилизации этого тега jQuery не требуется, главное помнить, что браузеры неоднозначно работают с его высотой, поэтому высоту этого элемента стоит подбирать исходя из размера шрифта, который Вы будете использовать и чтобы слова не чёркали по рамке нужно добавлять отступ (padding)
input {
width: 300px;
font-size: 13px;
padding: 6px 0 4px 10px;
border: 1px solid #cecece;
background: #F6F6f6;
border-radius: 8px;
}
Иногда для Internet Explorer 8 нужно увеличить высоту на 1px, чтобы тег соответствовал дизайну, тогда в стилях нужно добавить хак для IE:
input {
padding-bottom: 5px\0;
}
Вот и все тайны связанные с этим тегом. Дальше рассмотри тег для ввода нескольких строк текста textarea.
HTML Reference
HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts
HTML Tags
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Как настроить стрелку для select
Часто, стрелка (индикатор того, что это выпадашка — поле выбора значений) по умолчанию плохо вписывается в дизайн и её лучше заменить на что-нибудь более подходящее. Вот необходимый минимум стилей, с помощью которых можно заменить стрелку у :
Здесь удаляются стили, устанавливаемые браузером, освобождается место для графической стрелки, а затем новая картинка стрелки вставляется в качестве фона. Это должно применяться только в том случае, если обычный и предназначен для выбора одиночного значения, а не нескольких ().
See this code Select с измененной стрелкой on x.xhtml.ru.
Этот пример демонстрирует замену стрелки по умолчанию элементу .
HTML тег
Все элементы тега форм создаются с помощью тега <input>.
Синтаксис <input>
Первое на что стоит обратить внимание, что тег не нужен закрывающий тег. У поля есть два самых важных параметра, которые я вынес в обязательные, это name и type
- name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
-
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
- value=»значение» — указывается значение по умолчанию
Теперь разберем более подробно каждый элемент
Textarea
Данный тег на HTML страницу выводится так:
<textarea></textarea>
по умолчанию у этого тега присутствуют некоторые параметры:
- за правый нижний угол текстовой области можно потянуть мышкой и текстовая область будет увеличиваться
- справа присутствует постоянная прокрутка в браузерах IE
уберем эти мелочи, открываем наш файл стилей и пишем следующие свойства:
textarea {
/* = Убираем скролл */
overflow: auto;
/* = Убираем увеличение */
resize: none;
width: 300px;
height: 50px;
/* = Добавим фон, рамку, отступ*/
background: #f6f6f6;
border: 1px solid #cecece;
border-radius: 8px 0 0 0;
padding: 8px 0 8px 10px;
}
Теперь наше поле для ввода текста имеет привлекательный вид. Следующим этапом стилизируем переключатели radio.
Input type=submit
Как я уже писал выше, тег инпут предназначен не только для полей ввода, переключателей и чекбоксов, с его помощью так же делаются кнопки. Делают их корректным объявлением атрибута type: button или submit, атрибут submit говорит о том что при клике на этот инпут данные из формы будут переданы на сервер. На страничку его добавляют так:
<input type="submit" class="submit" value="Отправить" />
а теперь немножко стилей:
.submit {
cursor: pointer;
border: 1px solid #cecece;
background: #f6f6f6;
box-shadow: inset 0px 20px 20px #ffffff;
border-radius: 8px;
padding: 8px 14px;
width: 120px;
}
.submit:hover {
box-shadow: inset 0px -20px 20px #ffffff;
}
.submit:active {
margin-top: 1px;
margin-bottom: -1px;
zoom: 1;
}
Checkbox
Чекбоксы выводятся на HTML страницу таким же методом как и radio переключатели:
<input type="checkbox" id="checkbox1" /> <input type="checkbox" id="checkbox2" /> <input type="checkbox" id="checkbox3" />
Со стилизацией с помощью одного CSS тут та же история, что и с radio кнопками. Для стилизации чекбоксов нужен немного другой логический подход: выводим столько чекбоксов сколько задано но вместо атрибута checkbox ставим атрибут hidden и перед каждым input’ом добавим div:
<div class="checkboxes"> <div class="check"> jQuery <input type="checkbox" value="jQuery" /> </div> <div class="check"> HTML <input type="checkbox" value="HTML" /> </div> <div class="check"> CSS <input type="checkbox" value="CSS" /> </div> <div class="check"> PHP <input type="checkbox" value="PHP" /> </div> <div class="check"> MySql <input type="checkbox" value="MySql" /> </div> </div>
дальше добавим стилей, для активного и неактивного чекбокса
/* = CheckBox */
/* Стилизируем чекбокс, точнее скрываем его */
.check input {
position: absolute;
left: -10000px;
}
.check {
background-position: 0 3px;
padding-left: 25px;
cursor: pointer;
position: relative;
}
.check.active {
background-position: 0 -27px;
}
теперь очередь jQuery:
// Checkbox
// Отслеживаем событие клика по диву с классом check
$('.checkboxes').find('.check').click(function(){
// Пишем условие: если вложенный в див чекбокс отмечен
if( $(this).find('input').is(':checked') ) {
// то снимаем активность с дива
$(this).removeClass('active');
// и удаляем атрибут checked (делаем чекбокс не отмеченным)
$(this).find('input').removeAttr('checked');
// если же чекбокс не отмечен, то
} else {
// добавляем класс активности диву
$(this).addClass('active');
// добавляем атрибут checked чекбоксу
$(this).find('input').attr('checked', true);
}
});
А теперь займемся селектами:
Radio Button
На HTML странице радио переключатели выводятся так:
<input type="radio" id="radio1" /> <input type="radio" id="radio2" /> <input type="radio" id="radio3" />
К сожалению, стилизации с помощью CSS эти волшебные переключатели не поддаются, но есть jQuery и все будет круто. Суть моего метода очень простая: вместо тегов input я буду писать столько тегов div сколько предполагалось переключателей, плюс в них буду вносить текст с заданными значениями и будет всего лишь один скрытый input, в который будет заносится текстовое значение с нажатого div’a. теперь давайте реализуем эту идею.
Для начала создадим HTML разметку:
Выберите Ваше лучшее качество: <div class="radioblock"> <div class="radio">Красивый(ая)</div> <div class="radio">Умный(ая)</div> <div class="radio">Коммуникабульный(ая)</div> <div class="radio">Скромный(ая)</div> <div class="clear"></div> <input type="hidden" /> </div>
Теперь стили. Каждый div будет иметь фоновую картинку пустого переключателя (именно ее Вы сможете поменять на свою любимую или ту что Вам нарисует дизайнер), а если по div’у произошло событие клика то ему еще добавится класс active и сменится фоновое изображение на включенный переключатель
.radio {
display: block;
height: 25px;
background-position: 0 -56px;
coloR: #444;
cursor: pointer;
text-indent: 22px;
font-size: 13px;
}
.radio.active {
background-position: 0 -86px;
}
Да забыл сказать что для стилизации переключателей, чекбоксов и селектов я буду использовать спрайт с фоновыми изображениями (он будет в исходниках, как и сам файл стилей).
Наконец-то дошла очередь до jQuery (:
// RadioButton
$('.radioblock').find('.radio').each(function(){
$(this).click(function(){
// Заносим текст из нажатого дива в переменную
var valueRadio = $(this).html();
// Находим любой активный переключатель и убираем активность
$(this).parent().find('.radio').removeClass('active');
// Нажатому диву добавляем активность
$(this).addClass('active');
// Заносим значение объявленной переменной в атрибут скрытого инпута
$(this).parent().find('input').val(valueRadio);
});
});
Если посмотреть работу данного скрипта через firebug для Firefox или через средства разработки Google Chrome, то картина будет более наглядной.
Давайте займемся теперь стилизацией чекбоксов.
Select
На HTML страничку селекты выводятся так:
<select> <option value="">Укажите возраст</option> <option value="0 - 12 месяцев">0 - 12 месяцев</option> <option value="1 - 3 года">1 - 3 года</option> <option value="3 - 5 лет">3 - 5 лет</option> <option value="Больше 5 лет">Больше 5 лет</option> </select>
Реально кучу плагинов jQuery для их стилизации, но мой метод я считаю самый правильный, суть его такая же как и в случае с radio кнопками, только здесь вместо дивов будет использоваться список, который выпадает по клику на ссылку, а потом при клике на ссылку из выпадающего списка ее текстовое значение будет заносится в скрытый инпут и в первую ссылку по которой кликнули. Все очень просто)))
HTML рзаметка выглядит следующим образом:
<div class="select"> <a href="javascript:void(0);" class="slct">Выберите Ваше лучшее качество:</a> <ul class="drop"> <li><a href="">Красивый(ая)</a></li> <li><a href="">Умный(ая)</a></li> <li><a href="">Коммуникабульный(ая)</a></li> <li><a href="">Скромный(ая)</a></li> </ul> <input type="hidden" id="select" /> </div>
Теперь добавим стилей для всего этого дела
/* = Select */
.slct {
display: block;
border-radius: 5px;
border: 1px solid #cecece;
background-color: #F6F6f6;
width: 285px;
padding: 4px 15px 4px 10px;
color: #444;
background-position: 290px -145px;
/*
Супер финт обрезаем текст
чтобы не вылезал за рамку
*/
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.slct.active {
border-radius: 5px 5px 0 0;
border-bottom: none;
}
.drop {
margin: 0;
padding: 0;
width: 310px;
border: 1px solid #cecece;
border-top: none;
display: none;
position: absolute;
background: #fff;
}
.drop li {
list-style: none;
border-top: 1px dotted #e8e8e8;
cursor: pointer;
display: block;
color: #444;
padding: 4px 15px 4px 25px;
background-position: 10px -119px;
}
.drop li:hover {
background-color: #e8e8e8;
color: #222;
}
ну и без jQuery опять никуда:
// Select
$('.slct').click(function(){
/* Заносим выпадающий список в переменную */
var dropBlock = $(this).parent().find('.drop');
/* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/
if( dropBlock.is(':hidden') ) {
dropBlock.slideDown();
/* Выделяем ссылку открывающую select */
$(this).addClass('active');
/* Работаем с событием клика по элементам выпадающего списка */
$('.drop').find('li').click(function(){
/* Заносим в переменную HTML код элемента
списка по которому кликнули */
var selectResult = $(this).html();
/* Находим наш скрытый инпут и передаем в него
значение из переменной selectResult */
$(this).parent().parent().find('input').val(selectResult);
/* Передаем значение переменной selectResult в ссылку которая
открывает наш выпадающий список и удаляем активность */
$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
/* Скрываем выпадающий блок */
dropBlock.slideUp();
});
/* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */
} else {
$(this).removeClass('active');
dropBlock.slideUp();
}
/* Предотвращаем обычное поведение ссылки при клике */
return false;
});
Дальше займемся кнопками загрузить изображение и кнопкой отправкой формы.
Attributes
| Attribute | Value | Description |
|---|---|---|
| accept |
file_extension audio/* video/* image/*media_type |
Specifies a filter for what file types the user can pick from the file input dialog box (only for type=»file») |
| alt | text | Specifies an alternate text for images (only for type=»image») |
| autocomplete | on off |
Specifies whether an <input> element should have autocomplete enabled |
| autofocus | autofocus | Specifies that an <input> element should automatically get focus when the page loads |
| checked | checked | Specifies that an <input> element should be pre-selected when the page loads (for type=»checkbox» or type=»radio») |
| dirname | inputname.dir | Specifies that the text direction will be submitted |
| disabled | disabled | Specifies that an <input> element should be disabled |
| form | form_id | Specifies the form the <input> element belongs to |
| formaction | URL | Specifies the URL of the file that will process the input control when the form is submitted (for type=»submit» and type=»image») |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how the form-data should be encoded when submitting it to the server (for type=»submit» and type=»image») |
| formmethod | getpost | Defines the HTTP method for sending data to the action URL (for type=»submit» and type=»image») |
| formnovalidate | formnovalidate | Defines that form elements should not be validated when submitted |
| formtarget | _blank _self _parent _topframename |
Specifies where to display the response that is received after submitting the form (for type=»submit» and type=»image») |
| height | pixels | Specifies the height of an <input> element (only for type=»image») |
| list | datalist_id | Refers to a <datalist> element that contains pre-defined options for an <input> element |
| max | number date |
Specifies the maximum value for an <input> element |
| maxlength | number | Specifies the maximum number of characters allowed in an <input> element |
| min | number date |
Specifies a minimum value for an <input> element |
| minlength | number | Specifies the minimum number of characters required in an <input> element |
| multiple | multiple | Specifies that a user can enter more than one value in an <input> element |
| name | text | Specifies the name of an <input> element |
| pattern | regexp | Specifies a regular expression that an <input> element’s value is checked against |
| placeholder | text | Specifies a short hint that describes the expected value of an <input> element |
| readonly | readonly | Specifies that an input field is read-only |
| required | required | Specifies that an input field must be filled out before submitting the form |
| size | number | Specifies the width, in characters, of an <input> element |
| src | URL | Specifies the URL of the image to use as a submit button (only for type=»image») |
| step | numberany | Specifies the interval between legal numbers in an input field |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Specifies the type <input> element to display |
| value | text | Specifies the value of an <input> element |
| width | pixels | Specifies the width of an <input> element (only for type=»image») |
Значение атрибута type: tel
Элемент <input> типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Несмотря на то, что телефонный номер представляет из себя числовой формат вводимых данных, в браузерах поле типа tel ведет себя как обычное текстовое поле ввода. Однако, применение типа поля ввода tel приводит к появлению на экранах мобильных устройств специальной клавиатуры, предназначенной для облегчения ввода информации. Синтаксис поля ввода номера телефона:
- Результат
- HTML-код
- Попробуй сам » /
Телефон:
Значение
Описание
button
Создает кнопку с произвольным действием, действие по умолчанию не определено:
checkbox
Создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вариантов:Я знаю HTML
color
Генерирует палитры цветов обеспечивая пользователям возможность выбирать значения цветов в шестнадцатеричном формате RGB:
date
Позволяет вводить дату в формате дд.мм.гггг.:
День рождения:
datetime-local
Позволяет вводить дату и время, разделенные прописной английской буквой по шаблону дд.мм.гггг чч:мм:
Дата встречи — день и время:
Браузеры, поддерживающие язык HTML5, проверят, соответствует ли введенный посетителем адрес электронной почты принятому стандарту для данного типа адресов:
E-mail:
file
Позволяет загружать файлы с компьютера пользователя:
Выберите файл:
hidden
Создает скрытый элемент, не отображаемый пользователю. Информация,
хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером.
image
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit:
month
Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм:
number
Создает поле, в которое пользователь может вводить только числовое значение. Для типа ввода number браузер предоставляет виджет счетчика, который представляет собой поле, справа от которого находятся две кнопки со стрелками — для увеличения и уменьшения числового значения. Для указания минимальных и максимальных допустимых значений ввода предназначены атрибуты min и max, а также можно установить шаг приращения с помощью атрибута step:
Укажите число (от 1 до 10):
password
Текстовое поле для ввода пароля, в котором все вводимые символы заменяются звездочкой либо другим, установленным браузером значком:
Введите пароль:
radio
Создает элемент-переключатель в виде небольшого кружка (иногда их называют радио-кнопками):
Радио-кнопки:
range
Создает такой элемент интерфейса, как ползунковый регулятор. Ползунок предназначен только для выбора числовых значений в некоем диапазоне, при этом для пользователя не все браузеры отображают текущее числовое значение:
reset
Создает кнопку, которая очищает поля формы от введенных пользователем данных:
search
Создает поле поиска, по умолчанию поле ввода имеет прямоугольную форму:
Поиск:
submit
Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее на сервер обработчику:
text
Создает однострочное поле ввода текста:
time
Допускает ввод значений в 24-часовом формате, например 17:30. Браузеры отображают его как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускают ввод только значений времени:
Выберите время:
url
Заставляет браузер проверять, правильно ли пользователь ввел URL-адрес. Некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран, при попытке отправить форму с некорректными значениями URL-адреса:
Главная страница:
week
Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:
Продолжение настройки select
Стоит обратить внимание, что интервалы у текста не очень хороши. Потенциально можно сделать их более привлекательными, удобными и доступными для пользователей с помощью всего нескольких дополнительных стилей
Например, можно настроить и . Эти два свойства расширяют базовые стили, описанные выше, чтобы сделать текстовые поля более удобными.
Изменение значений CSS-свойств для рамки поля сопряжено с риском. Согласно WCAG (), если для элемента формы не вносить изменений в стили по умолчанию, то это никак не повлияет на контрастность. Тем не менее, с помощью будет установлена толщина рамки на основе размера шрифта. Теперь рамка поля выбора будет масштабироваться вместе с текстом. Заодно она становится толще, чем используется по умолчанию в большинстве браузеров.
Здесь умышленно не установлен цвет рамки, чтобы позволить браузеру сделать это самостоятельно. Конечно, если фон страницы не белый, можно изменить цвет рамки.
Трогать для не обязательно. Однако, содержимое поля будет немного легче читать и использовать, если немного его настроить. Это поможет сделать отступы в ближе к аналогичным в и , если их тоже предстоит настраивать.
Заключение
Пример стилизованного в разных состояниях с сохранением WCAG-доступности.
See this code Select Menus on x.xhtml.ru.
Когда речь идет о стилизации полей формы, нужно обратить внимание на минимальный набор стилей, который понадобится, чтобы обеспечить соответствие общему дизайну и поддержку состояний, которые перечислены выше. Похожие публикации, посвященные стилизации HTML-элемента : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания
Может быть эти варианты даже лучше соответствуют вашим целям и требованиям
Похожие публикации, посвященные стилизации HTML-элемента : Select Like It’s 2019 и Custom Select Styles with Pure CSS немного отличаются подходами, но заслуживают не меньшего внимания. Может быть эти варианты даже лучше соответствуют вашим целям и требованиям.
