Button type submit


Here is an alternative if you aren’t sure about using a button tag.

<form method="get" action="">  <input type="text" name="txt" />  <input type="hidden" name="myinput" value="myvalue" />  <input type="submit" name="submit" /> </form> 

This will be more consistent than a button tag as as some browsers actually submit the text inside of the button tags rather than its value attribute. For example

<button name="mybutton" type="submit" value="one">Two</button> 

In some browsers, you would have «one» submitted, in others, «Two».

If you want to act conditionally depending on the particular button pressed, you would have to do so based on the text on the input…

In this example, the display text («Button 1» or «Button 2») would be posted back.

Firefox: «?txt=&submit=Button+1» IE: «?txt=&submit=Button+1» Safari: «?txt=&submit=Button+1»

And so on. Giving two form elements the same name is generally accepted as being possible as browsers support it. It isn’t formally documented though, so you’ll have to decide if you want to act on it.

As a final alternative, is there any reason why you can’t give them a form field that let’s them choose the control flow rather than having two buttons?

 

<form method="get" action=""> <input type="text" name="txt" /> <select name="myname"> <option value="A">A</option> <option value="B">B</option> </select> <input type="submit" name="submit" value="Go" /> </form>

UPDATE

If you want two buttons for the case you mention in your comment… i.e. one button half-way down the form to refresh something based on a sub-set of inputs and another button at the bottom to submit, this is how you should do things…

1) The buttons should both do the same thing — simply submit the form.

2) You should detect server-side if you have a valid form (if they are working sequentially and have hit the first of the two submits, you will have blank inputs for the second half of the form — rendering it invalid).

3) You should detect server-side if you have enough information to perform the calculation or refresh that you mention in your comment.

In cases 2 and 3, you should mark the fields that are required for the user to proceed.


This negates the need for particular buttons to do particular things — the user could type in the first half of the form and still hit the button at the bottom — so you don’t want to base your logic on which button was pressed.

stackoverflow.com

Кнопка отправки с <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

Описание параметров тега BUTTON

Параметр DISABLED

Описание
Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.

Синтаксис
<button disabled>…</button>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 2. Блокирование доступа к кнопке

 

Результат примера


Параметр TYPE

Описание
Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.

Синтаксис
<button type=button | reset | submit>…</button>

Аргументы
button — обычная кнопка.
reset — кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
submit — кнопка для отправки данных формы на сервер.

Значение по умолчанию
button

Пример 3. Изменение типа кнопки


 


Параметр VALUE

Описание
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара имя/значение, где имя задается параметром name тега BUTTON, а значение — параметром value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.

Синтаксис
<button value=значение>…</button>

Аргументы
Любая текстовая строка.

Значение по умолчанию
Нет.

Пример 4. Установка значения кнопки

Материал взят с сайта htmlbook.ru

in-sites.ru

Button есть элемент формы

Формы имеют кнопки отправки. Например:

HTML

   <form action="/" method="post">   <input type="submit" value="Submit">  </form>  

В форме элемент button, по умолчанию, ведет себя идентично приведенному выше элементу input.

HTML

   <form action="/" method="post">   <button>Отправить</button>  </form>  

При помощи кнопки (button) также можно сбрасывать данные формы в первоначальное состояние. Для этого у атрибута type установите значение reset.

HTML

   <form action="/" method="post">   <button type="reset">Reset</button>  </form>  

Button может иметь контент

Основная причина для использования button это наличие открывающего и закрывающего тега button. Наличие открывающего и закрывающего тега дает нам возможность размещать внутри кнопки любые html-элементы. Часто можно увидеть следующую картину:

HTML

   <button>   <img src="hey_lol.png" alt="">   Отправить  </button>    

Для input этот смешанный контент было бы трудно осуществить (у input может быть <input type="image">).

Вы свободны расположить на кнопке сколь угодно контента (html-разметки), так же вы можете использовать псевдо-элементы.

Стоит отметить, что браузеры по-разному стилизуют (по умолчанию) элемент button


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

HTML

   <!DOCTYPE html>  <html>  <head>  <title>Сброс для тега button</title>  <style type="text/css">  button {   background: none; border: none; margin: 0;   padding: 0; font-size: 0; line-height: 0;   width: auto; overflow: visible;   }  button div { border: 1px solid; font-size: 12px;   line-height: 12px; }  </style>  </head>  <body>   <form>   <button type="submit">   <div>Hello</div>   </button>   </form>  </body>  </html>  

Давайте считать: “Если кнопка не имеет атрибута href, то это button”

HTML

   <a href="#0">   я любопытен и устал создавать такие кнопки  </a>  

Выше нет необходимости в href. 0 здесь лишь для того, чтобы не прыгать по странице, так как id не может начинаться с числа.

Скорее всего html-код, приведенный выше, делает следующее: по клику на элементе выполняется какое-либо действие javascript. Так или иначе, это лучше, чем использовать div


, так как вы получаете изменение курсора и стили по умолчанию.

Если вам не нравятся нагромождение href, то элемент button отличная альтернатива. Но, к сожалению, за пределами формы элемент button также становится бессмысленным.

HTML

   <button>   за пределами формы я бесполезен  </button>  

Что лучше использовать: элемент button или ссылку с фиктивным href?

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

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

Давайте вставим кнопку при помощи javascript

Кнопка будет создана и вставлена в документ при работающим javascript:

js

   // 1. Создаем button  var button = document.createElement("button");  button.innerHTML = "Do Something";    // 2. Вставляем куда-нибудь  var body = document.getElementsByTagName("body")[0];  body.appendChild(button);    // 3. Добавляем обработчик событию клик  button.addEventListener ("click", function() {   alert("did something");  });    

Когда ссылка предпочтительнее

Если есть хоть любой намек на наличие (использование) href следует использовать якорь (а уж тем более, когда href переопределяется javascript). Например, прогрессивное улучшение в лучших традициях:

  • Кнопка “search” вызывает действие ajax – но href можно указать на страницу /search/
  • Кнопка “опубликовать” запускает (строит) новую публикацию — но href можно указать на страницу /publish/
  • Миниатюра ведет на большое изображение – href может ссылаться на url большого изображения.

Проблемы с доступностью

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

Как вариант:

dnzl.ru

Значение и применение

HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = «button»).

Всегда указывайте для тега <button> тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег <button> внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент <input> для отправки HTML форм.

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


 <!DOCTYPE html> <html> 	<head> 		<title>Тег <button></title> 	</head> 	<body> 		<button type = "button" name = "button1" style = "width: 80px; height:50px;"> 			<b>Кнопка 1</b> 		</button><br><br> 		<button type = "button" name = "button2" style = "width: 80px; height:50px"> 			<img src = "../../images/top2.png" alt = "up" width = "40" height = "40"> 		</button><br><br> 		<button type = "button" name = "button3" style = "width: 80px; height:50px;"> 			<i>Кнопка 3</i> 		</button><br><br> 	</body> </html> 

В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:

  • Текст внутри первой кнопки мы отформатировали жирным начертанием (тег <b>). Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке.
  • Внутри второй кнопки элементом <img> мы разместили *.png изображение (с прозрачным задним фоном). Атрибутом alt мы задали альтернативный текст для изображения, для того случая если оно по каким-то причинам не будет загружено (обязательный атрибут), относительный путь к изображению мы задали атрибутом src (обязательный атрибут), атрибутами width (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях.
  • Текст внутри третьей кнопки мы отформатировали курсивным начертанием (тег <i>).

Результат нашего примера:

Пример использования тега <button> (кнопкa в HTML).
Пример использования тега <button> (кнопкa в HTML).

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

 <!DOCTYPE html> <html> 	<head> 		<title>Использование атрибутов formnovalidate и formtarget HTML тега <button></title> 	</head> 	<body> 		<form id = "myForm"> 			<input type = "text" name = "ulogin" placeholder = "Ваше имя"><br> <!-- определяем элемент управления для текстовой информации --> 			<textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос"></textarea><br> 			<button formtarget = _blank formnovalidate>Отправить</button> <!-- определяем кнопку для отправки формы --> 		</form> 	</body> </html> 

В данном примере внутри формы мы создали два элемента <input>, предназначенные для ввода текстовой информации и ввода пароля, и кнопку (HTML тег <button>), предназначенную для отправки формы (тип кнопки submit по умолчанию). Кроме того, атрибутом formtargethtml5 со значением «_blank» указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidatehtml5 указали, что проверка данных на корректность, введенных пользователем в форму не производится.

Результат нашего примера:

Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.
Пример использования атрибутов formnovalidate и formtarget HTML тега <button>.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 7 новых атрибутов.

Поддержка глобальных атрибутов

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

basicweb.ru

Просто для полноты картины я выложу альтернативное решение, которое включает в себя наиважнейшая theme_button (взято из this blog post)

Сначала добавьте атрибут buttontype к элементу формы:

 $form['submit'] = array (  '#type' => 'submit',   '#buttontype' => 'button',   '#value' => 'Search',  );  

И затем переопределить кнопку темы:

/**  * Override of theme_button().  *  * Render the button element as a button and the submit element as an input element.  */  function MYTHEME_button($ variables) {   $element =$ variables['element'];   $element['#attributes']['type'] = 'submit';    element_set_attributes($ element, array('id', 'name', 'value'));    $element['#attributes']['class'][] = 'form-' .$ element['#button_type'];   if (!empty( $element['#attributes']['disabled'])){$ element['#attributes']['class'][] = 'form-button-disabled';   }    if (isset( $element['#buttontype']) &&$ element['#buttontype'] == 'button') {   $value =$ element['#value'];   unset( $element['#attributes']['value']);   return '<button' . drupal_attributes($ element['#attributes']) . '>' . $value . '</button>';   }  else{   return '<input' . drupal_attributes($ element['#attributes']) . ' />';   }  }  

Это создает проблемы, однако, если в f есть еще одна кнопка orm, поскольку Drupal не может обнаружить, какая кнопка была нажата.

Эту проблему можно решить путем добавления #after_build обратного вызова в виде:

 $form['#after_build'][] = 'mymodule_force_triggering_element';  

, а затем в функции после сборки:

function mymodule_force_triggering_element($ form, & $form_state){   if (isset($ form_state['input']['submit'])) {   $form_state['triggering_element'] =$ form['submit'];   } elseif (isset( $form_state['input']['other_button'])){$ form_state['triggering_element'] = $form['other_button'];   }  return$ form;  }  

drupal.stackovernet.com

Вот альтернатива, если вы не уверены в использовании тега кнопки.

<form method="get" action="">   <input type="text" name="txt" />   <input type="hidden" name="myinput" value="myvalue" />   <input type="submit" name="submit" />  </form>  

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

<button name="mybutton" type="submit" value="one">Two</button>  

В некоторых браузерах у вас будет «один», в других — «Два».

Если вы хотите действовать условно в зависимости от конкретной нажатой кнопки, вы должны сделать это на основе текста на входе …

В этом примере текстового дисплея («Кнопка 1» или «Кнопка 2») будут отправлены назад.

Firefox: «TXT = & представить = Кнопка + 1» IE: «TXT = & представить = Кнопка + 1» Safari: «TXT = & представить = Кнопка + 1»

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

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

<form method="get" action="">   <input type="text" name="txt" />   <select name="myname">   <option value="A">A</option>   <option value="B">B</option>   </select>   <input type="submit" name="submit" value="Go" />  </form>  

UPDATE

Если вы хотите две кнопки для случая вы упоминаете в своем комментарии … есть одна кнопка на полпути вниз форму, чтобы обновить что-то основанное на суб-набор входов и еще одна кнопка внизу, чтобы отправить, вот как вы должны это делать …

1) Кнопки должны делать то же самое — просто отправьте форму.

2) Вы должны обнаружить серверную сторону, если у вас есть действительная форма (если они работают последовательно и попали в первый из двух отправлений, у вас будут пустые входы для второй половины формы — что делает ее недействительной).

3) Вы должны обнаружить серверную сторону, если у вас достаточно информации для выполнения расчета или обновления, о которых вы указали в своем комментарии.

В случаях 2 и 3 вы должны пометить поля, которые необходимы для продолжения пользователем.

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

stackoverrun.com

Создание кнопки очистки формы

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

Для создания кнопки очистки формы можно использовать элемент <input> или <button>. Их атрибуты type должны содержать значение reset. Как и в примерах с отправкой формы, элемент <button> может иметь произвольное содержимое, а чтобы изменить текст кнопки, созданной через <input>, используйте атрибут value.

 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Пример создания кнопок очистки формы</title>     </head>     <body>         <form>             <!-- обычная кнопка очистки формы -->             <input type="reset" value="Очистить">              <!-- кнопка содержащая изображение -->             <button type="reset">                 <img src="https://coder-booster.ru/images/main-logo.png"                     alt="Логотип сайта CoderBooster">             </button>         </form>     </body> </html>

Использование произвольных кнопок

HTML также позволяет создать любое количество произвольных кнопок. Они не имеют поведения по умолчанию. При нажатии ничего не происходит. Основной целью их существования является программная обработка взаимодействия с помощью JavaScript. Так программисты могут реализовать дополнительный функционал. Например, можно создать несколько кнопок, при нажатии по которым содержимое формы будет заполняться какими-либо предустановленными значениями.

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

 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Cоздание произвольных кнопок формы</title>     </head>     <body>         <form>             <!-- обычная произвольная кнопка формы -->             <input type="button" value="Произвести действие">              <!-- кнопка содержащая изображение -->             <button type="button">                 <img src="https://coder-booster.ru/images/main-logo.png"                     alt="Логотип сайта CoderBooster">             </button>         </form>     </body> </html>

coder-booster.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.