Как создать кнопки в html: Как добавить HTML-кнопку на сайт

Leave a Comment / Html / By /

Кнопки | Учебные курсы | WebReference

Кнопки являются одним из популярных элементов интерфейса и часто применяются внутри форм, например, для отправки введённой информации в форме на сервер.

Кнопки на веб-странице можно создать несколькими способами — с помощью элемента <input> или элемента <button>.

Рассмотрим вначале добавление кнопки через <input> и его синтаксис.

<input type="button" value="Текст">

Атрибуты кнопки перечислены в табл. 1.

Табл. 1. Атрибуты <input>
АтрибутОписание
nameИмя кнопки, предназначено для того, чтобы обработчик формы мог её идентифицировать.
disabledБлокирует кнопку и не позволяет на неё нажимать.
formИдентификатор формы для связывания кнопки с элементом <form>.
typeДля обычной кнопки значением является button.
valueНадпись на кнопке.
autofocusКнопка получает фокус после загрузки документа.

Создание кнопки показано в примере 1.

Пример 1. Добавление кнопки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <form> <p><input type=»button» value=» Нажми меня нежно «></p> </form> </body> </html>

Примите во внимание, что учитываются все пробелы в надписи на кнопке, в отличие от обычного текста HTML, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Но правильнее, конечно же, задавать вид кнопки через CSS. Результат примера показан на рис. 1.

Рис. 1. Вид кнопки

Для таких кнопок есть ряд обязательных правил:

  • <input> нельзя вкладывать внутрь ссылки <a>;
  • <input> нельзя вкладывать внутрь кнопки <button>;
  • значение атрибута value не может быть пустым.

Второй способ создания кнопки основан на использовании элемента <button>. Он по своему действию напоминает результат, получаемый с помощью <input>. Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button>.

Рис. 2. Кнопки, созданные с помощью <button>

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

<button>Надпись на кнопке</button>

Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то <img> добавляется внутрь <button>, как показано в примере 2.

Пример 2. Рисунок на кнопке

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <form> <p><button>Кнопка с текстом</button> <button> <img src=»image/umbrella. gif» alt=»»> Кнопка с рисунком </button></p> </form> </body> </html>

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

Для <button> также есть ряд ограничений:

  • <button> нельзя вкладывать внутрь ссылки <a>;
  • один <button> нельзя вкладывать внутрь другого.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на неё происходит переход к обработчику формы по адресу, указанному атрибутом action элемента <form>. Программа-обработчик, получает данные, введённые пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого элемента <input> или <button>.

<input type="submit">
<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3), но значение атрибута value теперь можно не указывать, потому что браузер подставит текст самостоятельно, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Пример 3. Отправка данных на сервер

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

Кнопка Reset

При нажатии на кнопку Reset данные формы возвращаются к первоначальным значениям.

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

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<input type="reset">
<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value элемента <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Кнопка</title> </head> <body> <form> <p><input value=»Введите текст»></p> <p><input type=»submit»> <input type=»reset»></p> </form> </body> </html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Сбросить».

См. также

  • <button>
  • <input>
  • Выравнивание элементов форм
  • Загрузка файлов
  • Кнопки
  • Кнопки в Bootstrap 4
  • Отправка данных формы
  • Переключатели
  • Переключатели
  • Поле для ввода пароля
  • Поле для пароля
  • Пользовательские формы
  • Построение форм
  • Скрытое поле
  • Стилизация переключателей
  • Стилизация флажков
  • Сумасшедшие формы
  • Текстовое поле
  • Текстовое поле
  • Флажки
  • Флажки
  • Формы в Bootstrap 4
  • Формы в HTML

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".

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

Как создать текстовые кнопки

❮ Назад Далее ❯

Узнайте, как оформить текстовые кнопки с помощью CSS.

Как стилизовать текстовые кнопки

Шаг 1) Добавить HTML:

Пример




< кнопка >Danger

Шаг 2) Добавьте CSS:

Чтобы получить вид «текстовой кнопки», мы удаляем цвет фона и границы по умолчанию:

Пример

.btn {
  граница: нет;
  background-color: наследовать;
  заполнение: 14 пикселей 28 пикселей;
размер шрифта: 16px;
  курсор: указатель;
  отображение: встроенный блок;
}

/* При наведении мыши */
. btn:наведение {фон: #eee;}

.success {цвет: зеленый;}
.info {цвет: dodgerblue;}
.warning {цвет: оранжевый;}
.danger {цвет: красный;}
.default {цвет: черный;}

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

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении:

Пример

.btn {
   граница: нет;
цвет фона: наследовать;
    padding: 14px 28px;
размер шрифта: 16px;
    курсор: указатель;
отображение: встроенный блок;
}

/* Зеленый */
.success {
    цвет: зеленый;
}

.success: hover {
цвет фона: #04AA6D;
    цвет: белый;
}

/* Синий */
.info {
цвет: голубой;
}

.info:hover {
    фон: № 2196F3;
    цвет: белый;
}

/* Оранжевый */
.warning {
    color: апельсин;
}

. предупреждение: наведение {
    фон: #ff9800;
    цвет: белый;
}

/* Красный */
.danger {
    цвет: красный;
}

.danger:hover {
фон: #f44336;
    цвет: белый;
}

/* серый */
.по умолчанию {
    цвет: черный;
}

.default:hover {
    фон: #e7e7e7;
}

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

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

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery


1 Лучшие примеры0012 Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Легко добавить ссылку на HTML-кнопку

Содержание
  • 1. Кнопка HTML: Основные советы
  • 2. Использование и назначение кнопки
  • 3. Атрибуты кнопки
  • 4. Кнопка Основные советы
    • 7 HTML
7 Поддержка браузера
  • Элемент HTML
  • Браузеры представляют эту кнопку в соответствии с хост-платформой. Однако внешний вид кнопок HTML можно изменить с помощью CSS.

Использование и назначение кнопки

Изучение того, как сделать кнопку в HTML , начинается с изучения использования элемента

Попробуйте вживую Учитесь на Udacity

JavaScript добавляет функции к кнопкам HTML:

Пример

Попробуйте вживую Учитесь на Udacity

Один из простейших способов создания ссылки HTML-кнопки — повторить следующий код:

Пример 

 
Эта кнопка переносит вас на другой веб-сайт!

 org" target="_blank">

Попробуй в прямом эфире. Учись на Udacity

Pros

Main Features

EXCLUSIVE: 75% OFF

Pros

Основные характеристики

до 12,99 $

Pros

75% СКИДКА

Атрибуты для кнопки

автофокус

Устанавливает фокус после загрузки веб-документа.

Пример

Попробуй в прямом эфире. Учись на Udacity

disabled

Определяет отключенную кнопку.

Пример

Попробуйте Live Learn на Udacity

form

Он определяет идентификатор формы, с которой связана кнопка.

Пример 

 

  Поисковый запрос:

Попробуйте Live Learn на Udacity

formaction

Задает место для отправки данных формы.

Пример 

 
  Поисковый запрос:

Попробуйте живое обучение на Udacity

formenctype

Устанавливает тип содержимого, применяемого для отправки формы на сервер.

Пример 

 
  Выберите изображение:

Попробуйте в прямом эфире Учитесь на Udacity

formmethod

Устанавливает тип метода HTTP.

Пример 

 

  Поисковый запрос:

Попробуйте живое обучение на Udacity

formnovalidate

Он не поддерживает функции проверки.

Пример 

 

  Имя: 
  Идентификатор электронной почты:

Попробуйте живое обучение на Udacity

formtarget

Устанавливает целевое местоположение для ответа веб-сервера.

Пример 

 
  Поисковый запрос:

Попробуйте живое обучение на Udacity

имя

Определяет имя кнопки.

Пример 

 

  Поисковый запрос:

Попробуйте живое обучение на Udacity

type

Определяет тип кнопки.

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

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