Submit кнопка – html — Вёрстка: в чём разница между кнопками button и submit

Содержание

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <button> создает кнопку, похожую на кнопку элемента <input> со значением submit, reset, button или image атрибута type. Однако, в отличие от элемента <input>, элемент <button> не относится к пустым элементам, то есть у него есть открывающий и закрывающий тег, между которыми можно расположить текст, изображения или другие HTML-элементы.

Когда браузер отображает элемент <button> на веб-странице, то весь элемент со всем его содержимым становится одной активной кнопкой. По умолчанию он будет иметь такой же внешний вид, как и кнопка, созданная с помощью <input type=»button»>, но из-за возможности содержать другие HTML-элементы он имеет гораздо больше возможностей для применения к нему CSS стилей.

Примечание: для изменения стандартного вида курсора при наведении на кнопку используйте CSS свойство cursor.

Атрибуты

autofocus:

Указывает браузеру, что кнопка должна получить фокус после загрузки страницы. Значения для логического атрибута autofocus можно задавать следующими способами:


<button autofocus></button>
<button autofocus="autofocus"></button>
<button autofocus=""></button>

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

disabled:

Отключает возможность нажатия кнопки. Это можно использовать в случае, когда кнопка должна стать активной при выполнение определенных условий (например, при выборе флажка и тд.), сделать кнопку активной можно будет с помощью JavaScript. Значения для логического атрибута disabled можно задавать следующими способами:

 
<button disabled></button>
<button disabled="disabled"></button>
<button disabled=""></button>

form:

Указывает к какой форме относится данная кнопка. В качестве значения выступает один или несколько идентификаторов форм, разделенных пробелами. Количество идентификаторов в значении атрибута зависит от количества принадлежащих кнопке форм:


<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.html" method="get">
    Имя: <input type="text" name="fname"><br>
    Фамилия: <input type="text" name="lname">
  </form>

  <p>Кнопка находится вне элемента form, но является частью формы.</p>

  <button type="submit" form="nameform" value="Submit">Отправить</button>

</body>
</html>

Примечание: атрибут не поддерживается в Internet Explorer.

formaction:

Определяет адрес, куда пересылаются данные формы при нажатии на кнопку. Если для формы указан атрибут action, то атрибут formaction переопределит его значение:


<!DOCTYPE html>
<html>
<body>

  <form action="demo_form.asp" method="get">
    Имя: <input type="text" name="fname"><br>
    Фамилия: <input type="text" name="lname"><br>
    <button type="submit">Отправить</button><br>
    <button type="submit" formaction="demo_admin.html">
	  Отправить от имени администратора
	</button>
</form>

</body>
</html>

Атрибут formaction используется только для кнопок с атрибутом type=»submit».

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formenctype:

Указывает, каким способом данные формы должны быть закодированы перед отправкой на сервер. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

application/x-www-form-urlencoded — все символы кодируются перед отправкой (значение по умолчанию).
multipart/form-data — символы не кодируются (этот метод используется при использовании форм, которые имеют файл управления загрузкой).
text/plain — пробелы преобразуются в символ «+», но символы не кодируются.


<!DOCTYPE html>
<html>
<body>

  <form action="demo_post_enctype.asp" method="post">
    Имя: <input type="text" name="fname" value="Стив Баттлер"><br>
    <button type="submit" >Отправить с кодирование символов</button>
    <button type="submit" formenctype="text/plain">
	  Отправить без кодирования символов
	</button>
  </form>

</body>
</html>

Если для формы указан атрибут enctype, то атрибут formenctype переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formmethod:

Указывает, какой метод HTTP будет использован при отправке данных формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

get — данные формы добавляются в конце URL-адреса: URL-адрес?имя=значение?имя=значение
post — отправляет данные формы, как HTTP после транзакции


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit" >Отправить</button>
  <button type="submit" formmethod="post" formaction="demo_post.asp">
    Отправить используя POST
  </button>
</form>

</body>
</html>

Если для формы указан атрибут method, то атрибут formmethod переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

formnovalidate:

Указывает, что данные формы не будут проверяться на корректность. Используется только для кнопок с атрибутом type=»submit». Значения для логического атрибута autofocus можно задавать следующими способами:


<button formnovalidate></button>
<button formnovalidate="formnovalidate"></button>
<button formnovalidate=""></button>

Если для формы указан атрибут novalidate, то атрибут formnovalidate переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях, и в Safari.

formtarget:

Указывает, где будет отображен ответ после отправки формы. Используется только для кнопок с атрибутом type=»submit». Возможные значения атрибута:

_blank — открывает ответ в новом окне или вкладке.
_self — открывает ответ в той же директории, где располагается ссылка (значение по умолчанию).
_parent — открывает ответ в родительском окне.
_top — открывает ответ во всю ширину окна.
имя_фрейма — открывает ответ в iframe, имя которого было указано в качестве значения.


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit">Отправить</button>
  <button type="submit" formtarget="_blank">
    Оправить и открыть ответ в новом окне
  </button>
</form>

</body>
</html>

Если для формы указан атрибут target, то атрибут formtarget переопределит его значение.

Примечание: атрибут не поддерживается в IE9 и более ранних версиях.

name:

Указывает имя для элемента <button>. Он используется для ссылки на данные формы после ее отправки, или для ссылки на элемент в JavaScript.


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Выберите одно из двух:
  <button name="subject" type="submit" value="HTML">HTML</button>
  <button name="subject" type="submit" value="CSS">CSS</button>
</form>

</body>
</html>

Примечание: некоторые элементы <button> могут совместно использовать одно и то же имя. Это позволяет иметь несколько кнопок с одинаковыми именами, которым можно отправить разные значение при использование формы.

type:

Определяет тип кнопки:

button — активная кнопка
reset — кнопка, очищающая форму от введенных данных
submit — кнопка для отправки данных формы (значение по умолчанию)


<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit" value="Submit">Отправить</button>
  <button type="reset" value="Reset">Стереть</button>
</form>

</body>
</html>

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

value:

Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Примечание: если вы используете элемент <button> в HTML-форме, то IE7 и более ранние версии этого браузера, при отправке формы будут отправлять текст располагающийся между <button> и </button>. В то время как другие браузеры будут отправлять содержимое атрибута value.

Тег <button> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<button type="button">Нажми на меня!</button>

Результат данного примера в окне браузера:

puzzleweb.ru

Кнопки | Учебные курсы | WebReference

Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.

Кнопки на веб-странице можно создать несколькими способами — с помощью элемента <input> или элемента <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" value="Текст">

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты <input>
Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог её идентифицировать.
disabled	Блокирует кнопку и не позволяет на неё нажимать.
form	Идентификатор формы для связывания кнопки с элементом <form>.
type	Для обычной кнопки значением является button.
value	Надпись на кнопке.
autofocus	Кнопка получает фокус после загрузки документа.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>

Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Для таких кнопок есть ряд обязательных правил:

<input> нельзя вкладывать внутрь ссылки <a>;
<input> нельзя вкладывать внутрь кнопки <button>;
значение атрибута value не может быть пустым.

Второй способ создания кнопки основан на использовании элемента <button>. Он по своему действию напоминает результат, получаемый с помощью <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><button>Кнопка с текстом</button> 
   <button>
    <img src="image/umbrella.gif" alt=""> 
    Кнопка с рисунком
   </button></p>
  </form>
 </body>
</html>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Для <button> также есть ряд ограничений:

<button> нельзя вкладывать внутрь ссылки <a>;
один <button> нельзя вкладывать внутрь другого.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента <form>. Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

<input type="submit">
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Пример 3. Отправка данных на сервер

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input name="login"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset">
<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input value="Введите текст"></p>
   <p><input type="submit">
      <input type="reset"></p>
  </form>
 </body>
</html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Сбросить».

Перейти к заданиям

webref.ru

Кнопки | WebReference

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

Кнопку на веб-странице можно создать двумя способами — с помощью элемента <input> или <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" атрибуты>

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты кнопок
Атрибут	Описание
name	Имя кнопки; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Нажми меня нежно "></p>
  </form>
 </body>
</html>

Пробелы в надписи на кнопке, в отличие от обычного текста в HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Рис. 2. Кнопки, созданные с помощью <button>

Синтаксис создания такой кнопки следующий.

<button атрибуты>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то элемент <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><button>Кнопка с текстом</button> 
   <button>
    <img src="image/umbrella.gif" alt=""> 
    Кнопка с рисунком
   </button></p>
  </form>
 </body>
</html>

В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <button>, но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input>, ширину кнопки изменить не удастся.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action элемента <form>. Эта программа, называемая еще обработчиком формы, получает данные введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

<input type="submit" атрибуты>
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input name="login"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер самостоятельно добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset" атрибуты>
<button type="reset">Надпись на кнопке</button>

Пример 4. Кнопка для очистки формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input value="Введите текст"></p>
   <p><input type="submit" value="Отправить">
      <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке не писать, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

Цветные кнопки

Вид и цвет кнопок зависит от операционной системы и браузера. Тем не менее можно изменить цвет кнопок по своему усмотрению, воспользовавшись стилями. Для этого требуется только добавить к кнопке свойство background, как показано в примере 5. Дополнительно можно поменять цвет текста и другие параметры. Помните про одну особенность — как только вы меняете цвет фона, кнопка становится приподнятой, поэтому для «плоских» кнопок надо добавить ещё рамку, пусть даже прозрачную.

Пример 5. Вид кнопок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   .btn {
    background: #5d8f76; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 7px 12px; /* Поля */
    margin-bottom: 1em; /* Отступ снизу */
   }
   .btn:hover {
    background: #1e6550; /* Цвет фона при наведении курсора */
   }
   .btn-flat {
    border: 1px transparent; /* Прозрачная рамка */
   }
   .btn-round {
    border-radius: 20px; /* Радиус скругления */
   }
  </style>
 </head>
 <body> 
  <form>
   <p><input type="button" value="Исходная кнопка">
      <input type="button" value="Цветная кнопка">
      <input type="button" value="Плоская кнопка">
      <input type="button" value="Кнопка со скруглёнными уголками"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Изменение вида кнопок

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

webref.ru
Тег | htmlbook.ru
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+
Спецификация
HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1
Описание
Тег <button> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <input> (с атрибутом type=»button | reset | submit»). В отличие от этого тега, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в контейнер <form> обязательно.
Синтаксис
<form> <button>...</button> </form>
Атрибуты
accesskey
Доступ к элементам формы с помощью горячих клавиш.
autofocus
Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает между собой форму и кнопку.
formaction
Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
Способ кодирования данных формы.
formmethod
Указывает метод пересылки данных формы.
formnovalidate
Отменяет проверку формы на корректность.
formtarget
Открывает результат отправки формы в новом окне или фрейме.
name
Определяет уникальное имя кнопки.
type
Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
value
Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег BUTTON</title> </head> <body> <p><button>Кнопка с текстом</button> <button><img src="images/umbrella.gif" alt="Зонтик" > Кнопка с рисунком</button></p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Вид кнопок в браузере Safari
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает атрибут value.
htmlbook.ru
HTML5 | Кнопки
Кнопки
Последнее обновление: 08.04.2016
Кнопки представлены элементом button. Они обладают широкими возможностями по конфигурации. Так, в зависимости от значения атрибута type мы можем создать различные типы кнопок:
submit: кнопка, используемая для отправки формы

reset: кнопка сброса значений формы

button: кнопка без какого-либо специального назначения

Если кнопка используется для отправки формы, то есть у нее установлен атрибут type="submit", то мы можем задать у нее ряд дополнительных атрибутов:
form: определяет форму, за которой закреплена кнопка отправки

formaction: устанавливает адрес, на который отправляется форма. Если у элемента form задан атрибут action, то он переопределяется

formenctype: устанавливает формат отправки данных. Если у элемента form установлен атрибут enctype, то он переопределяется

formmethod: устанавливает метод отправки формы (post или get). Если у элемента form установлен атрибут method, то он переопределяется

Например, определим на форме кнопку отправки и кнопку сброса:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form> <p><input type="text" name="login"/></p> <p><input type="password" name="password"/></p> <p> <button type="submit" formmethod="get" formaction="index.html">Отправить</button> <button type="reset">Отмена</button> </p> </form> </body> </html>
Кроме элемента button для создания кнопок можно использовать элемент input, у которого атрибут равен submit или reset. Например:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы в HTML5</title> </head> <body> <form> <p><input type="text" name="login"/></p> <p><input type="password" name="password"/></p> <p> <input type="submit" value="Отправить" /> <input type="reset" value="Отмена" /> </p> </form> </body> </html>
И еще один элемент input с атрибутом type="image" позволяет использовать в качестве кнопки изображение:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма ввода в HTML5</title> </head> <body> <form> <p> <input type="text" name="search" /> <input type="image" src="search.png" name="submit" /> </p> </form> </body> </html>
Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input type="submit" или button type="submit".
metanit.com
Разница между и text — html
Не уверен, откуда вы получаете свои легенды, но:
Кнопка отправки с <button>
Как и с:
<button type="submit">(html content)</button>
IE6 отправит весь текст для этой кнопки между тегами, другие браузеры будут отправлять только значение. Использование <button> дает вам больше свободы компоновки над дизайном кнопки. Во всех его намерениях и целях это казалось превосходным сначала, но различные причуды браузера затрудняют использование в разы.
В вашем примере IE6 отправит text на сервер, в то время как большинство других браузеров ничего не отправят. Чтобы сделать его совместимым с кросс-браузером, используйте <button type="submit" value="text">text</button>. Еще лучше: не используйте значение, потому что, если вы добавляете HTML, становится довольно сложным то, что получено на стороне сервера. Вместо этого, если вы должны отправить дополнительное значение, используйте скрытое поле.
Кнопка с <input>
Как и с:
<input type="button" />
По умолчанию это почти ничего не делает. Он даже не отправит вашу форму. Вы можете размещать только текст на кнопке и придать ему размер и границу с помощью CSS. Его первоначальным (и текущим) намерением было выполнение script без необходимости отправки формы на сервер.
Обычная кнопка отправки с <input>
Как и с:
<input type="submit" />
Как и предыдущий, но фактически представляет окружающую форму.
Кнопка отправки изображения с помощью <input>
Как и с:
<input type="image" />
Как и предыдущий (submit), он также отправит форму, но вы можете использовать любое изображение. Раньше это был предпочтительный способ использования изображений в качестве кнопок, когда форма должна была подаваться. Для большего контроля теперь используется <button>. Это также можно использовать для карт изображений на стороне сервера, но в наши дни это редкость. Когда вы используете атрибут usemap и (с или без этого атрибута), браузер отправляет координаты мыши/указателя X/Y на сервер (точнее, местоположение указателя мыши внутри кнопки момента нажатия Это). Если вы просто игнорируете эти дополнительные функции, это не что иное, как кнопка отправки, замаскированная под изображение.
Существуют некоторые тонкие различия между браузерами, но все будут отправлять атрибут value, за исключением тега <button>, как описано выше.
qaru.site
Замена кнопки submit в форме html
Цель:
Сегодня наша задача замена стандартной кнопки «отправить» на красивую. Кнопка выполняет отправку формы и имеет тип «submit». Можно конечно изменить тип с «submit» на «image» и добавить параметр «src», но наша задача на сегодня это оставить тип «submit» на месте и программно нарисовать красивую кнопку.

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

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

<input type=»submit» name=»submit» value=»Оплатить» />

А вот и 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;
}

Please enable JavaScript to view the comments powered by Disqus.
u2site.ru
No related posts.

Submit кнопка – html — Вёрстка: в чём разница между кнопками button и submit

Тег | HTML справочник

Поддержка браузерами

Описание

Атрибуты

Стиль по умолчанию

Пример

Кнопки | Учебные курсы | WebReference

Кнопка Submit

Кнопка Reset

Кнопки | WebReference

Кнопка Submit

Кнопка Reset

Цветные кнопки

Автор и редакторы

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

Атрибуты

Закрывающий тег

Браузеры

HTML5 | Кнопки

Кнопки

Разница между и text — html

Кнопка отправки с `<button>`

Кнопка с `<input>`

Обычная кнопка отправки с `<input>`

Кнопка отправки изображения с помощью `<input>`

Замена кнопки submit в форме html

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	6.0+	1.0+	1.0+	1.0+	1.0+

Submit кнопка – html — Вёрстка: в чём разница между кнопками button и submit

Тег | HTML справочник

Поддержка браузерами

Описание

Атрибуты

Стиль по умолчанию

Пример

Кнопки | Учебные курсы | WebReference

Кнопка Submit

Кнопка Reset

Кнопки | WebReference

Кнопка Submit

Кнопка Reset

Цветные кнопки

Автор и редакторы

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

Атрибуты

Закрывающий тег

Браузеры

HTML5 | Кнопки

Кнопки

Разница между и text — html

Кнопка отправки с <button>

Кнопка с <input>

Обычная кнопка отправки с <input>

Кнопка отправки изображения с помощью <input>

Замена кнопки submit в форме html

Добавить комментарий Отменить ответ

Рубрики

Рубрики

Кнопка отправки с `<button>`

Кнопка с `<input>`

Обычная кнопка отправки с `<input>`

Кнопка отправки изображения с помощью `<input>`