HTML5 | Кнопки

Последнее обновление: 08.04.2016

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

  • submit: кнопка, используемая для отправки формы

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

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

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

  • form: определяет форму, за которой закреплена кнопка отправки

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

  • formenctype: устанавливает формат отправки данных.

    Если у элемента form установлен атрибут enctype, то он переопределяется

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

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


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<button type="submit" formmethod="get" formaction="index.html">Отправить</button> 
				<button type="reset">Отмена</button>
			</p>
		</form>
	</body>
</html>

Кроме элемента button для создания кнопок можно использовать элемент input, у которого атрибут равен submit или reset. Например:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Формы в HTML5</title>
	</head>
	<body>
		<form>
			<p><input type="text" name="login"/></p>
			<p><input type="password" name="password"/></p>
			<p>
				<input type="submit" value="Отправить" /> 
				<input type="reset" value="Отмена" />
			</p>
		</form>
	</body>
</html>

И еще один элемент input с атрибутом type="image" позволяет использовать в качестве кнопки изображение:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Форма ввода в HTML5</title>
	</head>
	<body>
		<form>
			<p>
				<input type="text" name="search" />
				<input type="image" src="search.
 
 png" name="submit" />
			</p>
		</form>
	</body>
</html>

Кроме наличия изображения в остальном эта кнопка будет аналогична стандартной кнопке отправки input type="submit" или button type="submit".

НазадСодержаниеВперед

#6 — Кнопки и группы кнопок

itProger