Тег <button> HTML кнопка
Тег <button> в HTML используется для создания кликабельной кнопки.
Кнопка, созданная с помощью тега button , может быть одного из трех типов: submit — кнопка отправки формы, reset — кнопка сброса данных в полях формы, button — кликабельная кнопка, действие по которой определяется скриптом.
HTML кнопка <button> не является ссылкой. Для создания ссылки в виде кнопки используйте тег <a> , стилизованный с помощью таблиц стилей CSS.
Контентом кнопки <button> может быть как текст, так и другие HTML теги, например, используя тег <img> внутри кнопки, можно сделать кнопку-картинку.
Кнопка <button> , как и тег <input> , может быть использована как кнопка отправки HTML форм. Для этого кнопка должна иметь тип submit, находиться внутри HTML кода формы <form> или быть привязанной к форме с помощью атрибута form .
Тег <button> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Примеры использования кнопки <button>
Стандартная HTML кнопка
HTML код стандартной кнопки <button>
Кнопка button стилизованная с помощью CSS
HTML код стилизованной кнопки <button>
Кнопка — картинка с помощью тега button
В примере показано как будет выглядеть изображение <img> , вставленное внутрь кнопки button без изменения стилей. Вы всегда можете изменить стили с помощью CSS.
HTML код кнопки — картинки
Кнопка <button> в HTML коде страницы
В примере показано использование кнопки <button> в качестве кнопки отправки формы (тип submit).
HTML код примера
Кнопки button и input в чем отличие?
Как тег <button> , так и тег <input> позволяют создавать кликабельные кнопки типа button, submit и reset.
Разница между кнопкой, созданной с помощью тега <button> и кнопкой, созданной тегом input в механизме наполнения кнопки контентом. Внутри тега кнопки button вы можете размещать HTML теги, тем самым расширяется возможность по созданию визуальной составляющей кнопки. В случае с input , придется ограничиться использованием текста через атрибут value или использовать изображение в input с атрибутом type=»image» . Возможности использовать HTML теги внутри в кнопке input нет.
Браузеры могут по разному устанавливать тип кнопки по умолчанию, поэтому, для обеспечения кроссбраузерности, стоит всегда использовать атрибут type .
Поддержка браузерами
| Тег | |||||
| < button > | Да | Да | Да | Да | Да |
Атрибуты тега button
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на кнопку.
Логический атрибут. Если указан, делает кнопку неактивной (на кнопку нельзя будет нажать).
Указывает на форму, к которой относится кнопка. Используется, если кнопка применяется для отправки или очистки формы и при этом находится вне HTML кода формы.
Если кнопка находится внутри тега <form>, то использовать атрибут form не нужно, кнопка по умолчанию привязана к форме, внутри которой находится.
URL адрес документа — обработчика формы. Используется для кнопок с типом submit. Если указан, форма будет отправлена по URL адресу, указанному в этом атрибуте, игнорируя атрибут action тега <form>.
Способ кодирования информации. Используется для кнопок с типом submit.
Указывает как именно нужно кодировать информацию при отправке на сервер, вызванной нажатием кнопки, содержащей этот атрибут.
- application/x-www-form-urlencoded — все символы кодируются перед отправкой в шестнадцатеричные значения (HEX) ASCII, пробелы заменяются на «+». Значение по умолчанию;
- multipart/form-data — символы не кодируются. Значение обязательно нужно использовать в форме с полем input type=»file» (при использовании файлов в форме);
- text/plain — символы не кодируются, пробелы заменяются символом «+».
Атрибут используется только в случае отправки формы методом POST.
Этот атрибут переопределяет значение, указанное в атрибуте enctype тега <form>.
HTTP метод передачи данных формы.
- GET — передача данных в URL с помощью пар имя-значение (name-value). Значение по умолчанию.
- POST — передача данных в теле HTTP запроса.
Используется только для кнопок с типом submit.
Этот атрибут переопределяет значение, указанное в атрибуте method тега <form>.
Логический атрибут. Браузер не будет выполнять проверку правильности заполнения формы перед отправкой, вызванной нажатием кнопки, содержащей этот атрибут. По умолчанию браузер проверяет наличие значения в обязательных полях (required), соответствие значений стандарту (например, для поля с типом email) и т.п.
Этот атрибут переопределяет значение, указанное в атрибуте novalidate тега <form>.
Используется для кнопок с типом submit.
Определяет где будет открыт результат обработки формы (ответ сервера), при отправке по нажатию кнопки с этим атрибутом:
- _blank — в новой вкладке или окне;
- _parent — в родительском окне;
- _self — в текущем окне (используется по умолчанию);
- _top — на весь экран.
Этот атрибут переопределяет значение, указанное в атрибуте target тега <form>.
Имя кнопки. Используется при передаче данных формы на сервер. Значение (value) кнопки будет передано в переменной, имеющей имя, указанное в этом атрибуте.
- button — простая кликабельная кнопка, действие по нажатию которой определяется скриптом;
- reset — кнопка очистки полей формы. Стирает информацию введенную пользователем в поля связанной с кнопкой формы;
- submit — кнопка отправки формы. Выполняет отправку связанной формы на сервер.
Значение этого атрибута по умолчанию может отличаться в разных браузерах. Для кроссбраузерности вашего кода всегда указывайте этот атрибут.
Значение кнопки, которое будет отправлено на сервер.
На сервер отправляется переменная, имеющая название, указанное в атрибуте name кнопки и значение, указанное в этом атрибуте.
К форме может быть привязано несколько кнопок отправки. На сервер отправляются данные только той кнопки, которая вызвала событие отправки формы.
Дмитрий, кнопка и ссылка в HTML — это разные вещи. Кнопка <button> не является ссылкой. Если вам нужно создать гиперссылку, используйте тег <a>. Вы можете придать тегу <a> любые стили, в том числе и вид кнопки, с помощью CSS.
В каком-то смысле из кнопки <button> с типом type="submit" можно сделать ссылку. Для этого нужно определить атрибут formaction у такой кнопки, вписав как значение целевой URL.
Что касается данных пользователя, введенных в форму, то они передаются на сервер в момент отправки формы. URL по которому сервер получает данные определяется атрибутом action тега <form>, к которому относится кнопка, либо атрибутом formaction самой кнопки. То есть, фактически, при отправке формы происходит переход по указанному URL с передачей серверу введенных пользователем данных.
Никакого сохранения данных или отправки на email HTML форма сама по себе не делает. В свою очередь, это может сделать сервер. Например, в случае с PHP сервером, данные попадут в массивы $_GET и/или $_POST, после чего их можно будет сохранить в базу данных либо отправить на email средствами PHP.
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Как сделать кнопку в HTML?
Кнопки для сайта HTML создаются одним из двух способов:
1. С помощью тега input . Синтаксис такой команды выглядит следующим образом:
2. С помощью тега button :
В результате получаются две одинаковые кнопки:
Таким образом, хотя получились две абсолютно одинаковые кнопки html , код для них немного разный. Не имеет значения, как создать кнопку в html .
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button .
Виды кнопок html
1. Кнопка-ссылка HTML
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html ) может быть создана с помощью ссылок « якорей ». Обычный « якорь » имеет следующий вид:
Такой « якорь » невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к « якорю », используется следующая команда:
Нажатие на название кнопки, моментально переводит курсор к « якорю ».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
Выглядит это следующим образом:
2. Кнопка Submit
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
3. Кнопка Reset
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
4. HTML кнопка с картинкой
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
Кнопка с картинкой и текстом:
Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Как создать красивую кнопку на сайте?
Многие из моих сокурсников задавались вопросом, когда в нашем техникуме проходила сдача курсовой работы, конечной целью которой было – сверстать сайт, как же я создаю такие красивые кнопочки? Честно сказать, я и сам поначалу задавался вопросом, как же создавать на сайте таки прикольные кнопки, а не просто вставлять слово, просто подчёркнутое чертой и имеющее немного другой цвет, а при переходе и вовсе блювотно-фиолетовый оттенок.
Рисунок 1: Пример кнопок
И вот, штудируя просторы всемирной паутины, я наткнулся на стили, которые используются для создания сайта. Стили – это по сути совершенно другой язык (я бы даже сказал, расширенный набор параметров), немного отличающийся от того же HTML. В моём понимании HTML выступает неким каркасом сайта, в то время как CSS – это непосредственно его красота. По аналогичному примеру можно разобрать человека: скелет и мышцы, с кожным покровом. После длительного изучения стилей и тестирования их на множестве файлов с названием test.html и test_1.html, я полностью принял их и понял, что используя стили, становиться проще, да и приятнее создавать сайт.
Сразу отмечу, что в этом уроке я не буду затрагивать тему, по типу видов подключения стилей, а также основных построений конструкций сайта, а сразу перейду к делу, пошагово описывая процесс создания. Но если вам всё же интересно почитать мои мысли об этом всём, предлагаю вам порыскать на нашем сайте статейку, направленную именно на эти темы.
Создаём структуру кнопки на HTML
Для начала нам необходимо создать первичную структуру сайта: HTML – HEAD — STYLE – BODY.
Ну и, конечно же, как вы можете заметить, сами стили я буду использовать в самом документе сайта, хоть это и не правильно, но каждый видит по-своему. Переходим к нашему созданию. В первую очередь создадим контейнер (DIV) и завернём его в ссылку (A). Ах да, чуть не забыл… Для контейнера DIV, нужно прописать атрибут class и присвоить ему значение «button». Выглядеть это всё, будет следующим образом:
Половина дела сделана, осталась вторая половина. Переходим к стилям, и начинает творить чудеса. В разделе STYLE обращаемся к классу нашей кнопки и прописываем различные атрибуты, влияющие на её форму и внешние признаки. Код страницы будет выглядеть следующим образом.
Рисунок 2: Получившийся элемент
Да, вот они самые стили. Разберемся, что здесь происходит и как настраивать кнопку, в зависимости от параметров.
- width – этот параметр отвечает за ширину кнопки, в моём случае 200 идеально подходит для размера.
- height – параметр, отвечающий за высоту кнопки.
- background-color – один из параметров заднего фона. В данном случае цвет. Углубляясь в оптимизацию сайта и более быструю загрузку, я понял, что лучше всего весь сайт создавать при помощи цветов, напрочь отказавшись от картинок. Даже если вы используете градиентный рисунок, намного оптимальнее будет задать его через свойство gradient. Это ускорит загрузку сайта, хоть и не намного. #000 – в данном случае это значение цвета, заданное в 16-тиричной системе счисления. Можно также задать значения black, red. green или же попросту указать rgb(24, 74, 64). Все методы сработают.
- border – radius – параметр, отвечающий за небольшое закругление, вокруг кнопки по краям, в моём случае, это 10 пикселей.
- color – иногда в моей голове случаются сильные конвульсии и я зачастую путаю color с background-color, а так, этот параметр меняет цвет текста или какого-либо символа.
- font-size – один из параметров, меняющих размер шрифта, указывается в таких значениях как пиксели (px) или же пункты (pt).
- text-align – параметр отвечающий за положение текста, слева (left), справа (right), по центру (center), по ширине (justify).
- padding-top – параметр отвечающий за отступы, в данном случае отступ сверху на 7,5 пикселей. Это своего рода некоторый костыль, который выравнивает положение текста посредине блока.
- cursor: pointer – параметр, служащий для изменения курсора при наведении.
- font-family – и собственно ещё один из параметров, отвечающих за шрифт. К слову, impact является одним из стандартных шрифтов WINDOWS, однако зачастую отсутствующий на телефонах с операционной системой android.
- Следующим этапом, следует убрать подчеркивание текста в кнопке, которое появиться если вы пропишите атрибут HREF в ссылке (А).
Именно этот кусок текста, следует вставить после параметров класса BUTTON или же перед ним. Свойство, что прописано в этом классе, отключает подчеркивание кнопки, что собственно нам и нужно.
Как добавить иконку в кнопке?
Иногда красивой кнопки становиться мало, и хочется нечто большего. В такой момент приходит помощь, в создании небольшой иконки, перед или же после текста.
Рисунок 3: Иконка в кнопке
Как же это сделать?
Переходи к редактированию кода, указанного выше. Нам следует добавить элемент IMG непосредственно в сам контейнер кнопки DIV, а так же указать у него один из атрибутов SRC – отвечающий за путь до картинки.
Рисунок 4: Кнопочка с иконочкой
Сразу скажу, что с первого раза может не получиться. И ваша кнопка немного съедет. Окажется немного выше или ниже положенного положения.
Именно меня такая кнопка не устраивает, поскольку иконка кажется для меня слишком большой. Переходим к написанию стилей. Уменьшим иконку и выровняем её относительно текста. Делается это следующим образом:
Рисунок 5: Кнопка с уменьшенной иконкой
Разберёмся, что тут происходит:
- float – параметр, позволяющий обтекать кнопку с левой (left) или правой стороны (right);
- margin-top и margin-left – это невидимые границы, создающий отступы с верхней стороны и левой стороны. Так-же можно задать отступы с низу (bottom) и права (right);
- width – ширина картинки.
- height – высота картинки.
Именно таким способом, можно создать красивую кнопку на сайте, привлекающую к себе внимание, что играет немало важную роль в создании сайта.
Полный код страницы:
Кнопки CSS. Делаем красивые кнопки с картинками
Здравствуйте, уважаемые посетители блога о заработке в интернете и разных технических приемах создания сайтов. Сегодня поговорим о том, как сделать красивые кнопки при помощи CSS. Но делать это мы будем не на чистом CSS коде, как в предыдущей записи делали Горизонтальное CSS меню, а будем подключать изображение кнопок, которое предварительно нужно подготовить. Но для начала я объясню, какую кнопку мы будем делать. Наша будущая кнопка будет реагировать на наведение курсора мыши, менять цвет. У кнопки будет эффект тени. Также она будет реагировать на нажатие. Появится ощущение, что она продавливается немного внутрь, тем самым создается эффект объемности.
Давайте начнем с создания кнопки. Открываем фотошоп. Нам надо нарисовать одну кнопку в трех вариантах. Нажимаем Ctrl + N (Файл — Создать). Размер документа можно задать Web, фон прозрачный. Это пока не имеет значения. И рисовать тоже будем на глаз, хотя, для точности можно воспользоваться линейкой Ctrl + R . Чтобы было лучше видно, что мы делаем, можно немного увеличить созданный документ нажав пару раз сочетание клавиш Ctrl + . Теперь выбираем инструмент Прямоугольник с закругленными краями U и в верхней части документа рисуем фигуру, оставляя небольшой отступ по краям. Применяем к этой фигуре стили слоя. Я применил определенные стили + добавил немного тени снизу. Затем копируем эту фигуру Ctrl + J и перемещаем вниз сразу за первой. У второй фигуры можно снизить прозрачность до 80% и слегка убрать тень. Сделать еще одну копию слоя и переместить ее вниз после второй. Применить внутреннюю тень черного цвета и внутреннее свечение тоже черного, а внешнюю тень убрать. Чтобы получился эффект вдавленности. Теперь идем в Изображение — Тримминг и нажимаем ОК, тем самым отсекая ненужные пустые части документа. Смысл в том, что надо сделать так, чтобы каждая фигура отличалась друг от друга. Можно также написать какой-нибудь текст на кнопке. У меня получилось вот так:
Затем в файл style.css нужно написать следующий код: (Для практики можно создать отдельные файлы в редакторе и экспериментировать)
Ну и на странице, где нам необходимо вставить кнопку вставляем следующую конструкцию кода:
Вы также можете посмотреть демонстрационные варианты кнопок и скачать их исходники.