Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button> .
Рассмотрим вначале добавление кнопки через <input> и его синтаксис.
Атрибуты кнопки перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Значение кнопки и одновременно надпись на ней. |
Создание кнопки показано в примере 1.
Пример 1. Добавление кнопки
HTML5 IE Cr Op Sa Fx
Пробелы в надписи на кнопке, в отличие от текста HTML, учитываются, поэтому можно ставить любое количество пробелов, которые в итоге влияют на ширину кнопки. Результат примера показан на рис. 1.
Рис. 1. Вид кнопки
Второй способ создания кнопки основан на использовании тега <button> . Он по своему действию напоминает результат, получаемый с помощью тега <input> . Но в отличие от него предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML включая изображения и таблицы. На рис. 2 показаны разные виды кнопок, полученные с помощью <button> .
Рис. 2. Кнопки, созданные с помощью <button>
Синтаксис создания такой кнопки следующий.
Атрибуты перечислены в табл. 1, но в отличие от кнопки <input> атрибут value определяет только отправляемое на сервер значение, а не надпись на кнопке. Если требуется вывести на кнопке изображение, то тег <img> добавляется внутрь <button> , как показано в примере 2.
Пример 2. Рисунок на кнопке
HTML5 IE Cr Op Sa Fx
В данном примере показано создание обычной кнопки с текстом, при этом , а также кнопки с одновременным использованием текста и рисунка. Размер кнопки зависит от содержимого контейнера <button> , но пробелы игнорируются, поэтому простым увеличением их количества, как в случае использования <input> , ширину кнопки изменить не удастся.
Кнопка Submit
Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега <form> . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.
Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button> .
Атрибуты те же, что и у рядовых кнопок (пример 3).
Пример 3. Отправка данных на сервер
HTML5 IE Cr Op Sa Fx
Атрибут name для этого типа кнопки можно не писать. Если не указать значение value , то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.
Кнопка Reset
При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.
Синтаксис создания указанной кнопки прост и похож на другие кнопки.
В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега <input> . После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».
Пример 4. Кнопка для очистки формы
HTML5 IE Cr Op Sa Fx
Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value , на кнопке по умолчанию будет добавлен текст «Очистить».
как можно сделать так, что бы при нажатии на кнопку ( button ) появилась картинка рядом c кнопкой ? ( html, php. )
что бы при нажатии на эту кнопку, рядом с ней ( кнопкой ), появилась какая-нибудь картинка ?
< input type=»button» value=»Кнопка» onclick=»((document.all)?document.all[‘myimage’]:document.getElementById(‘myimage’)).innerHTML = ‘< img src=adres_kartinki alt=picture>< /img>’ » />
< div >< /div>
Удали лишние пробелы в тегах
Если хочется, что б картинка была в той же строке, что и кнопка, используй span вместо div
Как сделать — адаптивные модальные или всплывающее изображение, окно
Узнайте, как создавать адаптивные модальные образы с помощью CSS и JavaScript.
Модальное изображение
Модальным является диалоговое окно/всплывающее окно, которое отображается поверх текущей страницы.
В этом примере используется большая часть кода из предыдущего примера, модальные коробки, только в этом примере мы используем образы.
Шаг 1) добавить HTML:
Пример
<!— Trigger the Modal —>
<img src=»https://html5css.ru/howto/img_snow.jpg» alt=»Snow» style="width:100%;max-width:300px">
Шаг 2) добавить CSS:
Пример
/* Style the Image Used to Trigger the Modal */
#myImg <
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
>
/* The Modal (background) */
.modal <
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
>
/* Modal Content (Image) */
.modal-content <
margin: auto;
display: block;
width: 80%;
max-width: 700px;
>
/* Caption of Modal Image (Image Text) — Same Width as the Image */
#caption <
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
>
/* Add Animation — Zoom in the Modal */
.modal-content, #caption <
animation-name: zoom;
animation-duration: 0.6s;
>
/* The Close Button */
.close <
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
>
.close:hover,
.close:focus <
color: #bbb;
text-decoration: none;
cursor: pointer;
>
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) <
.modal-content <
width: 100%;
>
>
Шаг 3) добавить JavaScript:
Пример
// Get the modal
var modal = document.getElementById(‘myModal’);
// Get the image and insert it inside the modal — use its «alt» text as a caption
var img = document.getElementById(‘myImg’);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() <
modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>
// Get the <span> element that closes the modal
var span = document.getElementsByClassName(«close»)[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>
Совет: Кроме того, проверьте модальные и Лайтбокс для изображения.