Как сделать кнопку в хтмл
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Как сделать кнопку в HTML?
Кнопки для сайта HTML создаются одним из двух способов:
2. С помощью тега button :
В результате получаются две одинаковые кнопки:
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Виды кнопок html
1. Кнопка-ссылка HTML
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html ) может быть создана с помощью ссылок « якорей ». Обычный « якорь » имеет следующий вид:
Такой « якорь » невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к « якорю », используется следующая команда:
Нажатие на название кнопки, моментально переводит курсор к « якорю ».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
Выглядит это следующим образом:
2. Кнопка Submit
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
3. Кнопка Reset
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
4. HTML кнопка с картинкой
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
HTML тег кнопка
HTML тег используется для размещения кнопки. Внутри тега вы можете разместить как отформатированный текст, так и изображение. Это основная разница между этим элементом и кнопками, созданными с использованием тега (c атрибутом type = «button» ).
Атрибут type тега задает тип, используемой кнопки:
| Значение | Описание |
|---|---|
| button | Обычная кликабельная кнопка, которая не имеет поведения по умолчанию. Может использоваться совместно с клиентскими скриптами. |
| reset | Кнопка, которая сбрасывает все значения элементов управления формы к их первоначальным значениям. |
| submit | Кнопка, которая служит для отправки данных формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически меняется в пустое или недопустимое значение. |
Всегда указывайте для тега тип атрибута type = «button» если элемент используется в качестве обычной кнопки. Если вы используете тег внутри HTML формы, то вы можете столкнуться с тем, что старые версии браузеров могут представить различные значения при отправке формы. Рекомендуется в этом случае использовать элемент для отправки HTML форм.
Давайте рассмотрим пример использования:
В данном примере мы разместили 3 кнопки, которым задали уникальные имена атрибутом name и с использованием внутренних CSS стилей указали ширину (width) размером 80 пикселей и высоту (height) размером 50 пикселей:
Результат нашего примера:
(кнопкa в HTML).»> Рис. 41 Пример использования тега (кнопкa в HTML).
Отключение кнопки
Атрибут disabled (HTML тега ) является логическим атрибутом и указывает, что кнопка должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут используется совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.
В данном примере мы указали для второго элемента с типом кнопка ( type = «button» ) атрибут disabled, который отключает элемент и не дает нам кликнуть по кнопке.
Рис. 41а Пример отключения кнопки (предварительное отключение элемента).
Автофокус на кнопке
В HTML 5 был добавлен такой логический атрибут как autofocus
(HTML тега ) указывает, что кнопка должна автоматически получить фокус при загрузке страницы.
Обращаю Ваше внимание, что только один элемент в документе может иметь атрибут autofocus (браузер даст фокус тому элементу, который ближе расположен к началу документа, остальные просто будут игнорированы).
Давайте рассмотрим пример использования:
В данном примере мы создали две кнопки (HTML тег ), атрибутом name указали им уникальные имена. Для второй кнопки атрибутом autofocus задали, что при загрузке страницы она получит фокус (браузеры, как правило, подсвечивают этот элемент).
Результат нашего примера:
Рис. 41б Пример использования атрибута autofocus (фокус на кнопке).
Браузер Internet Explorer поддерживает атрибут autofocus только с десятой версии.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Для выполнения задания Вам потребуются знания из статьи «HTML Цвета». Если вы пропустили её, то вернитесь для её изучения.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Кнопка html: применение, изготовление
Начинающие создатели сайтов (не те, кто использует готовые решения, а именно те, кто хочет создавать сайты самостоятельно) изучают html, однако не всегда удается с первого раза понять все нюансы создания сайта своими руками.
Кнопка html в меню сайта в стиле дизайна
Кнопки для сайта html выполняют две функции: во-первых, они дают возможность перехода на заданную страницу, а во-вторых, имеют дизайн, который вписывается и гармонирует с общим стилем страницы.
Кнопка, по своей сути является той же самой ссылкой, только имеющей приятный вид и, если требуется, меняющей оттенки или форму при клике или наведении на нее.
Как сделать кнопку в html
Сделать кнопку можно двумя способами: самому или используя сервисы для создания кнопок.
Кнопка с использованием изображения
Простая кнопка html имеет вид картинки-ссылки и создается путем вставки тега ‘a’ (ссылки) на тег img (изображение).
Указанный пример, по сути, является простой картинкой-ссылкой, однако может иметь любой вид и отлично вписываться в дизайн, однако данная кнопка html не может «работать», то есть менять вид в различных ситуациях.
Для того чтобы кнопка имела нестандартный вид и могла меняться в зависимости от ситуации, следует изменить ее изначальный вид и добавить CSS.
Кнопки для сайта с применением CSS
Код кнопки для сайта html будет иметь вид:
Внимание! При использовании примеров, удалите значок «, чтобы получилось a и href.
Наверняка даже самому начинающему кодеру понятен смысл этого примера, но стоит сказать, что здесь используется небольшой код, который позволяет сделать самую простую кнопку, а для применение стилей при наведении или активности ссылки следует применять дополнительные теги и параметры.
Более сложная кнопка для сайта
Кнопки на сайте могут использовать не только CSS для своего внешнего вида, также применяются и другие языки программирования, позволяющие сделать качественные кнопки html сайтов, например JavaScript, который более мощный и может реализовать больше интересных идей для сайта.
Кроме простой задачи в виде перенаправления пользователей по другим адресам сайта, кнопка html выполняет и более серьезную работу, которая заключается в отправке данных из формы, в которую пользователь ввел свои данные, например, регистрация.
Код кнопки html в данном случае имеет вид:
Внимание! При использовании примеров удалите «, чтобы получилось input.
Реализовать кнопку такого рода очень просто, и на примере показана рабочая кнопка, которая выполнит отправку введенных данных из формы.
Вся проблема заключается не в том, чтобы сделать кнопку html, а в том, чтобы реализовать обработку данных, которые прислал пользователь, для чего требуется знание более сложного, но одного из самых мощных, языка программирования. PHP позволяет делать настоящие сайты и, например, некоторые готовые CMS написаны именно на нем.
Кнопки, написанные для форм, так же как и обычные, могут быть преобразованы в требуемый вид, однако их назначение имеет большую важность и несет больше ответственности.
Делаем стильные кнопки
Рис. 1. Исходная и измененная кнопка
Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.
За основу возьму оригинальную кнопку в браузере, которая содержит линейный вертикальный градиент и скругленные края.
Вид кнопок в разных браузерах показан на рис. 2.
Рис. 2. Кнопки со скругленными уголками
В общем, все ожидаемо. Старые версии IE не поддерживают CSS 3, остальные корректно делают нужные мне уголки. Опера почему-то не отображает фон по умолчанию, как это делают другие браузеры, но про Оперу еще зайдет особый разговор.
Теперь самое интересное, делаем вертикальный линейный градиент. Для этого опять в ход пойдут индивидуальные стили для каждого браузера.
Firefox
В градиенте указывается исходная точка, угол градиента, начальный и конечный цвет. В нашем случае, когда градиент идет вертикально сверху вниз, достаточно задать только цвета, остальные параметры используются по умолчанию.
Chrome, Safari
Здесь указывается тип градиента (linear), стартовая точка приложения градиента (левый верхний угол), финальная точка (левый нижний угол), а также начальный и конечный цвет.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00BBD6′, endColorstr=’#EBFFFF’);
Опера отдыхает, в ней градиенты еще не реализованы.
Собираем воедино все свойства для браузеров, уголков и градиентов (пример 1).
Пример 1. Кнопки с линейным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Получилось довольно симпатично (рис. 3), но есть и явные отличия от первоначальной кнопки — она выглядит плоской, как доска.
Рис. 3. Вид кнопки с градиентом
Сделать кнопку нужной формы можно опять же градиентом, «играя» цветами. Двумя значениями градиента уже не обойтись, к счастью, Firefox и Safari предлагают решение.
Firefox
Вместо двух значений вставляем желаемое количество цветов, градиент будет плавно переходить от одного цвета к другому.
Chrome, Safari
Параметр color-stop указывает точку приложения нового цвета. Значение варьируется от 0 до 1.
Пример 2. Кнопки с улучшенным градиентом
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
Результат примера показан на рис. 4.
Рис. 4. Градиент, какой надо градиент
Аналогично можно создавать любые другие градиенты на кнопке или другом элементе (рис. 5). Но это уже сделайте самостоятельно, для чего в практикум добавил соответствующую задачу.
Рис. 5. Такие разные кнопки
Подведу итоги. Кнопку с градиентом и скругленными уголками без изображений сделать можно. Однако с браузерами разброд и шатание. Опера вообще не умеет работать с градиентами, в IE 9 наблюдается неприятный баг при сочетании градиента с уголками (рис. 6).
Рис. 6. Наложение фона на уголки в IE 9
Что ж, пока будем делать «красивости» для браузеров Firefox, Safari и Chrome.