Html input attributes
Содержание:
- Input Type Reset
- Атрибуты
- Select
- HTML Ссылки
- HTML Теги
- IE10-, событие propertychange
- Input Type Submit — Тип ввода Отправить
- Значение атрибута type: tel
- Тип ввода «reset»
- Input type=file
- Tel
- Colors
- Input Form
- Hoverable inputs
- Animated Inputs
- Select Options
- Form Elements in a Grid
- Grid with Labels
- HTML Tags
- Тип ввода «submit»
- Radio Button
- Ограничения на ввод
- #1. Осветление фона
- Значения атрибута type¶
- Как добавить стиль к тегу <input> ?
- HTML Tutorial
- Событие change
- Input type=submit
- Input
Input Type Reset
defines a reset button
that will reset all form values to their default values:
Example
<form action=»/action_page.php»> <label for=»fname»>First
name:</label><br> <input type=»text» id=»fname» name=»fname»
value=»John»><br> <label for=»lname»>Last name:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br>
<input type=»submit» value=»Submit»> <input type=»reset»></form>
This is how the HTML code above will be displayed in a browser:
If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept |
file_extension audio/* video/* image/*media_type |
Задает фильтр для типов файлов, которые пользователь может выбрать в диалоговом окне ввода файла (только для type=»file») |
| alt | text | Задает альтернативный текст для изображений (только для type=»image») |
| autocomplete | on off |
Указывает, должен ли элемент <input> иметь функцию автозаполнения |
| autofocus | autofocus | Указывает, что элемент <input> должен автоматически получать Фокус при загрузке страницы |
| checked | checked | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» или type=»radio») |
| dirname | inputname.dir | Указывает, что текстовое направление будет отправлено |
| disabled | disabled | Указывает, что элемент <input> должен быть отключен |
| form | form_id | Указывает форму, к которой принадлежит элемент <input> |
| formaction | URL | Указывает URL файла, который будет обрабатывать входной элемент управления при отправке формы (для type=»submit» и type=»image») |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Указывает, как данные формы должны быть закодированы при отправке их на сервер (для type=»submit» и type=»image») |
| formmethod | getpost | Определяет метод HTTP для отправки данных на URL действия (для type=»submit» и type=»image») |
| formnovalidate | formnovalidate | Определяет, что элементы формы не должны проверяться при отправке |
| formtarget | _blank _self _parent _topframename |
Указывает, где будет отображаться ответ, полученный после отправки формы (для type=»submit» и type=»image») |
| height | pixels | Задает высоту элемента <input> (только для type=»image») |
| list | datalist_id | Относится к элементу <datalist>, содержащий предварительно определенные параметры для элемента <input> |
| max | number date |
Задает максимальное значение для элемента <input> |
| maxlength | number | Задает максимальное количество символов, разрешенных в элементе <input> |
| min | number date |
Задает минимальное значение для элемента <input> |
| minlength | number | Задает минимальное количество символов, требуемых в элементе <input> |
| multiple | multiple | Указывает, что пользователь может ввести более одного значения в элемент <input> |
| name | text | Задает имя элемента <input> |
| pattern | regexp | Указывает регулярное выражение, по которому проверяется значение элемента <input> |
| placeholder | text | Задает короткую подсказку, описывающую ожидаемое значение элемента <input> |
| readonly | readonly | Указывает, что поле ввода доступно только для чтения |
| required | required | Указывает, что перед отправкой формы необходимо заполнить поле ввода |
| size | number | Задает ширину элемента <input> в символах |
| src | URL | Указывает URL изображения, которое будет использоваться в качестве кнопки отправки (только для type=»image») |
| step | numberany | Задает интервал между юридическими числами в поле ввода |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
Указывает тип элемента <input> для отображения |
| value | text | Задает значение элемента <input> |
| width | pixels | Задает ширину элемента <input> (только для type=»image») |
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;
});
Дальше займемся кнопками загрузить изображение и кнопкой отправкой формы.
HTML Ссылки
HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши
HTML Теги
<!—>
<!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>
<menu>
<menuitem>
<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>
IE10-, событие propertychange
Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования – исправление недочётов обработки событий в старых IE.
Если поставить его на в IE8-, то получится «правильное» событие :
Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо .
К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания + недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.
Input Type Submit — Тип ввода Отправить
определяет кнопку для отправки данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы указывается в атрибуте :
Пример
<form action=»/action_page.html»> First name:<br> <input type=»text»
name=»firstname» value=»Mickey»><br> Last name:<br> <input
type=»text» name=»lastname» value=»Mouse»><br><br> <input type=»submit»
value=»Submit»></form>
Вот как HTML-код выше будет отображаться в браузере:
Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по умолчанию:
Пример
<form action=»/action_page.html»> First name:<br> <input type=»text»
name=»firstname» value=»Mickey»><br> Last name:<br> <input
type=»text» name=»lastname»
value=»Mouse»><br><br> <input type=»submit»></form>
Значение атрибута 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
Позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг:
Выберите неделю:
Тип ввода «reset»
определяет кнопку сброса это приведет к сбросу всех значений формы к их значениям по умолчанию:
Пример
<form action=»/action_page.php»> <label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname»
value=»Андрей»><br> <label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit» value=»Отправить»> <input type=»reset»></form>
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы измените входные значения и затем нажмете кнопку «Сброс», то данные формы будут сброшены до значений по умолчанию.
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).
Tel
Ввод телефонного номера с использованием стандартной буквенно-цифровой клавиатуры может быть затруднительным. Тут каждая числовая кнопка на телефонной клавиатуре (кроме 1 и 0) содержит три буквы (например, 2 представляет A, B и C), которые отображаются рядом с номером. Буквенно-цифровая клавиатура не ссылается на эти буквы, поэтому расшифровка телефонного номера в некоторых странах, содержащего буквы (например, 1-800-COLLECT), требует больших усилий.
Значение tel в Chrome Android (слева) и iOS 12.2 (справа)
При использовании с установленным значением , будет доступна стандартная телефонная клавиатура, включающая клавиши для цифр от 0 до 9, знак решетки () и символ звездочки (). Кроме того, будут доступны буквенные мнемонические метки ().
Colors
Feel free to use your favorite styles and colors:
Input Form
Example
<div class=»w3-container w3-teal»> <h2>Input Form</h2></div><form class=»w3-container»> <label class=»w3-text-teal»><b>First Name</b></label>
<input class=»w3-input w3-border w3-light-grey» type=»text»> <label class=»w3-text-teal»><b>Last Name</b></label>
<input class=»w3-input w3-border w3-light-grey» type=»text»> <button class=»w3-btn w3-blue-grey»>Register</button></form>
Hoverable inputs
The w3-hover-color classes adds a background color to the input field on mouse-over:
Example
<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>
Animated Inputs
The w3-animate-input class transforms the width of an input field to 100% when it gets focus:
Example
<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>
Example
<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>
Example
<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>
Select Options
Example
<select class=»w3-select» name=»option»> <option value=»» disabled
selected>Choose your option</option> <option value=»1″>Option
1</option> <option value=»2″>Option 2</option> <option
value=»3″>Option 3</option></select>
Example
<select class=»w3-select w3-border» name=»option»>
Form Elements in a Grid
In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.
Example
<div class=»w3-row-padding»> <div class=»w3-third»>
<input class=»w3-input w3-border» type=»text» placeholder=»One»>
</div> <div class=»w3-third»> <input
class=»w3-input w3-border» type=»text» placeholder=»Two»> </div>
<div class=»w3-third»> <input class=»w3-input
w3-border» type=»text» placeholder=»Three»> </div></div>
Grid with Labels
Example
<div class=»w3-row-padding»> <div class=»w3-half»>
<label>First Name</label> <input
class=»w3-input w3-border» type=»text» placeholder=»Two»> </div>
<div class=»w3-half»> <label>Last
Name</label> <input class=»w3-input
w3-border» type=»text» placeholder=»Three»> </div></div>
❮ Previous
Next ❯
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>
Тип ввода «submit»
определяет кнопку для предоставление данных формы в обработчик форм.
Обработчик форм обычно представляет собой серверную страницу со скриптом для обработки входных данных.
Обработчик формы задается в окне формы атрибут :
Пример
<form action=»/action_page.php»>
<label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname» value=»Андрей»><br>
<label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit» value=»Отправить»></form>
Именно так приведенный выше HTML код будет отображаться в браузере:
Если вы опустите атрибут кнопки , то кнопка получит текст по умолчанию:
Пример
<form action=»/action_page.php»> <label for=»fname»>Имя:</label><br>
<input type=»text» id=»fname» name=»fname»
value=»Андрей»><br> <label for=»lname»>Фамилия:</label><br>
<input type=»text» id=»lname» name=»lname» value=»Щипунов»><br><br>
<input type=»submit»></form>
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, то картина будет более наглядной.
Давайте займемся теперь стилизацией чекбоксов.
Ограничения на ввод
Список некоторых общих ограничений ввода:
| Атрибут | Описание |
|---|---|
| checked | Указывает, что поле ввода должно быть предварительно выбрано при загрузке страницы (для type=»checkbox» или type=»radio») |
| disabled | Указывает, что поле ввода должно быть отключено |
| max | Определяет максимальное значение для поля ввода |
| maxlength | Определяет максимальное количество символов для поля ввода |
| min | Определяет минимальное значение для поля ввода |
| pattern | Определяет регулярное выражение для проверки входного значения |
| readonly | Указывает, что поле ввода доступно только для чтения (не может быть изменено) |
| required | Указывает, что поле ввода является обязательным (должно быть заполнено) |
| size | Определяет ширину (в символах) поля ввода |
| step | Определяет допустимые интервалы номеров для поля ввода |
| value | Определяет значение по умолчанию для поля ввода |
Вы узнаете больше об ограничениях ввода в следующей главе.
В следующем примере показано числовое поле ввода, в котором вы можете ввести значение от 0 до 100 с шагом 10. Значение по умолчанию — 30:
#1. Осветление фона
Первый пример, который мы собираемся решить, это изменение фона ввода поиска при зависании. Мы будем добавлять переход, чтобы изменение не было резким.
CSS
Чтобы назначить стиль, нам нужно определить стиль CSS самого окна поиска. Давайте добавим все правила CSS один за другим, чтобы вы точно знали, что происходит.
Сначала оформим класс контейнера
Наиболее важное свойство, возможно, . Это специально, чтобы значок можно было поместить поверх ввода, как вы увидите
Input
Затем мы назначим стиль input. Все вышеизложенное является украшательством, поскольку радиус границы или цвет фона не влияют на функциональность input
Обратите внимание на свойства левого отступа. Это, чтобы освободить место для значка, чтобы он не находился буквально над текстом внутри input
Ниже у нас четыре различных правила для цвета заполнителя текста нашего примера Search. К сожалению, правила должны быть отдельными для отдельных префиксов поставщиков и не могут быть объединены в сокращенное письменное правило. Это немного раздражает и будет повторяться в каждом примере!
Icon
Наконец, стиль иконки. Главное, чтобы она оказалась поверх ввода, поэтому назначаем ей . Поля помогают расположить значок в верхней позиции на .
Добавление эффектов Hover
Следующий набор правил определяет то, что происходит с полем поиска при наведении. В этом примере мы хотим изменить цвет фона. Чтобы избавиться от жёлтого или синего свечения вокруг входа (который иногда добавляют браузеры), установите .
В приведённом выше фрагменте мы добавили два дополнительных состояния — и . Таким образом, эффект не исчезает при задержке на input
Что ещё более важно, эффект проявляется также при input
Создание перехода
Чтобы осуществить переход, нам необходимо добавить несколько строк кода. Вернемся назад к правилу, в котором мы определили стиль ввода . Перед закрывающими скобками добавьте следующий фрагмент:
Мы определяем сокращение свойства перехода, но можем и определить эти три параметра индивидуально. Во-первых, мы говорим, что переход должен влиять только на свойство фона. Далее мы говорим, что переход займёт чуть больше половины секунды. Наконец, мы определяем смягчение эффекта перехода. не единственный эффект, который мог бы работать здесь, мы могли бы использовать или , например. Это выглядело бы немного иначе. Попробуйте, чтобы увидеть, что вам больше нравится.
Стиль input теперь должен выглядеть, как код ниже.
Как работают переходы CSS?
Если вы ничего не знаете о CSS transitions, позвольте мне дать вам краткий обзор. Во-первых, для перехода свойство должно быть определено в состоянии default, а не при hover, или active или focus.
Переходы CSS позволяют постепенно изменять эффект и определить параметры контроля, такие как свойство, продолжительность перехода и вид перехода. Вы можете установить несколько переходов для одного элемента. Главное, вы всегда должны включать префиксы поставщиков для различных браузеров, поскольку поддержка этого свойства еще не является универсальной.
За дополнительной информацией обращайтесь: CSS3 Transitions And Transforms From Scratch
Значения атрибута 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 Tutorial
HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL
HTML CSSHTML Links
Links
Link Colors
Link Bookmarks
HTML Images
Images
Image Map
Background Images
The Picture Element
HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists
HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML
Событие change
Событие происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.
Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие .
Для остальных же элементов: , оно срабатывает сразу при выборе значения.
Поздний в IE8-
В IE8- при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
Для того, чтобы видеть изменения тут же – в IE8- нужно повесить обработчик на событие (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием , описанным далее.
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;
}
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.
