Кнопка в html: Атрибут form | htmlbook.ru

07.05.2021 alexxlab

Содержание

Тег | 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>

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

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

HTML теги

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

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

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

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

Атрибуты

Атрибут	Значение	Описание
autofocus	autofocus	Логический атрибут, который указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
disabled	disabled	Является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем).
form	form_id	Задает форму (элемент <form>) к которой кнопка принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.
formaction	URL	Указывает URL файла, который будет обрабатывать (контролировать) входную информацию после отправки формы (только для <button type = «submit» >).
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет, как данные формы должны быть закодированы при передаче на сервер (только для <button type = «submit» >).
formmethod	get post	Определяет, какой метод HTTP использовать при отправке данных формы (только для <button type = «submit» >).
formnovalidate	formnovalidate	Указывает, что проверка данных на корректность, введенных пользователем в форму не производится (только для <button type = «submit» >).
formtarget	_blank _self _parent _top framename	Задаёт браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне. Используется только для <button type = «submit» >.
name	name	Задает имя для кнопки, которое передается при отправке формы.
type	button reset submit	Указывает тип кнопки. Значение по умолчанию submit.
value	text	Определяет начальное значение для кнопки.

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

<!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).

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

<!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 по умолчанию). Кроме того, атрибутом formtarget со значением «_blank» указали, что при передаче формы ответ будет отображен в новой вкладке, а логическим атрибутом formnovalidate указали, что проверка данных на корректность, введенных пользователем в форму не производится.

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

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

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

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

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

Нет.

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

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

Атрибуты событий

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

Ссылки против кнопок в современных веб-приложениях — CSS-LIVE

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Кнопки

Почему-то люди становятся веб-разработчиками,так и не узнав про HTML-элемент <button>. (Мне и самой потребовалось несколько лет, пока я узнала, для чего нужны заголовки h2-h6, так что бывает). Могучая кнопка и правда крутая. Вот что она может делать:

Получать фокус с клавиатуры по умолчанию
Делать «клик» по нажатию на пробел
Отправлять данные формы на сервер
Очищать форму
Блокироваться с помощью атрибута disabled
Давать подсказку скринридеру с помощью неявного атрибута role="button"
Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить немного скрипта,кнопка идеальный элемент для:

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

Ссылки

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

Создавать гипертекст, сеть онлайн-ресурсов
Перевести пользователя на новую страницу или окно
Изменять URL
Вызвать браузерные перерисовку/перезагрузку
Переходить по якорям внутри страницы
Связывать между собой разные части приложения с отрисовкой на клиенте
Способны принимать фокус по умолчанию с помощью атрибута href
Регистрируют клик с помощью клавиши Enter
Имеют неявную роль link
Не блокируются как кнопки, но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true"
Могут открываться в новых окнах (а раньше — и во фреймах)
Показывать состояния ∶link, ∶visited, ∶focus, ∶hover, ∶active

Лично для меня самое главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственная загвоздка здесь). Кнопка переключает что-то в интерфейсе, например, видео-плеер, или вызывает новый контент в том же самом контексте, например, всплывающее меню, использующее aria-haspopup.

Что такое навигация? А что маршрутизация?

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

Подобно сортировке писем на почте, маршрутизация — механизм для подключения сетевых запросов с соответствующим контентом в приложении. Маршрутизаторы — общая технология для множества разных веб-фреймворков (помню, как на заре своей карьеры я балдела от PHPшных), ставящая в соответствие представления и их части определенным фрагментам URL. Благодаря написанию динамических маршрутов, новый контент можно создавать динамически (без хардкода)

Откуда возникает путаница?

В мире клиентских веб-приложений построенных с помощью Angular, Ember или React, браузерная перерисовка может вызваться в любой момент. Немного неясно, какой элемент лучше подходит для дела, когда вы можете выполнять тот же код, что для маршрута, но с обработчиком клика кнопки и без изменения URL. К примеру, если я открываю панель над существующим контентом страницы, я перехожу сюда или переключаю интерфейс? Зависит ли это от того, есть ли у этой панели свой собственный URL? Вот код, который я видела недавно:

<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>

По первому впечатлению я посчитала, что это надо заменить на элемент button, поскольку нет значения в href, но есть tabindex="0" и привязка обработчика ng-click. Выглядит очевидно, да? Мне сказали, что он должен оставаться якорем, поскольку «он перенаправляет на внешние ссылки и страницу профиля». Это стало ясно только после изучения JavaScript-кода, который вызывается во многих подобных местах по привязке обработчика ng-click на элементе button. Неужели обязательно надо так глубоко копать, чтобы помочь выбрать правильный элемент?

Если в чисто клиентском приложении фокус обрабатывается правильно, это может не сказаться на пользователе — у ссылки ng-click и tabindex останется по-прежнему неявная роль ссылки. Однако,при декларативном подходе намного лучше было бы использовать заполненный href и маршрутизацию, если якорь перенаправляет пользователя на новый ресурс. Tabindex и события click, привязанные к тегу ссылки — антипатерн разметки, который еще аукнется тем, кто позднее будет писать код и проверять его.

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

Роль UX в разработке доступных приложений

Я скажу это вслух: эта путаница часто начинается с дизайна и UX. Компонент дизайна приходит к нам с прямоугольными кнопками интерфейса, и — потому что так надо — в коде они должны быть ссылками. Где это становится проблемой?

Если пользователь скринридера обратится в техподдержку и получит инструкцию «кликнуть на кнопку» в вашем UI, которая на самом деле написана в коде как ссылка, для него может оказаться проблемой найти ее. Не забывайте и о голосовых интерфейсах: если вы произнесёте команду кликнуть на кнопку, которая в коде похожа на ссылку, вы столкнетесь с проблемами, нет?

Фреймворки, по общему признанию, стирают эту грань и только способствуют выбору неправильного элемента, как в примере с ng-click выше. Можно использовать JavaScript для запуска асинхронной отправки формы на нужном нам элементе (даже без тега <form>, но это еще не повод от него отказываться). Аналогично, можно инициировать изменения представления без маршрутизации, даже если их лучше всего обрабатывать с помощью ссылки. Одни элементы подходят в одном случае, другие — в другом: всё дело в том, чтобы использовать нативные возможности этого элемента по максимуму.

Заметили разницу?

Что можно для этого сделать?

Вернитесь к дизайну и сделайте ссылки похожими на ссылки, а кнопки — на кнопки. Без двусмысленности разработчикам станет легче писать более доступный код, лучше отвечающий ожиданиям пользователей. (Можно ли кликнуть правой кнопкой мыши на эту квадратную кнопку, чтобы открыть в новом окне?)

В разработке:

Если пользователь скринридера перейдет табом на интерактивный элемент, подскажет ли роль этого элемента, чего от него ждать? (Уводит ли он куда-то с текущей страницы? Об этом хорошо бы узнать заранее.)
Отключаете ссылочные фичи типа смены URL или правого клика? Подумайте о кнопке.
Поддерживайте маршрутизацию в вашем приложении с помощью href, ng-href, и так далее.
Навигация по страницам заслуживает изменения заголовка и истории.

Это ещё не конец.

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

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

P.S. Это тоже может быть интересно:

PHP: PHP и HTML — Manual

The scenario:

1. There is a php script which (possibly complemented by a direct written HTML code) consrtucts a HTML page via its echo command, based on whatever algoritmus eventually based on supplementary data from server files or databases.

2. This php script leads to data being saved into string variable(s), which (possibly) can contain arbitrary characters, including control codes (newline, tab…), HTML special characters (&,<…) and non-ASCII (international) characters.

3. These non-ASCII characters are UTF-8 encoded, as well as the HTML page (I do highly recommend) *)

4. The values of these PHP string variables have to be transferred into javascript variables for further processing by javascript (or exposing these values in HTML directly)

The problem:

it is not safe to PHP-echo such variables into HTML (javascript) directly, because some of characters possily contained in them cause malfunction of the HTML. These strings need some encoding/escaping in order to become strings of non-conflicting characters

The solution

There may be a big lot of ways of this encoding. The following one seems to me the easiest one:
The PHP variable with unpredictable value can originate from some file, as an example (or from user input as well):

$variable=file_get_content(…)

1. Convert all bytes of that string into hex values and prepend all hex-digit-pairs with %

$variable_e=preg_replace(«/(..)/»,»%$1″,bin2hex($variable))

The new variable is now guarantied to contain only %1234567890abcdefABCDEF chracters (e.g. %61%63%0a…) and can safely be directly echoed into HTML:

var variable=»<?php echo $variable_e;?>» //that’s NOT all folks

But now the value is still encoded. To get the original value of the variable, it has te be decoded: *)

var variable=decodeURIComponent(«<?php echo $variable_e;?>»)

The value of the variable is now the same as the original value.

*) I have no idea about non-UTF-8 encoded pages/data, espetially how the decodeURIComponent works in such a case, because i have no reason to use other encodings and handle them as highly deprecatad.

WARNING: this approach is not (generally) safe against code injection. I highly recommend some further check (parsing) of the value depending on the particular case.

P.S. For very large amount of data, I would recomment to save them into file on the PHP side (file_put_content) and read them by javascript via HTTP Request.

I use this approach as it needs one line of code on server as well as client side. I do agree with arguement that not all chaeacters have to be encoded.

Do not enjoy my possibly stupid solution, if you have a better idea

murphy

Тег кнопки HTML — использование, атрибуты, примеры

Тег ) тегами.

Пример HTML-тега

Попробуйте сами »

Использование стилей CSS¶

Вы можете применить стили CSS к тегу <час /> Кнопка с красным текстом <час /> Кнопка с увеличенным размером шрифта Попробуйте сами »

Результат¶

Атрибуты¶

Тег <КНОПКА name = "reset" type = "reset"> Сбросить

Напомним, что авторы должны предоставить альтернативный текст для Элемент IMG .

Незаконно связать карту изображения с IMG , который отображается как содержимое КНОПКА элемент.

НЕЗАКОННЫЙ ПРИМЕР:
Следующее ниже не является допустимым HTML.

<КНОПКА>

Начальный тег: требуется , Конечный тег: требуется

SELECT Определения атрибутов

имя = cdata [CI]: Этот атрибут назначает имя элемента управления.
размер = номер [CN]: Если Элемент SELECT представлен в виде прокручиваемого списка, этот атрибут указывает количество строк в списке, которые должны быть видны одновременно время.Визуальные пользовательские агенты не обязаны представлять SELECT элемент в виде списка; они могут использовать любой другой механизм, например раскрывающийся список меню.
кратное [CI]: Если установлено, этот логический атрибут допускает множественный выбор. Если не установлен, Элемент SELECT допускает только одиночный выбор.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
отключено (отключено управление вводом)
tabindex (навигация с вкладками)
onclick , ondblclick , onmousedown , onmouseup , на мышке над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент SELECT создает меню.Каждый выбор Предлагаемое меню представлено элементом OPTION . A ВЫБРАТЬ Элемент должен содержать хотя бы один элемент OPTION .

Элемент OPTGROUP позволяет авторам группировать варианты выбора логически. Это особенно полезно, когда пользователь должен выбирать из длинного список опций; группы связанных вариантов легче понять и запомнить чем один длинный список вариантов. В HTML 4 все Элементы OPTGROUP должны быть указаны непосредственно в SELECT элемент (я.е., группы не могут быть вложенными).

17.6.1 Предварительно выбрано варианты

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

Если нет Элемент OPTION имеет набор атрибутов selected , пользовательский агент поведение при выборе изначально выбранной опции не определено. Примечание. Поскольку существующие реализации обрабатывают этот случай иначе, текущая спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.3), в котором говорится:
В исходном состоянии выбран первый вариант, если не ВЫБРАН Атрибут присутствует в любом из элементов
Поскольку поведение пользовательских агентов различается, авторы должны убедиться, что каждое меню включает предварительно выбранный по умолчанию ОПЦИЯ .
Если один В элементе OPTION установлен атрибут selected , он должен быть предварительно выбранный.
Если Элемент SELECT имеет набор атрибутов , несколько атрибутов и более один В элементе OPTION установлен атрибут selected , все они должны быть предварительно выбранным.
Считается ошибкой, если более одного элемента OPTION имеют selected установлен атрибут, а элемент SELECT не имеет набор нескольких атрибутов . Пользовательские агенты могут различаться в том, как они справляются с этим. ошибка, но не следует предварительно выбирать более одного варианта.

Начальный тег: требуется , Конечный тег: требуется

OPTGROUP Определения атрибутов

этикетка = текст [CS]: Этот атрибут определяет метку для группы опций.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
отключено (отключено управление вводом)
onclick , ondblclick , onmousedown , onmouseup , на мышке над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Примечание. Разработчикам рекомендуется, чтобы будущие версии HTML может расширить механизм группировки, чтобы разрешить вложенные группы (например, Элементы OPTGROUP могут вкладываться). Это позволит авторам представлять более богатая иерархия выбора.

Начальный тег: требуется , Конечный тег: опционально

ОПЦИЯ Определения атрибутов

выбран [CI]: Если установлено, этот логический атрибут указывает, что эта опция предварительно выбранный.
значение = cdata [CS]: Этот атрибут определяет начальное значение контроль. Если этот атрибут не установлен, начальный value устанавливается равным содержимому элемента OPTION .
этикетка = текст [CS]: Этот атрибут позволяет авторам указывать более короткую метку для параметра, чем содержимое элемента OPTION . Если указано, пользовательские агенты должны использовать значение этого атрибута, а не содержимое ОПЦИЯ элемент в качестве метки опции.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
отключено (отключено управление вводом)
onclick , ondblclick , onmousedown , onmouseup , на мышке над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

При отображении выбора меню пользовательские агенты должны использовать значение метки атрибута ОПЦИИ элемент как выбор.Если этот атрибут не указан, пользовательские агенты должны используйте содержимое элемента OPTION .

Ярлык Атрибут элемента Элемент OPTGROUP определяет метку для группы вариантов.

В этом примере мы создаем меню, которое позволяет пользователю выбрать, какой из семь программных компонентов для установки. Первый и второй компоненты: предварительно выбран, но может быть отменен пользователем. Остальные компоненты не выбрано заранее. В Размер Атрибут указывает, что меню должно иметь только 4 строки, даже если пользователь может выбрать один из 7 вариантов.Остальные параметры должны быть доступны через механизм прокрутки.

SELECT сопровождается кнопками подтверждения и сброса.

Только выбранные варианты будут успешными (используя имя элемента управления «выбор компонента»). Когда никакие параметры не выбраны, элемент управления не работает, и ни имя, ни любые значения отправляются на сервер при отправке формы. Обратите внимание, что где установлен атрибут значение , он определяет начальное значение, иначе это элемент содержание.

В этом примере мы используем элемент OPTGROUP для группировки вариантов. В следующая разметка:

представляет следующую группу:

  Никто
  PortMaster 3
      3.7.1
      3,7
      3.5
  PortMaster 2
      3,7
      3.5
  IRX
      3,7R
      3.5R

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

Графический пользовательский агент может отображать это как:

На этом изображении показан элемент SELECT , отображаемый в виде каскадных меню. Вершина Метка меню отображает текущее выбранное значение (PortMaster 3, 3.7.1). Пользователь развернул два каскадных меню, но еще не выбрал новое. значение (PortMaster 2, 3.7). Обратите внимание, что в каждом каскадном меню отображается метка OPTGROUP или элемент OPTION .

Начальный тег: требуется , Конечный тег: требуется

Определения атрибутов

имя = cdata [CI]: Этот атрибут назначает имя элемента управления.
рядов = номер [CN]: Этот атрибут определяет количество видимых текстовых строк. Пользователи должны быть может вводить больше строк, поэтому пользовательские агенты должны предоставлять некоторые средства для прокрутите содержимое элемента управления, когда содержимое выходит за пределы видимая область.
столбцы = число [CN]: Этот атрибут определяет видимую ширину в средней ширине символа. Пользователи должны иметь возможность вводить более длинные строки, чем это, поэтому пользовательские агенты должны предоставить средства для прокрутки содержимого элемента управления, когда содержимое выходит за пределы видимой области.Пользовательские агенты могут переносить видимый текст строки, чтобы длинные строки оставались видимыми без необходимости прокрутки.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
только для чтения (элементы управления вводом только для чтения)
отключено (отключено управление вводом)
tabindex (навигация с вкладками)
onfocus , onblur , onselect , onchange , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

В этом примере создается TEXTAREA элемент управления, 20 строк на 80 столбцов и изначально содержит две строки текста. Модель TEXTAREA сопровождается кнопками отправки и сброса.


   
   <ТЕКСТАРА name = "thetext" rows = "20" cols = "80">
   Первая строка исходного текста.Вторая строка исходного текста.

Установка атрибута только для чтения позволяет авторам отображать неизменяемые текст в ТЕКСТАРЕ . Это отличается от использования стандартного размеченного текста в документ, потому что значение TEXTAREA представлено с форма.

ISINDEX — это устарело. Этот элемент создает элемент управления вводом текста в одну строку.Авторы должны использовать INPUT элемент для создания элементов управления вводом текста.

См. Переходный DTD для формальное определение.

Атрибуты, определенные в другом месте

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

УСТАРЕВШИЙ ПРИМЕР:
Следующая декларация ISINDEX :

можно переписать с INPUT следующим образом:


 Введите поисковую фразу:

Семантика ISINDEX. В настоящее время семантика для ISINDEX хорошо определены только тогда, когда базовый URI для прилагаемого документа — это HTTP URI. На практике входная строка ограничен Latin-1, поскольку нет механизма для URI, чтобы указать другой набор символов.

Некоторым элементам управления формы автоматически присваиваются метки (нажмите кнопки), а большинство — нет (текстовые поля, флажки и переключатели, а также меню).

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

Элемент LABEL используется для указания меток для элементов управления, которые не иметь неявные метки,

17.9.1 Модель

LABEL элемент

Начальный тег: требуется , Конечный тег: требуется

Определения атрибутов

для = idref [CS]: Этот атрибут явно связывает определяемую метку с другим контроль.Если присутствует, значение этого атрибута должно быть таким же, как значение атрибута id некоторого другого элемента управления в том же документ. При отсутствии определяемая метка связана с элементом содержание.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
accesskey (доступ ключи)
onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , на мышке над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент LABEL может использоваться для прикрепления информации к элементам управления. Каждые Элемент LABEL связан ровно с одним элементом управления формой.

Атрибут для связывает метку с другим элементом управления. явно: значение для атрибута должно быть таким же, как значение id атрибута связанного элемента управления. Более одного LABEL может быть связан с одним и тем же элементом управления путем создания нескольких ссылки через атрибут для .

В этом примере создается таблица, которая используется для выравнивания двух элементов управления вводом текста и связанных с ними меток.Каждая этикетка явно связан с одним вводом текста:


<ТАБЛИЦА>
  
      Имя 
     
  
      Фамилия

Этот пример расширяет форму предыдущего примера, чтобы включить LABEL элементы.

 
    
     Имя: 
               

     Фамилия: 
               

     электронная почта: 
               

     Мужской 

     Женский

Чтобы связать метку с другим элементом управления неявно, элемент управления должен находиться в пределах содержимого LABEL элемент.В этом случае LABEL может содержать только один элемент управления. Этикетка сам может быть расположен до или после связанного элемента управления.

В этом примере мы неявно связываем две метки с двумя элементами управления вводом текста:

 .." method = "post">

<ЭТИКЕТКА>
   Имя
   

<ЭТИКЕТКА>
   
   Фамилия

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

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

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

Начальный тег: требуется , Конечный тег: требуется

ОБОЗНАЧЕНИЯ Определения атрибутов

выровнять = сверху | снизу | слева | справа [CI]

Не рекомендуется. Это Атрибут определяет положение легенды относительно набора полей. Возможные значения:

вверху: Легенда находится вверху набора полей. Это значение по умолчанию.
внизу: Легенда находится внизу набора полей.
слева: Легенда находится в левой части набора полей.
справа: Легенда находится справа от набора полей.

Атрибуты, определенные в другом месте

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент название)
стиль (рядный информация о стиле)
accesskey (доступ ключи)
onclick , ondblclick , onmousedown , onmouseup , на мышке над , onmousemove , onmouseout , onkeypress , г. onkeydown , onkeyup (внутренние события)

Элемент FIELDSET позволяет авторам тематически группировать соответствующие элементы управления и метки.Группирование элементов управления упрощает пользователям понять их цель, одновременно облегчая навигацию с помощью табуляции для визуальных пользовательских агентов и речевой навигации для пользовательских агентов, ориентированных на речь. Правильное использование этого элемента делает документы более доступными.

Элемент LEGEND позволяет авторам назначать заголовок для FIELDSET . Легенда улучшает доступность, когда FIELDSET визуализируется невизуально.

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


 
 

   Личная информация 
  Фамилия: 
  Имя: 
  Адрес: 
   ...подробнее личная информация ... 
 
 
   История болезни 
   Оспа
   Свинка
   Головокружение
   Чихание
   ...подробнее история болезни ... 
 
 
   Текущее лекарство 
  Вы в настоящее время принимаете какие-либо лекарства?
   Да
   Нет

  Если вы в настоящее время принимаете лекарства, укажите
  это в пространстве ниже:
  <ТЕКСТАРА name = "current_medication"
            rows = "20" cols = "50"
            tabindex = "40">

Обратите внимание, что в этом примере мы могли бы улучшить визуальное представление формы путем выравнивания элементов внутри каждого FIELDSET (с таблицами стилей), добавляя информация о цвете и шрифте (с таблицами стилей), добавление сценариев (скажем, только открыть текстовую область «текущее лекарство», если пользователь указывает, что он или она в настоящее время принимает лекарства) и т. д.

В документе HTML элемент должен получить фокус от пользователя чтобы стать активным и выполнять свои задачи. Например, пользователи должны активировать ссылку, указанную элементом A , чтобы перейти по указанная ссылка. Точно так же пользователи должны установить фокус TEXTAREA , чтобы войти текст в него.

Есть несколько способов установить фокус на элементе:

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

17.11.1 Навигация по вкладкам

Определения атрибутов

tabindex = число [CN]: Этот атрибут определяет позицию текущего элемента в табуляции. заказ для текущего документа.Это значение должно быть числом от 0 до 32767. Пользовательские агенты должны игнорировать ведущие нули.

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

Элементы, которые могут получить фокус, должны перемещаться пользовательскими агентами в соответствии с согласно следующим правилам:

Те элементы, которые поддерживают атрибут tabindex и назначают положительное значение к нему переходит в первую очередь.Навигация происходит от элемента с наименьшим значением tabindex элементу с наибольшим значением. Значения не обязательно должны быть последовательными и не должны начинаться с какого-либо конкретного значения. Элементы с одинаковыми значениями tabindex следует перемещаться в том порядке, в котором они появляются в потоке символов.
Те элементы, которые не поддерживают атрибут tabindex или поддерживают его и присвоить ему значение «0», переходят дальше. Эти элементы перемещаются в том порядке, в котором они появляются в потоке символов.
Отключенные элементы не участвуют в порядок табуляции.

Следующие элементы поддерживают атрибут tabindex : A , ОБЛАСТЬ , КНОПКА , ВВОД , ОБЪЕКТ , ВЫБОР , и ТЕКСТАРА .

В этом примере порядок табуляции будет КНОПКА , INPUT элементов по порядку (обратите внимание, что «field1» и кнопка совместно используют тот же tabindex, но «field1» появляется позже в потоке символов), и, наконец, ссылка, созданная Элемент .

<ГОЛОВА> Документ с FORM <ТЕЛО> ... немного текста ...

Перейти к Веб-сайт W3C. ... еще ... ... еще немного...

Клавиши табуляции. Фактическая последовательность клавиш, которая вызывает переход по вкладкам или активация элемента зависит от конфигурации агент пользователя (например, клавиша «tab» используется для навигации, а клавиша «ввод» — используется для активации выбранного элемента).

Пользовательские агенты также могут определять последовательности клавиш для навигации по порядку табуляции. задом наперед. Когда достигается конец (или начало) порядка табуляции, пользователь агенты могут вернуться к началу (или к концу).

17.11.2 Ключи доступа

Определения атрибутов

ключ доступа = символ [CN]: Этот атрибут назначает ключ доступа к элементу. Доступ key — это отдельный символ из набора символов документа. Примечание. Авторы должны учитывать метод ввода предполагаемого читателя при указании ключа доступа.

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

Следующие элементы поддерживают атрибут accesskey : A , ОБЛАСТЬ , КНОПКА , ВХОД , LABEL и LEGEND и ТЕКСТАРА .

В этом примере ключ доступа «U» назначается метке, связанной с Управление INPUT . При вводе клавиши доступа фокус переходит к метке, которая в свою очередь передает его соответствующему элементу управления.Затем пользователь может ввести текст в ВХОД площадь.




Имя пользователя

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

Содержание

Вызов ключей доступа зависит от базовой системы. Для например, на машинах под управлением MS Windows обычно нужно нажимать «alt» ключ в дополнение к ключу доступа. В системах Apple обычно нужно нажимать ключ «cmd» в дополнение к ключу доступа.

Отображение ключей доступа зависит от пользовательского агента. Мы рекомендуем авторы включают ключ доступа в текст метки или везде, где ключ доступа применять.Пользовательские агенты должны отображать значение ключа доступа таким образом, чтобы подчеркнуть его роль и отличить его от других персонажей (например, подчеркивая это).

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

17.12.1 Отключено контролирует

Определения атрибутов

отключено [CI]: При установке для элемента управления формы этот логический атрибут отключает элемент управления. для пользовательского ввода.

Если установлено, атрибут отключен имеет следующие эффекты на элемент:

Следующие элементы поддерживают атрибут disabled : BUTTON , ВХОД , OPTGROUP , ОПЦИЯ , ВЫБОР , и ТЕКСТАРА .

Этот атрибут наследуется, но локальные объявления переопределяют унаследованные ценить.

Как отображаются отключенные элементы, зависит от пользовательского агента. Например, некоторые пользовательские агенты «затемняют» отключенные пункты меню, ярлыки кнопок и т. д.

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

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

17.12.2 Только чтение контролирует

Определения атрибутов

только чтение [CI]: При установке для элемента управления формы этот логический атрибут запрещает изменение контроль.

атрибут readonly указывает, может ли элемент управления быть изменен Пользователь.

Если установлено, атрибут только для чтения имеет следующие эффекты на элемент:

Следующие элементы поддерживают атрибут только для чтения : INPUT и ТЕКСТАРА .

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

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

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

17.13.1 Подача формы метод

Атрибут метода элемента FORM указывает метод HTTP используется для отправки формы агенту обработки.Этот атрибут может занимать два значения:

get: С помощью метода HTTP «get» набор данных формы добавляется к URI, указанному действием атрибут (с вопросительным знаком («?») в качестве разделителя), и этот новый URI отправляется на обрабатывающий агент.
post: При использовании HTTP-метода «post» набор данных формы включается в тело формы и отправляется к обрабатывающему агенту.

Метод «get» следует использовать, когда форма идемпотентна (т.е.е., не вызывает побочные эффекты). Многие поиски по базам данных не имеют видимых побочных эффектов и делают идеальные приложения для метода «получить».

Если служба, связанная с обработкой формы, вызывает побочные эффекты (например, если форма изменяет базу данных или подписку на услугу), следует использовать «почтовый» метод.

Примечание. Метод «get» ограничивает значения набора данных формы символами ASCII. Только «post» метод (с enctype = «multipart / form-data») указывается для покрытия весь набор символов [ISO10646].

17.13.2 Успешный контроль

Успешный контроль «действителен» для отправки. Каждый успешный control имеет имя элемента управления в паре с его текущим значением как часть отправленного набора данных формы. Успешный контроль должен быть определен в Элемент FORM и должен иметь элемент управления имя.

Однако:

Элементы управления, которые отключен не может быть успешным.
Если форма содержит более одной кнопки отправки, только активированная кнопка отправки успешна.
Все флажки «включены» могут быть установлены успешно.
Для радиокнопок, которые имеют то же значение, что и name , только радиокнопка «вкл.» может быть успешной.
Для меню имя элемента управления предоставляется элементом SELECT , а значения — параметром OPTION элементы. Только выбранные варианты могут быть успешными. Когда нет вариантов выбрано, элемент управления не работает, и ни имя, ни какие-либо значения не отправляется на сервер при отправке формы.
Текущее значение выбора файла — это список из одного или нескольких файлов имена. После отправки формы содержимое каждого файла отправлено вместе с остальными данными формы. Содержимое файла упаковано в соответствии с типом содержимого формы.
Текущее значение объекта управления определяется выполнение.

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

Кроме того, пользовательские агенты не должны учитывать следующие элементы управления успешно:

Скрытые элементы управления и элементы управления, которые не отображаются из-за настройки таблицы стилей все еще могут быть успешными. Например:

по-прежнему приведет к тому, что значение будет связано с именем «invisible-password» и отправлено с формой.

17.13.3 Форма обработки данные

Когда пользователь отправляет форму (например, активируя кнопку отправки), пользовательский агент обрабатывает ее как следует.

Шаг первый: Определите успешных контролирует

Шаг 2. Создание набора данных формы

А Набор данных формы представляет собой последовательность построены пары имя-элемент / текущее значение от успешного управления

Шаг третий: закодируйте данные формы набор

Набор данных формы затем кодируется в соответствии с типом содержимого, указанным в enctype атрибут элемента FORM .

Шаг четвертый: отправьте набор данных закодированной формы

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

Эта спецификация не определяет все допустимые методы отправки или типы контента, которые могут использоваться с формами. Тем не мение, Пользовательские агенты HTML 4 должны поддерживать установленные соглашения в следующих кейсы:

Если метод — это «получить», а действие — это HTTP URI, пользовательский агент принимает значение , действие , добавляет `? ‘ , затем добавляет набор данных формы, закодированный с помощью контент «application / x-www-form-urlencoded» тип. Затем пользовательский агент переходит по ссылке на этот URI. В этом сценарии данные формы ограничены кодами ASCII.
Если метод — это «сообщение», а действие — это HTTP URI, пользовательский агент выполняет «почтовую» транзакцию HTTP, используя значение действия атрибут и сообщение, созданное в соответствии с тип содержимого, указанный атрибутом enctype .

Для любого другого значения действие или метод поведение не определено.

Пользовательские агенты должны отображать ответ от HTTP «get» и «post». сделки.

17.13.4 Типы содержимого формы

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

См. Также раздел по экранированию амперсандов в URI. значения атрибутов.

приложение / x-www-form-urlencoded

Это тип содержимого по умолчанию. Формы, отправленные с этим типом контента должен быть закодирован следующим образом:

Имена и значения элементов управления экранированы. Пробелы заменяются на `+ ‘, а затем зарезервированные символы экранируются, как описано в [RFC1738], раздел 2.2: Не буквенно-цифровые символы заменяются на % HH , знак процента и две шестнадцатеричные цифры, представляющие ASCII код персонажа.Разрывы строк представлены парами «CR LF» (т. Е. `% 0D% 0A ‘).
Имена / значения элементов управления перечислены в том порядке, в котором они появляются в документ. Имя отделяется от значения `= ‘ и Пары имя / значение отделяются друг от друга символом `& ‘.

multipart / form-data

Примечание. Дополнительные сведения см. В [RFC2388]. информация о загрузке файлов, включая проблемы обратной совместимости, взаимосвязь между multipart / form-data и другими типами контента, производительность вопросы и т. д.

Информацию о проблемах безопасности форм см. В приложении.

Тип содержимого «application / x-www-form-urlencoded» неэффективен для отправка больших объемов двоичных данных или текста, содержащих не-ASCII символы. Тип содержимого «multipart / form-data» следует использовать для отправка форм, содержащих файлы, данные не в формате ASCII и двоичные данные.

Контент multipart / form-data следует правилам всех multipart MIME. потоки данных, как описано в [RFC2045].Определение «multipart / form-data» доступно в реестре [IANA].

Сообщение «multipart / form-data» содержит серию частей, каждая представляющий успешный контроль. Части отправляются агенту обработки в том же порядке, что и соответствующие элементы управления появляются в потоке документов. Границы деталей не должны встречаться ни в одном из данные; как это делается, выходит за рамки данной спецификации.

Как и все составные MIME-типы, каждая часть имеет необязательный Content-Type. заголовок, который по умолчанию имеет значение «text / plain».Пользовательские агенты должны предоставлять Заголовок Content-Type, сопровождаемый параметром charset.

Ожидается, что каждая часть будет содержать:

заголовок «Content-Disposition», значение которого — «form-data».
атрибут имени, определяющий имя элемента управления соответствующий элемент управления. Имена элементов управления, изначально закодированные в наборах символов, отличных от ASCII, могут быть закодированы с помощью метода описано в [RFC2045].

Таким образом, например, для элемента управления с именем «mycontrol» соответствующая часть будет указано:

Content-Disposition: данные формы; name = "mycontrol"

Как и все передачи MIME, «CR LF» (т. е., `% 0D% 0A ‘) является используется для разделения строк данных.

Каждая часть может быть закодирована и предоставлен заголовок Content-Transfer-Encoding. если значение этой части не соответствует кодировке по умолчанию (7BIT) (см. [RFC2045], раздел 6)

Если содержимое файла отправляется с формой, ввод файла должен идентифицироваться соответствующими тип содержимого (например, «приложение / октет-поток»). Если несколько файлов должны быть возвращены как результат одной записи формы, они должны быть возвращены как «multipart / mixed» встроено в «multipart / form-data».

Пользовательский агент должен попытаться указать имя файла для каждого отправленного файла. Имя файла можно указать с помощью параметра «filename» в Заголовок Content-Disposition: form-data или, в случае нескольких файлов, в заголовок «Content-Disposition: file» подчасти. Если имя файла операционная система клиента не в US-ASCII, имя файла может быть аппроксимировано или закодировано с использованием метода [RFC2045]. Это удобно для тех случаев, когда, например, загруженные файлы могут содержать ссылки друг на друга (например,g., файл TeX и его вспомогательный стиль «.sty» описание).

Следующий пример иллюстрирует кодирование «multipart / form-data». Предположим, мы иметь следующий вид:

 
   
   Как тебя зовут?  

   Какие файлы вы отправляете?

Если пользователь вводит «Ларри» в текстовый ввод и выбирает текстовый файл «файл1.txt «, пользовательский агент может отправить обратно следующие данные:

   Content-Type: multipart / form-data; Граница = AaB03x

   --AaB03x
   Content-Disposition: данные формы; name = "имя-отправки"

   Ларри
   --AaB03x
   Content-Disposition: данные формы; name = "файлы"; filename = "file1. txt"
   Тип содержимого: текст / простой

   ... содержимое file1.txt ...
   --AaB03x--

Если пользователь выбрал второй файл (изображение) «file2.gif», пользовательский агент может соберите детали следующим образом:

   Content-Type: multipart / form-data; Граница = AaB03x

   --AaB03x
   Content-Disposition: данные формы; name = "имя-отправки"

   Ларри
   --AaB03x
   Content-Disposition: данные формы; name = "files"
   Content-Type: составной / смешанный; Граница = BbC04y

   --BbC04y
   Content-Disposition: файл; имя_файла = "файл1.текст"
   Тип содержимого: текст / простой

   ... содержимое file1.txt ...
   --BbC04y
   Content-Disposition: файл; filename = "file2.gif"
   Тип содержимого: изображение / gif
   Content-Transfer-Encoding: двоичный

   ... содержимое file2.gif ...
   --BbC04y--
   --AaB03x--

Как создать кнопку HTML, которая действует как ссылка | by W3docs

Иногда нам нужно создать кнопку HTML, которая действует как ссылка (т. е. при нажатии на нее пользователь перенаправляется на указанный URL-адрес).

Есть несколько методов, мы представим 3 из них.Выберите один из следующих методов, чтобы добавить ссылку на кнопку HTML.

Хорошо. Погнали!

a) В тег HTML

Попробуйте сами

Это может не сработать, если кнопка находится внутри тега.

б) В тег внутри элемента HTML.

Пример

  
  
  
  Заголовок документа

Попробуйте сами

Ссылки не будут работать, когда JavaScript отключен, а поисковые системы могут игнорировать такие вид ссылок.

a) Атрибут действия

  
  
  
  Заголовок документа

Попробуйте сами

Чтобы открыть ссылку в новой вкладке, добавьте атрибут target = ”_ blank”.

  
  
  
  Заголовок документа

Попробовать себя

Поскольку форма отсутствует и данные не отправлены, это может быть семантически неверным. Однако эта разметка действительна.

b) Атрибут HTML5 formaction.

Пример

  
  
  
  Заголовок документа

Попробуйте сами

Атрибут formaction используется только для кнопок с type =» submit » . Поскольку этот атрибут специфичен для HTML5, поддержка в старых браузерах может быть недостаточной.

Пример

  
  
  
  Заголовок документа  
 <стиль> 
.кнопка {
 background-color: # 1c87c9; 
 граница: отсутствует; 
 цвет: белый; 
 отступ: 20 пикселей 34 пикселей; 
 выравнивание текста: по центру; 
 текст-оформление: нет; Дисплей 
: строчно-блочный; 
 размер шрифта: 20 пикселей; 
 поле: 4 пикселя 2 пикселя; 
 курсор: указатель; 
} 
  
  
  
  w3docs.com/"> Нажмите здесь

Попробуйте сами

Поскольку требуется сложный стиль, он может не работать в некоторых браузерах.

Кнопка HTML: использование кнопок на веб-сайте

Вы можете использовать кнопку HTML для запуска любого события. Это важные аспекты взаимодействия пользователя с веб-сайтом. HTML предоставляет тег кнопки для создания простой кнопки, а CSS делает их привлекательными. Есть способы заставить кнопку работать. У кнопок много атрибутов. В этой статье будет описано, как использовать некоторые из этих важных атрибутов в HTML.

Тем в статье

Базовый пример кнопки HTML

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

это простая кнопка

Как и все другие теги, тег кнопки также помещается внутри тега тела. Тег кнопки имеет один открывающий тег и один закрывающий тег. Тип кнопки определяется с помощью атрибута type. Есть три значения для атрибута type: button, submit и reset. Однако при создании формы используются команды submit и reset.Текст, написанный между тегами, появится на кнопке.

атрибут onclick

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

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

Перед нажатием кнопки.

После нажатия кнопки появляется предупреждающее сообщение с надписью «Hello world!» появляется на экране.

Атрибут

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

Размер пуговицы

В приведенных выше примерах мы видим кнопку обычного размера.Есть несколько способов увеличить размер кнопки. Мы можем использовать свойство CSS font-size для увеличения размера кнопки, или мы также можем использовать свойство CSS padding. В следующем примере свойство font-size используется для увеличения размера кнопки.

Как видите, размер шрифта составляет двадцать пикселей. Это увеличит размер кнопки в соответствии с размером текста, написанного внутри кнопки.

Другой способ — использовать свойство padding.

Здесь мы установили отступ в двадцать пикселей. Расстояние между текстом и стенками кнопки будет двадцать пикселей.

Тип кнопки

Как я упоминал ранее, есть три значения, которые мы можем присвоить атрибуту type кнопки.

1.Button: когда мы хотим использовать стандартную кнопку, мы должны указать «button» в качестве значения атрибута type.

2. Отправить. В теге HTML-формы есть данные. Мы используем тип «submit» для отправки данных формы. URL-адрес, введенный в атрибут действия тега формы, — это место, куда отправляются данные. В следующем коде есть форма с кнопкой отправки.

 


  Имя:  

  Фамилия:

3. Сброс: мы также можем сбросить данные формы до их начальных значений. Для этого в качестве значения атрибута type указывается «сброс». Следующий код имеет начальные значения в полях ввода. Мы можем изменить значения, а затем нажать кнопку сброса, чтобы получить начальные значения в полях ввода. Следующий код имеет форму с кнопкой сброса.

 


Имя:  

Фамилия:

Кнопки для стилизации

Обычная кнопка HTML выглядит скучно.Но CSS предоставляет множество вариантов стилизации кнопки. Мы можем изменить цвет, размер шрифта, цвет границы, радиус границы и т. Д. Кнопок с помощью CSS. Я объясню несколько способов сделать кнопку лучше.

Цвет кнопки можно изменить с помощью свойства CSS background-color. В следующем коде показаны три кнопки трех разных цветов.

Мы можем использовать атрибут border в CSS, чтобы указать размер, стиль и цвет кнопки.В следующем коде показаны три кнопки с тремя разными цветами границы.

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

Обычно кнопка имеет острый угол. Мы можем сделать эти углы скругленными, используя свойство CSS border-radius. В следующем коде показаны три кнопки с закругленными углами.

Действие

Действие — это атрибут тега формы в HTML.Атрибут действия указывает, куда отправлять данные формы. Чтобы использовать атрибут действия, тип кнопки должен быть «отправить».

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

 


Имя:  

Фамилия:

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

По умолчанию кнопка всегда активна.Это означает, что он всегда доступен для кликов. Мы можем сделать кнопку неактивной с помощью атрибута disabled тега кнопки. Атрибут disabled является логическим атрибутом. В следующем коде показаны две кнопки, одна из которых является интерактивной, а вторая — неактивной.

эта кнопка активна

эта кнопка не нажимается

Кнопки с бутстрапом

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

 <тело>

btn — это класс для основной кнопки начальной загрузки.

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

Заключение

Кнопки очень полезны для взаимодействия с пользователем. Хорошо работающая кнопка создается с использованием HTML, CSS и Javascript.HTML предоставляет множество опций для работы с кнопками. Все, что вам нужно, — это изучить все его аспекты.

jspsych-html-button-response — jsPsych

Этот плагин отображает HTML-контент и записывает ответы, генерируемые нажатием кнопки. Стимул может отображаться до тех пор, пока не будет дан ответ, или в течение заранее определенного периода времени. Испытание может быть завершено автоматически, если субъект не ответил в течение фиксированного периода времени.Саму кнопку можно настроить с помощью форматирования HTML.

Параметры

В дополнение к параметрам, доступным во всех плагинах, этот плагин принимает следующие параметры. Необходимо указать параметры со значением по умолчанию undefined . Другие параметры можно не указывать, если приемлемо значение по умолчанию.

Параметр	Тип	Значение по умолчанию	Описание
стимул	HTML-строка	неопределенный	Отображаемое содержимое HTML.
вариантов	массив строк	[]	Наклейки для кнопок. Каждая отдельная строка в массиве будет генерировать отдельную кнопку.
button_html	HTML-строка	`''`	Шаблон HTML для создания элементов кнопки. Вы можете переопределить это, чтобы создать настраиваемые кнопки различного типа. Строка `% choice%` будет заменена на соответствующий элемент массива `choices` .Вы также можете указать массив строк, если вам нужен другой HTML-код для отображения для каждой кнопки. Если вы указываете массив, `choices` array и этот массив должны иметь одинаковую длину. HTML-код из позиции 0 в массиве `button_html` будет использоваться для создания кнопки для элемента 0 в массиве `choices` и так далее.
подсказка	строка	null	Эта строка может содержать разметку HTML. Любой контент здесь будет отображаться под стимулом.Предполагается, что его можно использовать для напоминания о действии, которое субъект должен предпринять (например, какую клавишу нажать).
пробная_длительность	числовой	null	Время ожидания ответа от субъекта до завершения испытания в миллисекундах. Если субъект не сможет ответить до того, как истечет этот таймер, ответ субъекта будет записан как нулевой для испытания, и испытание завершится. Если значение этого параметра равно нулю, испытание будет ждать ответа неопределенное время.
стимул_длительность	числовой	null	Продолжительность отображения стимула в миллисекундах. CSS-свойство visibility для стимула будет установлено на `hidden` по истечении этого времени. Если это ноль, то стимул будет оставаться видимым до окончания испытания.
край_вертикальное	строка	‘0px’	Вертикальное поле кнопки (кнопок).
margin_horizontal	строка	‘8px’	Горизонтальное поле кнопки (кнопок).
response_ends_trial	логическое	правда	Если верно, то испытание будет завершаться всякий раз, когда субъект ответит (при условии, что он ответит до истечения срока, указанного в параметре `trial_duration` ). Если false, то испытание будет продолжаться до тех пор, пока не будет достигнуто значение `trial_duration` . Вы можете установить для этого параметра значение `false` , чтобы заставить испытуемого видеть стимул в течение фиксированного времени, даже если они ответят до истечения этого времени.

Данные созданы

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

Имя	Тип	Значение
RT	числовой	Время ответа в миллисекундах, в течение которого субъект должен ответить. Время измеряется от момента первого появления стимула на экране до реакции субъекта.
ответ	числовой	Указывает, какую кнопку нажал объект. Первая кнопка в массиве `choices` — 0, вторая — 1 и так далее.
стимул	строка	Содержимое HTML, отображаемое на экране.

Примеры

Отображение вопроса до тех пор, пока субъект не ответит

  var trial = {
    тип: 'html-button-response',
    стимул: ' Бег ',
    варианты: ["Здоровый", "Нездоровый"],
    подсказка: " Это действие полезно или вредно? "
};

Пуленепробиваемые кнопки электронной почты | Монитор кампании

Убедитесь, что отправляемый вами код в точности соответствует сгенерированному выше.Если вы внесли изменения в код вручную и при тестировании исходной версии все работает должным образом, возможно, что-то пошло не так при настройке кода.
Посмотрите, не возникает ли проблема более чем в одном почтовом клиенте. Если это относится к одному хосту электронной почты, проверьте полученный HTML-код электронной почты, чтобы узнать, мог ли почтовый сервер изменить ваш код до того, как он достиг почтового клиента.
Если вы отправили электронное письмо с помощью службы, отличной от Campaign Monitor, попробуйте отправить превью на несколько разных почтовых хостов (например,грамм. Gmail или Yahoo! Mail) и просмотрите HTML-код полученного электронного письма. Если вы видите изменения в своем коде на каждом адресе, на который вы отправляете, вероятно, служба, которую вы используете для отправки электронных писем, вносит нежелательные изменения в ваш HTML.

Если у вас все еще возникают проблемы, отправьте электронное письмо на [email protected] с полными файлами шаблона / кампании, а также со снимком экрана, четко показывающим проблему в соответствующем почтовом клиенте (ах).

Могу ли я использовать пуленепробиваемые кнопки поверх пуленепробиваемых фоновых изображений?

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

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

Как сделать так, чтобы пуленепробиваемые кнопки реагировали?

Поскольку Outlook не поддерживает запросы @media, вам нужно беспокоиться только о почтовых клиентах, которые их поддерживают.Таким образом, реагировать должен только элемент HTML, а не VML. В качестве общей рекомендации более надежно использовать ширину на основе пикселей в HTML, и затем вы можете заменить это другой шириной на основе пикселей или процентов для других окон просмотра, например, с любым адаптивным веб-дизайном.

Для начала присвойте ссылке кнопки класс или идентификатор, на который вы можете настроить таргетинг. Затем в любых подходящих запросах @media укажите для ссылки (-ов) разные размеры, фоновые изображения и т. Д.

Можно ли отключить повторение фоновых изображений?

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

Почему мое фоновое изображение увеличено или уменьшено в Outlook?

В отличие от большинства других почтовых клиентов и браузеров, Outlook 2007/2010/2013 использует DPI вашего фонового изображения для определения масштаба. Поэтому, чтобы обеспечить правильный размер изображения, установите разрешение изображения 96 точек на дюйм.

Могу ли я сделать кнопки редактируемыми с помощью тегов шаблона монитора кампании?

К сожалению, URL-адрес кнопки, текст и другие атрибуты нельзя сделать редактируемыми в нашем редакторе.

Если вы хотите, чтобы эта функция была добавлена в редактор, сообщите о себе на нашем форуме или по электронной почте.

html.Button | Документация по Dash для Python

  import dash
импортировать dash_html_components как html
импортировать dash_core_components как dcc

external_stylesheets = ['https://codepen. io/chriddyp/pen/bWLwgP.css']

app = dash.Dash (__ name__, external_stylesheets = external_stylesheets)

app.layout = html.Div ([
    html.Div (dcc.Input (id = 'input-on-submit', type = 'text')),
    html.Button ('Отправить' ,, n_clicks = 0),
    html.Div (id = 'основная-кнопка-контейнер',
             children = 'Введите значение и нажмите "Отправить"')
])


@ app.callback (
    dash.dependencies.Output ('основная кнопка-контейнер', 'дети'),
    [dash.dependencies.Input ('submit-val', 'n_clicks')],
    [dash.dependencies.State ('ввод при отправке', 'значение')])
def update_output (n_clicks, значение):
    return 'Введено значение "{}", и кнопка была нажата {} раз'.формат(
        ценить,
        n_clicks
    )


если __name__ == '__main__':
    app.run_server (отладка = True)

  # - * - кодировка: utf-8 - * -
импортировать тире
из dash.dependencies import Input, Output
импортировать dash_html_components как html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash (__ name__, external_stylesheets = external_stylesheets)

app.layout = html.Div ([
    html.Button ('Кнопка 1' ,, n_clicks = 0),
    html.Button ('Кнопка 2' ,, n_clicks = 0),
    html.Кнопка ('Кнопка 3' ,, n_clicks = 0),
    html.Div (id = 'отметка времени-кнопки-контейнера')
])

@ app.callback (Вывод ('отметка времени-кнопки-контейнера', 'дети'),
              Ввод ('btn-nclicks-1', 'n_clicks'),
              Ввод ('btn-nclicks-2', 'n_clicks'),
              Ввод ('btn-nclicks-3', 'n_clicks'))
def displayClick (btn1, btn2, btn3):
    changed_id = [p ['prop_id'] для p в dash.callback_context.triggered] [0]
    если 'btn-nclicks-1' в changed_id:
        msg = 'Кнопка 1 была нажата последним'
    elif 'btn-nclicks-2' в changed_id:
        msg = 'Кнопка 2 была нажата последним'
    elif 'btn-nclicks-3' в changed_id:
        msg = 'Кнопка 3 была нажата последним'
    еще:
        msg = 'Ни одна из кнопок еще не была нажата'
    вернуть html.Div (сообщение)

если __name__ == '__main__':
    app. run_server (отладка = True)

дочерние элементы ( список или отдельный компонент тире, строка или число ; необязательно): дочерние элементы этого компонента

aria- * ( строка ; необязательно): подстановочный атрибут aria

autoFocus ( значение, равное: «autoFocus», «autofocus», «AUTOFOCUS» | boolean ; необязательно): элемент должен быть автоматически сфокусирован после загрузки страницы.

accessKey ( строка ; необязательно): сочетание клавиш для активации или добавления фокуса к элементу.

className ( строка ; необязательно): часто используется с CSS для стилизации элементов с общими свойствами.

contentEditable ( строка ; необязательно): указывает, можно ли редактировать содержимое элемента.

contextMenu ( строка ; необязательно): определяет идентификатор элемента

, который будет служить контекстным меню элемента.

data- * ( строка ; необязательно): атрибут данных с подстановочным знаком

отключено ( значение, равное: «disabled», «DISABLED» | boolean ; необязательно): указывает, может ли пользователь взаимодействовать с элементом.

dir ( строка ; необязательно): определяет направление текста. Допустимые значения: ltr (слева направо) или rtl (справа налево)

перетаскиваемый ( строка ; необязательно): определяет, можно ли перетаскивать элемент.

форма ( строка ; необязательно): указывает форму, которая является владельцем элемента.

formAction ( строка ; необязательно): указывает действие элемента, отменяя действие, определенное в

formEncType ( строка ; необязательно): если кнопка / ввод является кнопкой отправки (type = ”submit”), этот атрибут устанавливает тип кодировки для использования во время отправки формы.Если этот атрибут указан, он переопределяет атрибут enctype владельца формы кнопки.

formMethod ( строка ; необязательно): если кнопка / ввод является кнопкой отправки (type = ”submit”), этот атрибут устанавливает метод отправки, который будет использоваться во время отправки формы (GET, POST и т. Д.) . Если этот атрибут указан, он переопределяет атрибут метода владельца формы кнопки.

formNoValidate ( значение, равное: ‘formNoValidate’, ‘formnovalidate’, ‘FORMNOVALIDATE’ | boolean ; необязательно): если кнопка / ввод является кнопкой отправки (type = «submit»), этот логический атрибут указывает, что форма не должна проверяться при отправке.Если этот атрибут указан, он переопределяет атрибут novalidate владельца формы кнопки.

formTarget ( строка ; необязательно): если кнопка / ввод является кнопкой отправки (type = «submit»), этот атрибут определяет контекст просмотра (например, вкладку, окно или встроенный фрейм) в который отображает ответ, полученный после отправки формы. Если этот атрибут указан, он переопределяет целевой атрибут владельца формы кнопки.

скрыто ( значение, равное: «hidden», «HIDDEN» | логическое ; необязательно): предотвращает рендеринг данного элемента, сохраняя при этом дочерние элементы, например элементы скрипта, активные.

id ( строка ; необязательно): идентификатор этого компонента, используемый для идентификации компонентов тире в обратных вызовах. Идентификатор должен быть уникальным для всех компонентов в приложении.

lang ( строка ; необязательно): определяет язык, используемый в элементе.

loading_state ( dict ; необязательно): объект, содержащий объект состояния загрузки, поступающий из средства визуализации тире. loading_state имеет следующий тип: dict, содержащий ключи is_loading, prop_name, component_name. Эти ключи бывают следующих типов:

is_loading (логическое; необязательно): определяет, загружается ли компонент
prop_name (строка; необязательно): указывает, какое свойство загружает
имя_компонента (строка; необязательно): содержит имя компонента, который загружает

n_clicks ( номер ; по умолчанию 0 ): целое число, представляющее количество нажатий на этот элемент.

n_clicks_timestamp (номер ; по умолчанию -1 ): целое число, представляющее время (в мс с 1970 года), в которое изменилось n_clicks. Это можно использовать, чтобы узнать, какая кнопка была изменена последней.

имя ( строка ; необязательно): Имя элемента. Например, используется сервером для идентификации полей в отправленных формах.

роль ( строка ; необязательно): атрибут роли ARIA

spellCheck ( строка ; необязательно): указывает, разрешена ли проверка орфографии для элемента.

style ( dict ; необязательно): определяет стили CSS, которые заменят ранее установленные стили.

Кнопка в html: Атрибут form | htmlbook.ru

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

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

Описание

Атрибуты

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

Пример

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

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

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

Атрибуты

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

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

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

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

Атрибуты событий

Ссылки против кнопок в современных веб-приложениях — CSS-LIVE

Кнопки

Ссылки

Что такое навигация? А что маршрутизация?

Откуда возникает путаница?

Роль UX в разработке доступных приложений

Что можно для этого сделать?

Это ещё не конец.

P.S. Это тоже может быть интересно:

PHP: PHP и HTML — Manual

Тег кнопки HTML — использование, атрибуты, примеры

Синтаксис¶

Пример HTML-тега

Здесь будет наша кнопка

Использование стилей CSS¶

Пример тега

Результат¶

Атрибуты¶

Атрибуты¶

Как стилизовать тег

Общие свойства для изменения визуального веса / выделения / размера текста в теге

Цвет текста в теге

Стили макета текста для тега

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

Формы в HTML-документах

17.1 Введение в формы

17.2.1 Контроль типы

17.

17.4.2 Примеры форм, содержащих INPUT контролирует

17.6.1 Предварительно выбрано варианты

17.9.1 Модель

17.11.1 Навигация по вкладкам

17.11.2 Ключи доступа

17.12.1 Отключено контролирует

17.12.2 Только чтение контролирует

17.13.1 Подача формы метод

17.13.2 Успешный контроль

17.13.3 Форма обработки данные

Шаг первый: Определите успешных контролирует

Шаг 2. Создание набора данных формы

Шаг третий: закодируйте данные формы набор

Шаг четвертый: отправьте набор данных закодированной формы

17.13.4 Типы содержимого формы

приложение / x-www-form-urlencoded

multipart / form-data

Как создать кнопку HTML, которая действует как ссылка | by W3docs

Пример

Пример

Пример

Пример

Кнопка HTML: использование кнопок на веб-сайте

Тем в статье

Базовый пример кнопки HTML

атрибут onclick

Размер пуговицы

Тип кнопки

Кнопки для стилизации

Действие

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

Кнопки с бутстрапом

Заключение

jspsych-html-button-response — jsPsych

Параметры

Данные созданы