Кнопка-изображение [4/28]
В качестве кнопки отправки формы можно использовать изображение.
Для этого у тега input нужно указать тип image.
Аналогично обычным изображениям на сайте у кнопки-изображения есть еще два атрибута:
src |
адрес изображения |
alt |
альтернативный текст, отображаемый в том случае, если изображение не загружено |
Кнопка-изображение работает аналогично кнопке submit, но на сервер дополнительно передаются координаты точки, по которой был произведен щелчок.
form4-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Кнопка-изображение</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://htmlacademy.ru/assets/course74/keksik-style.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input {
border-radius: 5px;
font-family: "Roboto", sans-serif;
}
input[type="text"],
input[type="password"] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
border: 1px solid #cccccc;
}
input[type="image"] {
padding: 5px;
vertical-align: top;
border: 1px solid #cccccc;
}
input[type="submit"] {
display: inline-block;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
}
</style>
</head>
<body>
<header class="page-header">Форма логина</header>
<main>
<form action="/echo" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" value="Кексик">
<label for="password">Пароль</label>
<input type="password" id="password" name="password">
<label>
<input type="checkbox" name="allow">
Разрешать гладить
</label>
<!-- Кнопка-изображение->
<input type="image" src="https://htmlacademy.ru/assets/course74/enter.png" alt="Войти">
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>
Альтернативный способ задания кнопок [5/28]
Помимо тега <input> для добавления кнопок можно использовать тег <button>. Он расширяет возможности создания кнопок.
Внутри тега <button> можно размещать любые HTML-элементы, в том числе изображения. Например:
<button>Календарь <img src="/assets/course74/calend.png" alt=""></button>
В
данном случае кнопка будет выглядеть
примерно вот так: 
Если в атрибуте type тега <button> указать значение submit или reset, то кнопка будет отправлять данные на сервер или сбрасывать введенные значения.
По умолчанию значение атрибута type – submit.
То есть внутри формы кнопка <button> по нажатию отправит форму на сервер.
form5-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Альтернативный способ задания кнопок</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://htmlacademy.ru/assets/course74/keksik-style.css">
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px #cccccc;
}
label {
display: block;
margin-bottom: 5px;
}
input,
button {
border-radius: 5px;
font-family: "Roboto", sans-serif;
}
input[type="text"],
input[type="password"] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
border: 1px solid #cccccc;
}
input[type="submit"],
button {
display: inline-block;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
}
button > img {
margin-left: 10px;
vertical-align: middle;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="page-header">Форма логина</header>
<main>
<form action="/echo" method="post">
<label for="name">Имя</label>
<input type="text" id="name" name="name" value="Кексик">
<label for="password">Пароль</label>
<input type="password" id="password" name="password">
<label><input type="checkbox" name="allow">Разрешать гладить</label>
<div class="buttons">
<!-- Кнопка->
<button type="submit">Войти<img src="https://htmlacademy.ru/assets/course74/enter-light.png"></button>
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>