Рейтинг со звездочками на CSS
Два варианта рейтинга со звездочками по 5-ти и 10-ти бальной шкале
Для удобства работы с рейтингом звездочки сделаны на radio кнопках с использованием SVG-иконок и на чистом CSS.
Запоминание данных формы
Запоминание введенных данных в элементах формы
Небольшой JS код для запоминания введенных в форму данных, которые сохраняются в локальное веб-хранилище localStorage
Скрипт состоит из 2-х функций, одна из которых записывает данные, а другая считывает. Вызываться они могут при любом нужном событии, в примере это нажатие на кнопку "Запомнить".
Еще в теме представлен альтернативный вариант на jQuery с плагином garlic.js
Автозаполнение для поля input
jQuery плагин Autocomplete для автозаполнения текстовых полей input
Быстрый и легкий jQuery плагин для автозаполнения текстовых input полей формы. Он автоматически предлагает сопоставление введенных в текстовое поле ключевых слов с данными из массива, что позволяет пользователям быстро находить нужные значения.
Сдвигающийся плейсхолдер
Замена атрибута placeholder тегом label и последующая манипуляция им
Данное решение выполнено через псевдокласс :placeholder-shown, который отображает текст подсказки, заданной атрибутом placeholder.
Плюс и минус для поля input
Создание и оформление кнопок плюс и минус для поля <input>
Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.
Также в этой теме есть несколько вариантов оформления этих кнопок.
Радиокнопки — карточки
Оформление переключателей radio в виде карточек для тарифов или другой информации
Ранее уже был похожий пример в теме "Радиокнопки с иконками". Этот отличается немного другой реализацией, оформлением и предназначением.
Показ определенных блоков при изменении формы
Вывод заданных блоков при изменении элементов формы radio, checkbox и select
Частенько при изменении элементов формы, нужно показать другие ее элементы или вывести текстовую информацию.
В данной теме показаны примеры на jQuery для показа ранее скрытых блоков при выбранном значении radio, checkbox и select
Оформление ползунка input type="range"
Оформление ползунка input type="range", вывод его значения и линейки с диапазоном.
Использование стандартного ползунка <input type="range"/> часто бывает более простым и удобным, чем применение различных библиотек и плагинов, например jQuery UI Slider. Его оформление и функционал уступают не сильно, а вот кол-во кода на странице значительно уменьшается.
В данной теме рассмотрен один из вариантов стилизации такого ползунка.
Плавное переключение радиокнопок
Плавное перемещение подсветки активной радиокнопки
Данное решение заменяет стандартные радиокнопки <input type="radio" /> обычными кнопками, а небольшой JS реализует плавный переход подсветки на активную.
