Кнопка отправить html: Атрибут formaction | htmlbook.ru — Вебджем.рф

Содержание

— HTML | MDN

HTML-элемент <button> создаёт кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.

Категории контента	Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент.
Разрешённый контент	Текстовый контент.
Tag omission	Нет, открывающий и закрывающий теги обязательны.
Разрешённый родительский контент	Любой элемент с поддержкой текстового контента.
Разрешённые роли ARIA	`checkbox`, `link`, `menuitem`, `menuitemcheckbox`, `menuitemradio`, `radio`, `switch`, `tab`
DOM interface	`HTMLButtonElement`
Тип	Строчный

Элемент поддерживает глобальные атрибуты.

autofocus HTML5

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

autocomplete Это API не было стандартизировано.

Использование данного атрибута на элементе <button> не описано в стандарте и используется только в Firefox браузере.

По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключённое состояние для элемента <button> при последующих загрузках страницы. Установка для данного атрибута значения off отключает подобное поведение. Смотрите баг 654072.

disabled

Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой. Если атрибут не установлен, то кнопка наследует его от элемента-контейнера, в котором она расположена, например от <fieldset>; если отсутствует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.

Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключённое состояние для элемента <button>, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибут

autocomplete.

form HTML5

Атрибут form позволяет указать элемент <form>, с которым связана кнопка. Данный атрибут должен хранить значение id элемента <form>. Если данный атрибут не установлен, то элемент <button> будет связан с родительским элементом <form>, если последний существует.

Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент <button> с формой, даже в случае, если <button> не является наследником элемента <form>.

formaction HTML5

Ссылка на обработчик формы. Если атрибут определён — он переопределит атрибут action у формы-родителя.

formenctype HTML5

Если button имеет тип submit, то этот атрибут определяет тип контента, отправляемого на сервер.

Возможные значения данного атрибута:

application/x-www-form-urlencoded: значение по умолчанию, если атрибут не указан.
multipart/form-data: следует использовать это значение, если форма содержит элемент <input> со значением атрибута type file.
text/plain

Если этот атрибут определён, он переопределяет атрибут enctype у формы-родителя.

formmethod HTML5

Если button имеет тип submit, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер. Возможные варианты:

post: данные формы включаются в тело сообщения и отправляются на сервер.

get: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибута action и непосредственно данных, отделённых знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.

Если этот атрибут определён, он переопределяет атрибут method у формы-родителя.

formnovalidate HTML5

Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.

Если этот атрибут определён, он переопределяет атрибут novalidate у формы-родителя.

formtarget HTML5

Если button имеет тип submit, этот атрибут является именем или ключевым словом,

указывающим, где отображать ответ, полученный после отправки формы. This is a name of, or keyword for, a

browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button’s form owner.

The following keywords have special meanings:

_self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
_blank: Load the response into a new unnamed browsing context.
_parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.

name

The name of the button, which is submitted with the form data.

type

The type of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.
menu: The button opens a popup menu defined via its designated <menu> element.

value

The initial value of the button.

<button name="button">Тык!</button>

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 или ранее)	(Да)	(Да)	(Да)
`formaction` attribute	9. 0	4.0 (2.0)	10	?	?
`formenctype` attribute	9.0	4.0 (2.0)	10	10.6	?
`formmethod` attribute	9.0	4.0 (2.0)	10	?	?
`autofocus` attribute	5.0	4.0 (2.0)	10	9.6	5.0
`menu` value for `type` attribute	Нет	Нет^[1]	Нет	Нет	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Да)	1.0 (1.0)	(Да)	(Да)	(Да)
`formaction` attribute	?	4.0 (2.0)	?	?	?
`formenctype` attribute	?	4.0 (2.0)	?	?	?
`formmethod` attribute	?	4.0 (2.0)	?	?	?
`menu` value for `type` attribute	?	?	?	?	?

[1] Gecko does not implement this feature yet. See баг 1241353.

Clicking and focus

Whether clicking on a <button> causes it to (by default) become focused varies by browser and OS. The results for <input> of type="button" and type="submit" were the same.

Does clicking on a `<button>` give it the focus?
Desktop Browsers	Windows 8. 1	OS X 10.9
Firefox 30.0	Yes	No (even with a `tabindex`)
Chrome 35	Yes	Yes
Safari 7.0.5	N/A	No (even with a `tabindex`)
Internet Explorer 11	Yes	N/A
Presto (Opera 12)	Yes	Yes

Does tapping on a `<button>` give it the focus?
Mobile Browsers	iOS 7.1.2	Android 4.4.4
Safari Mobile	No (even with a `tabindex`)	N/A
Chrome 35	No (even with a `tabindex`)	Yes

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.

IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.

Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button::-moz-focus-inner (en-US) { }

Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button> across page loads. Setting the value of the autocomplete attribute to off disables this feature. See баг 654072.

Firefox <35 for Android sets a default background-image gradient on all buttons (see баг 763671). This can be disabled using background-image: none.

Other elements that are used for creating forms: <form>, <datalist>, <fieldset>, <input>,<keygen> (en-US), <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea> (en-US).

Как по умолчанию кнопка «Отправить» на определен HTML-формы?

Если вы отправляете форму через formElement JavaScript (то есть.отправить() или что-нибудь эквивалентное), то никто из кнопок считаются успешными и никто из их значения включаются в представленных данных. (Обратите внимание, что если вы отправить форму с помощью submitElement.нажмите кнопку()затем представить, что у тебя есть ссылка является активной; это не'т действительно подпадают в рамки вашего вопроса, Так вот кнопки "Отправить" является однозначной, но я думал, что я'd-это для тех людей, кто читал первую часть и интересно, как сделать кнопку Submit через JS удачная форма подачи. Конечно, форма'ы onsubmit обработчики все равно будут обстреливать эту дорогу, а они не'форма Т через.представить (), так что’ы другой коленкор…)

Если форма отправлена, нажав Enter, пока в текстовой области, затем он’ов на самом деле вниз на агента пользователя, чтобы решить, что он хочет здесь. В характеристики Дон’т сказать ничего об отправке формы с помощью клавиши Enter, находясь в поле ввода текста (если вы вкладку на кнопку и активировать его с помощью пространства или что-то, то там’s нет проблемы, что конкретные кнопки-это однозначно). Все это говорит, что форма должна быть подана, когда кнопка «Отправить» активна, это’ы даже не требование, нажимая Enter, например, ввод текста будет отправить форму.

Я считаю, что Интернет Эксплорер нажимает кнопку Отправить, который появляется первым в источнике; у меня есть ощущение, что Firefox и Opera выбрать кнопку с самыми низкими свойство tabindex, возвращаясь к первой определено, если ничего другого не определено. Там’s также некоторых осложнений относительно того, что представляет иметь по умолчанию значение атрибута МСИО.

Вывод заключается в том, что существует определенный стандарт для того, что происходит здесь, и это’ы исключительно по прихоти браузера — насколько это возможно в то, что вы’повторно делать, Старайтесь не полагаться на какую-либо конкретное поведение. Если вы действительно должны знать, вы можете выяснить поведение различных версиях браузера, но когда я проверял некоторое время назад были некоторые довольно запутанные условия (которые, конечно, могут меняться с новыми версиями браузеров) и я’d не советую избегать его, если это возможно!

Кнопки. Компоненты · Bootstrap. Версия v4.0.0

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

Примеры

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

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный Линк

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

<button type="button">Линк</button>

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Классы .btn созданы для использования с элементом <button>. Однако их также можно использовать внутри <a> или <input> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

При использовании классов .btn в элементах <a>, которые в данном случае используются не как линк, ведущий на новые страницы или как якорь, а как триггер внутристраничной функциональности (такой как сворачивание содержимого), необходимо задать этим <a> атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка».

<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Контурные кнопки (без фона)

Нужна кнопка, но без «тяжелых» фоновых цветов? Замените дефолтные классы-модификаторы на классы .btn-outline-* для удаления всех фоновых изображений и цветов в любой кнопке.

Главный Вторичный Успех Опасность Предупреждение Инфо Светлый Темный

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

Размеры

Нужно изменить размеры кнопки? Добавьте в нее классы . btn-lg или .btn-sm для получения дополнительных размеров.

Большая кнопка Большая кнопка

<button type="button">Большая кнопка</button>
<button type="button">Большая кнопка</button>

Маленькая кнопка Маленькая кнопка

<button type="button">Маленькая кнопка</button>
<button type="button">Маленькая кнопка</button>

Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса .btn-block.

Кнопка блочного уровня Кнопка блочного уровня

<button type="button">Кнопка блочного уровня</button>
<button type="button">Кнопка блочного уровня</button>

Активное состояние

Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в <button>, т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed="true") , когда необходимо прямо объявить такое поведение.

<a href="#" role="button" aria-pressed="true">Главная ссылка</a>
<a href="#" role="button" aria-pressed="true">Ссылка</a>

«Отключенние» кнопки

Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу <button>.

Главная кнопка Кнопка

<button type="button" disabled>Главная кнопка</button>
<button type="button" disabled>Кнопка</button>

«Отключенные» кнопки, созданные из элемента <a>, ведут себя немного иначе:

Элемент <a> не поддерживает атрибут disabled, так что для соответствующих свойств вместо него надо добавлять класс . disabled;
Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в <a> для отключения всех событий pointer-events на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
Отключенные кнопки должны содержать атрибут aria-disabled="true" для указания вспомогательным технологиям состояния элемента.

<a href="#" role="button" aria-disabled="true">Главный линк</a>
<a href="#" role="button" aria-disabled="true">Линк</a>

Оговорка о некоторых аспектах функциональности ссылок

Класс .disabled использует pointer-events: none для попытки деактивации ссылочной функциональности <a>, но это свойство CSS еще не полностью стандартизовано. В дополнение, даже в браузерах, поддерживающих свойство pointer-events: none, при навигации с клавиатуры пользователи клавиатур для слабовидящих и иных вспомогательных технологий могут нечаянно пройти по данной ссылке. Так что для полной «безопасности» добавляйте в эти ссылки атрибут tabindex="-1" (для предотвращения возможности «нахождения» их с клавиатуры) и используйте обычные скрипты JavaScript для деактивации их функциональности.

Плагины кнопок

Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».

Переключение состояний

Добавьте data-toggle="button" для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в <button> класс .active и aria-pressed="true".

Одиночный переключатель

<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
  Одиночный переключатель
</button>

Переключатели («галочки») и «кнопки радио»

Стили классов . button могут применяться к прочим элементам, таким как <label>, для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle="buttons" к классу .btn-group, содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например <input type="reset"> или вручную применяя свойство ввода checked – вам потребуется вручную применить класс .active к <label>.

Заметьте, что кнопки с предустановленным выбором требуют вручную добавить класс .active к элементу ввода <label>.

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" autocomplete="off" checked> Active
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
</div>

Методы

Метод	Описание
`$().button('toggle')`	Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки.
`$().button('dispose')`	Уничтожает кнопку элемента (в элементе).

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

правка дополнительного содержимого не затрагивала ранее написанные стили;
при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

.button {
   /* геометрия элемента */
   width: 150px;
   height: 20px;
   /* отступы между кнопками */
   margin-bottom: 5px;
   /* центрируем текст кнопки по вертикали */
   display: flex;
   justify-content: center;
   /* центрируем текст кнопки по горизонтали */
   text-align: center;
   /* чтобы работала геометрия и отступы у тега <a> */
   display: inline-block;
   /* убираем обводку у тега <a> */
   text-decoration: none;
   background-color: red;
   color: #fff;
}

Примеры использования:

<a href=»#»>Отправить резюме</a>
<a href=»/»>Очистить форму</a>

Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {
   min-width: 150px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   /* … остальной код без изменения */
}

Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {
   /*
      поскольку другое значение border-box не задавалось,
      нужно подкорректировать размеры
    */
   min-width: 140px;
   /* при жесткой высоте будет увеличиваться ширина */
   height: 20px;
   padding: 0 10px;
   /* … остальной код без изменения */
}

Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

<div>
<h2>
Поздравляю, вы стали обладателем квартиры в Сызрани!
</h2>
</div>

.greeting {
/* задаём геометрию */
height: 200px;
padding: 20px;
/* центрируем содержимое по вертикали и горизонтали */
display: flex;
align-items: center;
justify-content: center;
/* учитываем последующее добавление элементов */
flex-direction: column;
background: blue;
}
.greeting__title {
color: #fff;
font-family: Arial;
font-size: 20px;
}

Вот что у нас получилось:

Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {
/* задаём геометрию */
min-height: 200px;
padding: 20px;
/* код без изменения */
}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

. greeting {
/* задаём геометрию */
min-height: 40px;
/* тут речь идет только о box-sizing:content-box */
padding: 80px;
/* код без изменения */
}

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.

Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

<div>
<div>
   <h2>
     Поздравляю, вы стали обладателем квартиры в Сызрани!
   </h2>
</div>
</div>

И так тоже не делайте:

.greeting {
/* задаём геометрию */
min-height: 40px;
/* не задаём никакие отступы в родительском элементе */
/* код без изменения */
}

.greeting__container {
margin: 80px;
}

Резюме

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

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Получаем данные от элементов формы с помощью PHP

В этом уроки мы с помощью функций PHP получим данные, которые будет вводить пользователь в форму.

Первое, что нам нужно — это создать форму:

<form action="app/check.php" method="post">

<p>Имя: <input name="name" type="text"></p>

<p>Фамилия: <input name="surname" type="text"></p>

<p>E-mail: <input name="email" type="text"></p>

<p>Сообщение: <br /><textarea name="message" cols="30" rows="5"></textarea></p>

<p><input type='submit' value='Отправить'></p>

</form>

Обратите внимание на строку action=»app/check. php» — это адрес обработчика формы, сюда будут отправляться данные формы, после нажатия кнопки Отправить. Также, на параметр name у полей формы, мы будем использовать эти имена при написании кода. Передавать данные будем методом — POST.

1. Давайте начнем. Создайте и откройте (через редактор) обработчик app/code.php — сначала, это просто пустая страница. Далее откройте тег PHP — <?php.

2. Нам нужно проверить, была ли отправлена форма, для этого мы будем использовать глобальную переменную $_SERVER и проверять REQUEST_METHOD

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // наш код
}
?>

3. Дальше, если форма отправлена, мы можем получить данные от поля «Имя», для этого, какой-нибуть переменной присваиваем полученное значение от этого поля, например:

<?php
$name = $_POST['name']; 
?>

$_POST — переменная, в которой сохраняются данные, если форма была отправлена методом POST.

$_POST['name'] — получаем данные от поля name.

4. Тоже самое делаем и для остальных наших полей:

<?php
$name = $_POST['name'];

$surname = $_POST['surname'];
$email = $_POST['email'];
$message = $_POST['message'];
?>

5. Данные мы получили, теперь мы можем их вывести, для этого в страницу обработчика дописываем код:

<?php
$name = $_POST['name'];

$surname = $_POST['surname'];
$email = $_POST['email'];
$message = $_POST['message']; 

echo $name."<br />".$surname."<br />".$email."<br />".$message."<br />"; 
?>

Не рекомендуется просто так, без проверки, выводить введенные пользователем данные.
Пропускайте переменные хотя бы через функцию htmlspecialchars.

Вот так, можно получать данные введенные в элементы формы.

Посмотреть исходники

Красивые 3D-кнопки с помощью CSS3

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте.

Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.

С помощью CSS3 я “нарисовал” практически копии этих кнопок, кодом которых и поделюсь в данной статье.

HTML

HTML-код кнопки будет таким:


<button name="" type="submit">Отправить</button>

Можно было бы использовать и тег <input>, но есть 2 причины, по которым в данном случае лучше будет задействовать тег <button>:

В Опере на input’е не работает свойство text-shadow;
В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.

Примеры

На отдельной странице я подготовил все 10 вариантов 3D-кнопки. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.

Также пример такой кнопки вы можете наблюдать в форме добавления комментария на данном блоге.

Особенности

Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.
Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.
Для создания градиентов я воспользовался удобным сервисом Ultimate CSS Gradient Generator.
Если сравнивать место, занимаемое на сервере, между кнопкой, созданной в виде изображения, и кнопкой, созданной на чистом CSS-коде, то разница получается несущественная – плюс-минус 1 Кб. Однако при этом кнопка на CSS3 позволяет снизить количество запросов к серверу на 1, что, несомненно, является плюсом.

В итоге, несмотря на отсутствие поддержки в браузерах Internet Explorer ряда CSS-свойств, я считаю, что 3D-кнопки, оформленные подобным образом с помощью CSS3, можно смело использовать на своих сайтах, ведь на их юзабилити это никак не сказывается, а пользователи IE лишены лишь возможности наблюдать все прелести современных веб-технологий.

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}
{{l10n_strings. DRAG_TEXT_HELP}}
{{l10n_strings.LANGUAGE}} {{$select.selected.display}}
{{article.content_lang.display}}
{{l10n_strings.AUTHOR}}
{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}
{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}
— HTML: язык разметки гипертекста
элемента типа submit отображаются как кнопки. Когда происходит событие click (обычно из-за того, что пользователь нажал кнопку), пользовательский агент пытается отправить форму на сервер.

Атрибут элемента содержит DOMString , который отображается как метка кнопки.В противном случае кнопки не имеют истинного значения.

Если вы не укажете , значение , кнопка будет иметь метку по умолчанию, выбранную пользовательским агентом. Скорее всего, это будет что-то вроде «Отправить» или «Отправить запрос». Вот пример кнопки отправки с меткой по умолчанию в вашем браузере:
В дополнение к атрибутам, общим для всех элементов , submit кнопок ввода поддерживает следующие атрибуты:
Атрибут Описание
форма операции URL-адрес для отправки данных формы; переопределяет атрибут действия формы , если он есть
formenctype Строка, определяющая тип кодировки, используемый для данных формы
метод формы Метод HTTP ( получить или сообщение ) для использования при отправке формы.
форма новалидата Логическое значение, которое, если оно присутствует, означает, что поля формы не будут подвергаться проверке ограничений перед отправкой данных на сервер.
formtarget Контекст просмотра, в который загружается ответ, возвращаемый сервером после отправки формы
formaction
formenctype
Строка, определяющая метод кодирования, используемый при отправке данных формы на сервер.Есть три допустимых значения:
приложение / x-www-form-urlencoded
Это значение по умолчанию отправляет данные формы в виде строки после URL-кодирования текста с использованием такого алгоритма, как encodeURI () .
multipart / form-data
Использует FormData API для управления данными, позволяя отправлять файлы на сервер. Вы должны использовать этот тип кодировки, если ваша форма включает элементов типа file ( ).
текст / простой
Обычный текст; в основном полезен только для отладки, поэтому вы можете легко увидеть данные, которые нужно отправить.
Если указано, значение атрибута formenctype переопределяет атрибут action формы-владельца.
Этот атрибут также доступен для элементов и

Атрибут	Описание
`форма операции`	URL-адрес для отправки данных формы; переопределяет атрибут `действия формы` , если он есть
`formenctype`	Строка, определяющая тип кодировки, используемый для данных формы
`метод формы`	Метод HTTP ( `получить` или `сообщение` ) для использования при отправке формы.
`форма новалидата`	Логическое значение, которое, если оно присутствует, означает, что поля формы не будут подвергаться проверке ограничений перед отправкой данных на сервер.
`formtarget`	Контекст просмотра, в который загружается ответ, возвращаемый сервером после отправки формы