Html button примеры. Когда следует использовать элемент Button

24.06.2019 Обзоры

Описание

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

Кнопка находится вне элемента form, но является частью формы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Name: Указывает имя для элемента

Примечание: некоторые элементы

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

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

Примечание: если вы используете элемент . В то время как другие браузеры будут отправлять содержимое атрибута value.

Тег

Закрывающий тег обязателен.

WAI ARIA

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

Допустимые значения role:

checkbox
link
menuitem
menuitemcheckbox
menuitemradio
option
radio
switch

Атрибуты

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

autofocus

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

Синтаксис

Значения

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

disabled

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

Синтаксис

Значения

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

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

form

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

, например, при создании её программно.

Синтаксис

Значения

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

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

formaction

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

Синтаксис

Значения

formenctype

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

Синтаксис

Значения

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

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

application/x-www-form-urlencoded

formmethod

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

Синтаксис

Значения

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

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

formnovalidate

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

Синтаксис

Значения

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

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

formtarget

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

Синтаксис

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.</p> <ul><li>_blank - Загружает страницу в <a href="/vkladki-gde-oni-otkryvat-novye-vkladki-okna-v-brauzerah-i-zakryvat.html">новую вкладку</a> браузера.</li> <li>_self - Загружает страницу в текущую вкладку.</li> <li>_parent - Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self .</li> <li>_top - Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .</li> </ul><h3>name</h3> <p>Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.</p> <p><b>Синтаксис </b></p><p> <button name="<имя>">...</button> </p><p><b>Значения </b></p> <p>В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .</p> <p><b>Значение по умолчанию </b></p> <h3>type</h3> <p>Определяет тип кнопки, который устанавливает её поведение в форме. По <a href="/mozhno-li-ispolzovat-linux-v-ofise-ne-narushaya-zakon-lichnyi-opyt-vneshnii-vid.html">внешнему виду</a> кнопки <a href="/ctilnyi-dolgozhitel-podrobnyi-obzor-lenovo-p2-apparatnaya-platforma-proizvoditelnost-bluetoo.html">разного типа</a> никак не различаются, но у каждой такой кнопки свои функции.</p> <p><b>Синтаксис </b></p><p> <button type="button | reset | submit">...</button> </p><p><b>Значения </b></p> <ul><li>button - Обычная кнопка.</li> <li>reset - Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.</li> <li>submit - Кнопка для отправки данных формы на сервер.</li> <li>menu - Открывает меню, созданное с помощью элемента <menu> .</li> </ul><p><b>Значение по умолчанию </b></p> <ul><li>submit</li> </ul><h3>value</h3> <p>Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента <button> , а значение - атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.</p> <p><b>Синтаксис </b></p><p> <button value="<текст>">...</button> </p><p><b>Значения </b></p> <p>Любая текстовая строка.</p> <p><b>Значение по умолчанию </b></p> <h2>Спецификации</h2> <h2>Примеры</h2> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>BUTTON</title> </head> <body> <p style="text-align: center"> <button>Кнопка с текстом</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy> Кнопка с рисунком </button> </p> </body> </html> <p>Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.</p><p>Кнопки на веб-странице можно создать несколькими способами - с помощью элемента <input> или элемента <button> .</p><p>Рассмотрим вначале добавление кнопки через <input> и его синтаксис.</p><p> <input type="button" value="Текст"> </p><p>Атрибуты кнопки перечислены в табл. 1.</p><p>Создание кнопки показано в примере 1.</p><p>Пример 1. Добавление кнопки</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input type="button" value=" Нажми меня нежно "></p> </form> </body> </html> </p><p>Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от <a href="/pravila-oformleniya-teksta-postranichnoi-snoski-dobavlenie.html">обычного текста</a> HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.</p><p>Рис. 1. Вид кнопки</p><p>Для таких кнопок есть ряд <a href="/ot-24-fevralya-goda-no-128-ob-utverzhdenii-pravil-provedeniya.html">обязательных правил</a>:</p><ul><li><input> <a> ;</li><li><input> нельзя вкладывать внутрь кнопки <button> ;</li><li>значение атрибута value не может быть пустым.</li> </ul><p>Второй способ создания кнопки основан на использовании элемента <button> . Он по своему действию напоминает результат, получаемый с помощью <input> . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button> .</p><p><img src='https://i1.wp.com/webref.ru/assets/images/html5-css3/form-button-02.png' width="100%" loading=lazy></p><p>Рис. 2. Кнопки, созданные с помощью <button></p><p>Синтаксис создания такой кнопки следующий.</p><p> <button>Надпись на кнопке</button> </p><p>Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то <img> добавляется внутрь <button> , как показано в примере 2.</p><p>Пример 2. Рисунок на кнопке</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><button>Кнопка с текстом</button> <button> <img src='https://i2.wp.com/image/umbrella.gif' loading=lazy> Кнопка с рисунком </button></p> </form> </body> </html> </p><p>В данном примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого <button> , но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input> , ширину кнопки изменить не удастся.</p><p>Для <button> также есть ряд ограничений:</p><ul><li><button> нельзя вкладывать внутрь ссылки <a> ;</li><li>один <button> нельзя вкладывать внутрь другого.</li> </ul><h2>Кнопка Submit</h2><p>Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента <form> . Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.</p><p>Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button> .</p><p> <input type="submit"> <button type="submit">Надпись на кнопке</button> </p><p>Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE - «Подача запроса», Opera и Chrome - «Отправить». Сам текст надписи никак на функционал кнопки не влияет.</p><p>Пример 3. Отправка данных на сервер</p><p> <!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> </p><h2>Кнопка Reset</h2><p>При нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям. Как правило, эту кнопку применяют для очистки введённой в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на неё не нажать, ведь тогда придётся заполнять форму заново.</p><p>Синтаксис создания указанной кнопки прост и похож на другие кнопки.</p><p> <input type="reset"> <button type="reset">Надпись на кнопке</button> </p><p>В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента <input> . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».</p> HTML теги <h2>Значение и применение</h2> <p>HTML тег <button> используется для размещения кнопки. Внутри тега <button> вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега <input> (c атрибутом type = "button" ).</p> <p>Всегда указывайте для тега <button> тип атрибута type = "button" если элемент используется в качестве <a href="/dlya-chego-nuzhna-knopka-na-selfi-palke-obychnaya-palochka-dlya-selfi-kak.html">обычной кнопки</a>. Если вы используете тег <button> внутри <a href="/kak-sozdat-formy-html-sozdanie-form-v-html-primer-ispolzovanie.html">HTML формы</a>, то вы можете столкнуться с тем, что старые версии браузеров могут представить <a href="/peredacha-informacii-mozhet-proizvoditsya-razlichnymi.html">различные значения</a> при отправке формы. <b>Рекомендуется в этом случае использовать элемент <input> для <a href="/onlain-zayavka-s-otpravkoi-na-pochtu-html-sozdaem-formu-obratnoi-svyazi-na.html">отправки HTML</a> форм. </b></p> <h2>Поддержка браузерами</h2> <table class="tableTag"><tr><th class="tw">Тег </th><th></th><th></th><th><br>Opera </th><th></th><th><br>IExplorer </th><th><br>Edge </th> </tr><tr><td><button> </td><td class="tyes">Да </td><td class="tyes">Да </td><td class="tyes">Да </td><td class="tyes">Да </td><td class="tyes">Да </td><td class="tyes">Да </td> </tr></table><h2>Атрибуты</h2> <table class="tableTag"><tr><th>Атрибут </th><th>Значение </th><th class="tatt">Описание </th> </tr><tr><td> </td><td>autofocus </td><td>Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы. </td> </tr><tr><td>disabled </td><td>disabled </td><td>Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). </td> </tr><tr><td> </td><td>form_id </td><td>Задает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы () в этом же документе. </td> </tr><tr><td> </td><td>URL </td><td>Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button <span>type = "submit" > </span>). </td> </tr><tr><td> </td><td><span>application/x-www-form-urlencoded<br>multipart/form-data<br>text/plain </span> </td><td>Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button <span>type = "submit" > </span>). </td> </tr><tr><td> </td><td>get<br>post </td><td>Определяет, какой метод HTTP использовать при отправке данных формы (только для <button <span>type = "submit" > </span>). </td> </tr><tr><td> </td><td>formnovalidate </td><td>Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button <span>type = "submit" > </span>). </td> </tr><tr><td> </td><td><span>_blank<br>_self<br>_parent<br>_top<br>framename </span> </td><td>Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self - отображает ответ в текущем окне. Используется только для <button <span>type = "submit" > </span>. </td> </tr><tr><td>name </td><td>name </td><td>Задает имя для кнопки, которое передается при отправке формы. </td> </tr><tr><td>type </td><td>button<br>reset<br>submit </td><td>Указывает тип кнопки. <b>Значение по умолчанию <b>submit . </b> </b> </td> </tr><tr><td>value </td><td>text </td><td>Определяет <a href="/tipy-dannyh-v-yazyke-java-celye-tipy-peremennyh-nachalnye-znacheniya-peremennyh.html">начальное значение</a> для кнопки. </td> </tr></table><h2>Пример использования</h2> <span><!DOCTYPE html> <html> <head> <title> </span>Тег <button><span></title> </head> <body> <button type = "button" name = "button1" style = "width: 80px; height:50px;" > <b> </span>Кнопка 1<span></b> </button><br><br> <button type = "button" name = "button2" style = "width: 80px; height:50px" > <img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy> </button><br><br> <button type = "button" name = "button3" style = "width: 80px; height:50px;" > <i> </span>Кнопка 3<span></i> </button><br><br> </body> </html> </span> <p>В <a href="/abstraktnyi-tip-dannyh-c-primer-abstraktnyi-tip-dannyh-derevo.html">данном примере</a> мы разместили <i>3 кнопки </i>, которым задали уникальные имена атрибутом name и с использованием <a href="/vnutrennie-teni-v-css.html">внутренних CSS</a> стилей указали ширину (<i>width </i>) размером 80 пикселей и высоту (<i>height </i>) размером 50 пикселей:</p> <ul><li>Текст внутри <i>первой кнопки </i> мы отформатировали <a href="/kak-sdelat-slovo-zhirnym-v-html-nachertanie-ispolzovanie-neskolkih.html">жирным начертанием</a> (тег <b>). <b>Обратите внимание, что текст, который мы поместили внутри тега отображается на самой кнопке. </b></li> <li>Внутри <i>второй кнопки </i> элементом <img> мы разместили <i>*.png </i> изображение (с прозрачным <a href="/kak-sdelat-v-fotoshope-temnyi-zadnii-fon-kak-sdelat-chernyi.html">задним фоном</a>). <a href="/atribut-alt-tega-img-kak-propisat-atribut-alt-k-kartinke-pravilno.html">Атрибутом alt</a> мы задали <a href="/vstavka-svg-v-css-dobavlyaem-svg-na-stranicu-s-pomoshchyu-tega-grafika-i-alternativnyi-tekst.html">альтернативный текст</a> для изображения, для того случая если оно по каким-то причинам не будет загружено (<a href="/raznye-nazvaniya-dlya-kanala-na-yutube-klyuchevoe-slovo---obyazatelnyi.html">обязательный атрибут</a>), <a href="/absolyutnye-i-otnositelnye-ssylki-absolyutnyi-i-otnositelnyi-put-k.html">относительный путь</a> к изображению мы задали атрибутом src (обязательный атрибут), <a href="/kak-izmenit-temu-wordpress-veb-inspektor-ispolzovanie-atributov-podobnyh-width-i.html">атрибутами width</a> (ширина) и height (высота) задали размеры изображения равными 40 на 40 пикселей. Обратите внимание, что в атрибутах, которые задают размер не требуется указывать единицы измерения в отличии от CSS стилей, по той причине, что атрибутами можно указать значение только в пикселях. </li> <li>Текст внутри <i>третьей кнопки </i> мы отформатировали курсивным начертанием (тег <i>).</li> </ul><p>Результат нашего примера:</p> <p>В <a href="/vnutrennyaya-perelinkovka-stranic-primery-kogda-sleduet-delat.html">следующем примере</a> рассмотрено применение атрибутов, которые позволяют не производить проверку данных на корректность, введенных пользователем и задать браузеру, где показать ответ, полученный после отправки формы.</p> <span><!DOCTYPE html> <html> <head> </span> <title> Использование атрибутов formnovalidate и formtarget HTML тега <button><span></title> </head> <body> <form id = "myForm" > </span> <input <span>type = "text" name = "ulogin" placeholder = "Ваше имя" ><br> <span> </span> <textarea name = "uquestion" cols = "35" rows = "5" placeholder = "Ваш вопрос" ></textarea><br> <button formtarget = _blank formnovalidate > </span>Отправить<span></button> <span> </span> </form> </body> </html> </span> <p>В данном примере внутри формы мы создали два элемента</p> <p>Инструкция</p> <p>Использование дескриптора <input> добавляет на страницу кнопку с именем name и значением value. <a href="/atributy-name-i-id-raznica-mezhdu-atributami-id-i-name-v-html.html">Атрибут name</a> задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:</p><p><form><br><input type = “button” name = “имя” value = “Отправка”><br></form></p><p>Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.</p> <p>Дескриптор <button> создает аналогичный <input> элемент, однако предлагает для использования множество <a href="/sistemnye-nastroiki-windows-10-sozdanie-yarlyka-dlya-dopolnitelnyh.html">дополнительных параметров</a>, которые могут понадобиться веб-разработчику. Так, поверх <button> можно наложить таблицу или изображение, форматированный текст или список. Например:</p><p><button form = “id формы” formaction = “адрес” formmethod = “метод пересылки данных” name = “имя” type = “тип” value = “значение”><img src='/html-button-primery-kogda-sleduet-ispolzovat-element.html' loading=lazy><b>Текст</b></button></p> <p>Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с <a href="/chto-takoe-uchetnaya-zapis-dlya-skaipa-vozmozhnosti-uchetnoi-zapisi-maikrosoft.html">указанным адресом</a> и текст.</p> <p>Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:</p><p><input type = “submit”></p><p>Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.</p> <p>Обратите внимание</p> <p>Дескриптор <input> должен обязательно использоваться в качестве содержимого тега <form>. Кнопка <button> может быть отображена и вне формы, однако для обработки данных и выполнения определенного действия она также должна быть заключена между <form></form>.</p> <p>Чтобы организовать взаимодействие сайта с посетителем в его страницах надо предусмотреть возможности для ввода информации и отправки ее на сервер. Для этого в языке описания <a href="/kak-sozdat-veb-stranicu-v-html-kak-sozdat-pervuyu-web-html-stranicu.html">веб-страниц HTML</a> (HyperText <a href="/programmy-podderzhivayushchie-mathml-kursovaya-rabota-mathml-mathematical-markup-language.html">Markup Language</a> - «язык разметки гипертекста») предусмотрен специальный набор тегов. Что это за теги и как, пользуясь ними создать в странице веб-<b>форму </b> для заполнения посетителем?</p> <p>Вам понадобится</p> <ul><li>Базовое знание языка HTML</li> </ul><p>Инструкция</p> <p>HTML-теги, которые сообщают браузеру, что в этом месте страницы необходимо отобразить <b>форму </b> и ее элементы, размещаются в коде между открывающим тегом <.form> и закрывающим <./form>. Открывающий тег должен содержать <a href="/vyshlo-prilozhenie-twitch-desktop-app-brauzer-bolshe-ne-obyazatelen-demonstraciya.html">обязательную информацию</a> - атрибуты, сообщающие куда именно надо отправить информацию из формы и каким методом нужно это сделать. Кроме того, если страница содержит больше одной формы, то каждая должна иметь собственное имя. С учетом всего этого открывающий тег может выглядеть так:<form name="thisFormName" method="POST" action=">Здесь атрибут "name" - имя формы, атрибут "method" задает способ отправки (возможны методы POST либо GET), а атрибут "action" должен указывать URL скрипта на сервере, которому надо отправить данные из формы. Если адрес не указывать, то данные будут переданы на URL этой же самой страницы. Как правило, такие интерактивные страницы формируются универсальными скриптами, которые обеспечивают и получение / обработку данных из этой же самой страницы.</p> <p>После открывающего тега формы нам следует разместить элементы формы, которые больше подходят для ввода пользователем нужного типа данных. Такими элементами могут быть:Текстовое поле ввода:<input name="textField" type="text" value="Это текстовое поле" />Здесь, как и во всех остальных тегах "input", атрибут "type" задает тип элемента, "name" - имя , которое будет отправлено вместе с введенными в это поле данными, а "value" - это значение по умолчанию, которым будет заполнено тестовое поле ввода. --Поле :<input name="passField" type="password" />--Поле для «метки с галочкой»:<input name="checkBox" type="checkbox" value="1" checked="checked" />Здесь наличие атрибута "checked" , что по умолчанию галочка там будет стоять.--Группа переключателей, из которых нужно выбрать только один:<input name="radioBox" type="radio" value="0" checked="checked" /><br><input name="radioBox" type="radio" value="1" />Обратите внимание - у всех элементов группы должно быть одинаковое имя (name), но разные значения (value). На будет передано только одно значение - то, которое отметит посетитель или то, что было выбрано по умолчанию (атрибутом checked).--Выпадающий список:<select name="selectField"><br> <option value="value1">Поле первое</option><br> <option value="value2" selected="selected">Поле второе</option><br> <option value="value3">Поле третье</option><br></select>Здесь каждый тег "option" - в выпадающем списке. Как и для группы переключателей будет передано только одно значение из поля, выбранного посетителем, либо выбранного по умолчанию (здесь - атрибутом selected).--Многострочное текстовое поле:<textarea name="textRows" cols="50" rows="5">Здесь многострочный </textarea>Атрибуты "cols" и "rows" задают ширину (в знаках) и высоту (в строках) поля для ввода текста.--Скрытое поле:<input name="hiddenField" type="hidden" value="Скрытое поле" />Это поле не будет видно заполняющему <b>форму </b>, но тоже будет отправлено вместе с остальными данными.--Поле выбора файла для отправки:<input name="fileField" type="file" />Отправка файла требует, чтобы в открывающем <b>форму </b> теге были дополнительные атрибуты. Как минимум, следует добавить тег "enctype". Например, так:<form name="thisFormName" method="POST" enctype="multipart/form-data" action=">--Кроме этого в <b>форму </b> можно поместить кнопки - для очистки введенных в <b>форму </b> данных:<input name="resetButton" type="reset" value="Очистить" />и для отправки заполненной формы на сервер:<input name="submitButton" type="submit" value="Отправить" />Значение, указанное в атрибуте "value" для кнопок - это надпись на самой кнопке.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Лучшие статьи по теме</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="/kak-povernut-kartinku-na-neskolko-gradusov-v-painte-paint.html"> <div class="img_container"><img src="/uploads/2ddc9ea8728779f70a30859e2dbc9bf0.jpg" border="0" alt="Как повернуть изображение в ворде и еще несколько приемов стилизации Отражение картинки «зеркально»" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Как повернуть изображение в ворде и еще несколько приемов стилизации Отражение картинки «зеркально»</span> </a> </div> <div class="theme-post col-sm-4"> <a href="/windows-10-russkaya-ili-angliiskaya-ustanovka-yazyka-po-umolchaniyu.html"> <div class="img_container"><img src="/uploads/343a20d083eee7b586156912c8f0efe3.jpg" border="0" alt="Установка языка по умолчанию" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Установка языка по умолчанию</span> </a> </div> <div class="theme-post col-sm-4"> <a href="/preobrazovanie-tekstovogo-faila-v-excel-import-dannyh-v-excel-iz-tekstovogo.html"> <div class="img_container"><img src="/uploads/67b5d2ac136e808a1ade6330daa98629.jpg" border="0" alt="Импорт данных в Excel из текстового файла" width="320" height="180" / loading=lazy></div> <span class="theme-post-link">Импорт данных в Excel из текстового файла</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Категории:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="/category/programs/">Программы</a></li> <li class=""><a href="/category/safety/">Безопасность</a></li> <li class=""><a href="/category/windows-10/">Windows 10</a></li> <li class=""><a href="/category/iron/">Железо</a></li> <li class=""><a href="/category/windows-8/">Windows 8</a></li> <li class=""><a href="/category/vkontakte/">Вконтакте</a></li> <li class=""><a href="/category/errors/">Ошибки</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="https://vk.com/share.php?url=https://bumotors.ru/html-button-primery-kogda-sleduet-ispolzovat-element.html" class="vk social-ico"></a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/html-button-primery-kogda-sleduet-ispolzovat-element.html" class="fb social-ico"></a> <a href="https://www.twitter.com/share?url=https://bumotors.ru/html-button-primery-kogda-sleduet-ispolzovat-element.html" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12"> © 2024 bumotors.ru. Как настроить смартфоны и ПК. Информационный портал. </span> </div> </div> </div> </div> </body> </html>