ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Фильтры форм

Фильтры форм

Доминирующая роль форм, которые в наши дни используются практически на всех веб сайтах, побудила к созданию ряда фильтров для работы с ними.

У на уже создана форма, поэтому мы будем в дальнейшем использовать ее.

Нет кода
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Тестирование jQuery</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input name="name" type="text" /><br>
<label for="password">Пароль</label><br>
<input name="password" type="password" /><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br><br>
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Поиск соответствующий типу элемента формы

Наиболее распространенные, специфические для формы фильтры просто находят элементы управления определенного типа, присутствующие в форме. Доступны следующие фильтры: :button, :checkbox, :input, :password, :radio, :submit, :text.

Чтобы выбрать все переключатели, будем использовать следующую команду:

$("input:radio");

Результат будет таким.

Поиск соответствующий типу элемента формы

Эти фильтры особенно полезны ввиду того, что все доступные типы представляют собой элементы ввода, нахождение которых без использования указанных фильтров было бы немного труднее выполнить.

Выбор включенных и отключенных элементов формы

Имеются также фильтры :enabled и :disabled>, с помощью которых можно отбирать элементы, находящиеся соответственно во включенном или лтключенном состоянии. Чтобы выбрать отключенные элементы формы, используете следующий код:

$(":disabled");

Результат будет таким.

Выбор включенных и отключенных элементов формы

Флажок Сохранить мои учетные данные на этом компьютере в нашей форме отключен и поэтому был возвращен фильтром :disabled.

Выбор отмеченных или выделенных элементов формы

Флажки и переключатели имеют состояние checked?, а списки - состояние selected. Предусмотрены фильтры, с помощью которых можно отбирать элементы, находящиеся в одном из этих состояний, используя соответствующий синтаксис :checked и :selected.

Чтобы выбрать включенный переключатель в нашем примере, выполним следующую команду:

$(":checked");

Будут возвращен переключатель, который в настоящее время включен.

Выбор отмеченных или выделенных элементов формы

Таблица .Библиотека jQuery располагает целым рядом селекторов, облегчающих работу с конкретными типами элементов форм
Селектор Пример Описание
:input $(":input"); Выделяет все элементы типа input, textarea, select и button, т.е. все элементы формы
:text $(":text"); Выбирает все текстовые поля
:password $(":password"); Выбирает все поля ввода пароля
:radio $(":radio"); Выбирает все переключатели
:checkbox $("checkbox"); Выбирает все флажки
:submit $(":submit"); Выбирает все кнопки подтверждения (отправки)
:image $(":image"); Выбирает все кнопки-рисунки
:reset $(":reset"); Выбирает все кнопки сброса
:button $(":button"); Выбирает все кнопки
:file $(":file"); Выбирает все поля файла(применяется для выгрузки файлов на сайт)
:hidden $(":hidden"): Выбирает все скрытые элементы

Мы можем комбинировать селекторы формы с другими селекторами. Например, если на странице есть две формы и вы хотите выбрать текстовые поля только одной из них.