отзывы

Восстановление
пароля

Готово

Назад

Основы программирования
Успеха достигает тот, кто способен на время отодвинуть свои увлечения
Программист - профессия будущего!

<button>

  • 104

  • 0

  • Нравится

    0

  • Код:683256227210

создает на веб-странице кнопки
Задайте вопрос продавцу

<button>

грн. / шт.

Компания: Уроки программирования
Телефон: +38(093)43-03-164
Адрес: Киевская область г. Киев, с. Красное
Оставьте свой номер
<button>

грн. / шт.

Оставьте свой номер телефона и представитель компании с вами свяжется.

     Теоретически, тег <button> должен располагаться внутри формы

Тег <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 - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>
  <p style="text-align: center"><button>Кнопка с текстом</button>
  <button><img src="images/umbrella.gif" alt="Зонтик" 
          style="vertical-align: middle"> Кнопка с рисунком</button></p>
 </body>
</html>

 

Атрибуты

 

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" id="nameform">
    Имя: <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 можно задавать следующими способами:

1
2
3
<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 type="button">Нажми меня!</button>

 

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

 

Атрибуты

  • autofocus - Устанавливает, что кнопка получает фокус после загрузки страницы.
  • disabled - Блокирует доступ и изменение элемента.
  • form - Связывает между собой форму и кнопку.
  • formaction - Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
  • formenctype - Способ кодирования данных формы.
  • formmethod - Указывает метод пересылки данных формы.
  • formnovalidate - Отменяет проверку формы на корректность.
  • formtarget - Открывает результат отправки формы в новом окне или фрейме.
  • name - Определяет уникальное имя кнопки.
  • type - Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
  • value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Также для этого тега доступны универсальные атрибуты и события.

 

autofocus

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

Синтаксис

<button autofocus>...</button>

Значения

Нет.

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

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

 

disabled

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

orm

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

Синтаксис

<button form="<идентификатор>">...</button>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

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

Нет.

 

formaction

Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form>. Если одновременно указать action и formaction, то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction.

Синтаксис

 <button formaction="<адрес>">...</button>

Значения

Нет.

 

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form>.

Синтаксис

    <button formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain">
    ...
    </button>

Значения

  • application/x-www-form-urlencoded - Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя).
  • multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
  • text/plain - Пробелы заменяются знаком +, буквы и другие символы не кодируются.

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

  • application/x-www-form-urlencoded

 

formmethod

Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.

Синтаксис

<button formmethod="get | post">...</button>

Значения

Различают два метода — GET и POST.

  • GET - Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ &). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup. Объём данных в методе ограничен 4 Кб.
  • POST - Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

 

formnovalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required у элемента <input>.

Синтаксис

<button formnovalidate>...</button>

Значения

Нет.

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

По умолчанию этот атрибут выключен.

 

formtarget

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

Синтаксис

<button formtarget="<имя фрейма> | _blank | _self | _parent | _top">...</button>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.

  • _blank - Загружает страницу в новую вкладку браузера.
  • _self - Загружает страницу в текущую вкладку.
  • _parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
  • _top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.

 

name

Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.

Синтаксис

<button name="<имя>">...</button>

Значения

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

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

Нет.

 

type

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

Синтаксис

<button type="button | reset | submit">...</button>

Значения

  • button - Обычная кнопка.
  • reset - Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
  • submit - Кнопка для отправки данных формы на сервер.
  • menu - Открывает меню, созданное с помощью элемента <menu>.

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

  • submit

 

value

Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <button>, а значение — атрибутом value. Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.

Синтаксис

<button value="<текст>">...</button>

Значения

Любая текстовая строка.

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

Нет.


 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>BUTTON</title>
    </head>
    <body>
        <p style="text-align: center">
            <button>Кнопка с текстом</button>
            <button>
                <img src="image/umbrella.gif" alt="Зонтик" style="vertical-align: middle">
                Кнопка с рисунком
            </button>
        </p>
    </body>
</html>

Отзывов нет

Публикация отзыва производится после предварительной модерации

Отправить

Случайные статьи