Простая кнопка отправки. Отключение и включение кнопки отправки

Пытается отправить форму на сервер.

Стоимость

Если вы решили использовать элементы для создания кнопок в своей форме, имейте это в виду: если внутри

есть только одна

, эта кнопка будет обрабатываться как кнопка «отправить». Поэтому у вас должно быть привычка явно указывать, какая кнопка - кнопка отправки.

Простая кнопка отправки

Начнем с создания формы с простой кнопкой отправки:

Let"s submit some text

Это делает так:

Попробуйте ввести текст в текстовое поле, а затем отправьте форму.

После отправки пары имя / значение данных отправляется на сервер. В этом случае строка будет "text= usertext " , где «usertext» - это текст, введенный пользователем, закодированный для сохранения специальных символов. Где и как данные передаются, зависит от конфигурации

; см. « Отправка данных формы» для получения более подробной информации.

Добавление сочетания клавиш отправки

Ярлыки клавиш, также называемые клавишами доступа и эквивалентами клавиатуры, позволяют пользователю запускать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить комбинацию клавиш к кнопке отправки - так же, как и с любым для которого это имеет смысл, вы используете глобальный атрибут accesskey .

В этом примере s указывается как ключ доступа (вам нужно нажать s плюс специальные ключи-модификаторы для вашей комбинации браузера / ОС. Чтобы избежать конфликтов с собственными комбинациями клавиш пользовательского агента, используются разные клавиши-модификаторы для ключи доступа, чем для других ярлыков на главном компьютере. Дополнительные сведения см. в разделе доступа.

Вот предыдущий пример с добавленным ключом доступа s:

Let"s submit some text

Например, в Firefox для Mac нажатие кнопки Control - Option - S вызывает кнопку отправки, в то время как Chrome в Windows использует Alt + S.

Проблема с приведенным выше примером заключается в том, что пользователь не будет знать, что такое ключ доступа! Это особенно верно, поскольку модификаторы обычно нестандартны, чтобы избежать конфликтов. При создании сайта обязательно указывайте эту информацию таким образом, чтобы это не мешало дизайну сайта (например, предоставляя легкодоступную ссылку, указывающую на информацию о том, какие ключи доступа к сайту). Добавление всплывающей подсказки к кнопке (с использованием атрибута title) также может помочь, хотя это не полное решение для целей доступности.

Отключение и включение кнопки отправки

Чтобы отключить кнопку отправки, просто укажите на ней disabled глобальный атрибут, например:

Вы можете включать и отключать кнопки во время выполнения, просто disabled значение true или false ; в JavaScript это выглядит как btn.disabled = true или btn.disabled = false .

Проверка

Кнопки отправки не участвуют в проверке ограничений; они не имеют реальной ценности для ограничения.

Примеры

Мы включили простые примеры выше. Больше нечего сказать о кнопках отправки. Причина такого рода контроля иногда называется «простой кнопкой».

Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

Применение:
Для чего это может понадобиться? Всё просто, для придания эстетичного вида той самой кнопке.
Вот для сравнения. Наглядно видно, что вторая кнопка смотрится лучше.

Решение:
Для выполнения данной цели как и говорилось мы будем применять «input» с типом «submit». Ещё нам понадобится описать новый класс в таблице стилей «*.css»
Вот код для html-файла:

А вот и css:

Superbutton {
width:150px;
height:40px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:18px;
cursor:pointer;
}

Украшаем:
Для украшения можно предложить изменять цвет фона кнопки при наведении. Как правило дизайнеры советуют менять цвет не кардинально, а всего лишь на тон светлее или темнее. Я при выполнении задачи предпочел затемнить кнопку. Для этого в css добавляем:

Superbutton:hover{
background:#358DE5;
}

Теперь кнопка ожила. На статичной картинке разность цветов не так заметна когда ты наводишь мышь и цвет в туже секунду меняется накладывая более темный оттенок.

Проблема рамки вокруг кнопки:
И всё вроде ничего и выглядит ничего и при наведении темнеет, но при нажатии мы видим ужасную рамку. Ещё эту рамку можно наблюдать если наша кнопка находится в фокусе, в том который по кнопке Tab перебирает элементы на странице.
Для этого мы пропишем в css ещё 2 псевдо класса, как и «hover». Это классы «active» который отвечает за вид при нажатии на кнопку и класс «focus» при фокусе на кнопке. Но есть одна особенность, так как у нас input и присвоенный ему класс, то active прописывать не обязательно.
Вот код:

Superbutton:focus{
outline:none;

С каждым днем новые стандарты css3 и html5 всё более глубоко входят в жизнь верстальщиков и web-разработчиков, а браузеры с каждым днем становятся все более совместимыми с этими стандартами.

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

1. Super Awesome Buttons.

Данный набор кнопок использует набор css3 а также раскраску RGBA.

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

Пример подключения:

Super Awesome Button » Awesome Blue Button » Awesome Magenta Button » Awesome Red Button » Awesome Orange Button » Awesome Yellow Button »

2. Google Buttons.

За основу данных кнопок была взята главная страница Google.com. Они также просты и минималистичны.

Пример подключения:

Search Google I"m Feeling lucky

3. CSS3 Gradient Buttons.

Кнопки очень похожи на Super Awesome Buttons о которых говорилось выше. Данный набор представлен несколькими цветами (9 цветов) и различными формами.

Пример подключения:

Rectangle or Rounded Can be Medium or Small Button Tag Span

H3

4. Kick-Ass CSS3 Button.

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

5. Pure CSS social media icons.

Этот набор является набором иконок социальных сетей, нежели кнопок. Набор представлен десятью иконками социальных сетей среди которых Facebook, Twitter, Flickr и прочие.

Пример подключения:

• Facebook
• Twitter
• RSS
• Flickr
• Delicious
• LinkedIn
• Google
• Orkut
• Technorati
• NetVibes

6. Extremely fancy CSS3 buttons.

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

Пример подключения:

Post

7. BonBon: Sweet CSS3 buttons.

Вы прирожденный сладкоежка? Тогда эти кнопки придуманы для вас. Сделаны они так, что их так и хочется съесть, или в конце концов применить в своем проекте. Различные цвета, формы, состояния вам несоменно понравятся.

Пример подключения:

Label

8. Realistic Looking CSS3 Buttons.

Интересный набор кнопок, строгие цвета, закругления, несомненно заслуживает внимания.

Пример подключения:

Pushit

9. Simple CSS3 Github buttons.

Реализацию подобных кнопок вы уже видели ранее на github.com , очень просты в установке, удобны и минималистичны. Также возможно добавление к кнопкам иконок.

Пример подключения:

This is a Button This is a Pill Button Divide by Zero

10. Flexible CSS3 toggle buttons.

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

Пример подключения: