Сброс введенных значений [2/28]
Сначала разберёмся с возможностями кнопок, не рассмотренными в базовом курсе про формы.
Экспериментировать будем над формой логина в котопрофайл.
В HTML-формах есть специальная кнопка, которая сбрасывает введённые значения и возвращает изначально установленные. Это поле ввода с типом reset.
Пример использования:
<input type="reset" value="Сбросить">
Обратите внимание, что кнопка не обнуляет значения, а возвращает те, которые были установлены в полях формы по умолчанию
form2-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Сброс введенных значений</title>
<meta charset="utf-8">
<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 {
font-family: "Roboto", sans-serif;
border-radius: 5px;
}
input[type="text"],
input[type="password"] {
width: 95%;
height: 24px;
margin-bottom:10px;
padding: 2px 5px;
border: 1px solid #cccccc;
}
input[type="submit"],
input[type="reset"] {
display: inline-block;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
<link rel="stylesheet" href="/assets/course74/keksik-style.css">
</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">
<input type="submit" value="Войти">
<!-- Кнопка сброса->
<input type="reset" value="Сбросить">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>
Простая кнопка [3/28]
Помимо кнопок отправки формы или сброса введенных значений, существуют и «просто кнопки». При щелчке на такую кнопку никаких действий не происходит, а все необходимые действия обычно задаются при помощи JavaScript.
Пример записи:
<input type="button" value="Кнопка">
Выполнить задание
form3-28.html
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Простая кнопка</title>
<meta charset="utf-8">
<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="submit"],
input[type="button"] {
display: inline-block;
margin: 0 5px;
padding: 6px 15px;
color: #ffffff;
background: #2c3e50;
border: none;
}
.buttons {
margin-top: 10px;
text-align: center;
}
</style>
<link rel="stylesheet" href="/assets/course74/keksik-style.css">
</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">
<input type="submit" value="Войти">
<!-- Простая кнопка->
<input type="button" value="Кнопка">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>