Почему при нажатии на кнопку поиска страница обновляется
* {box-sizing: border-box;}
form {
position: relative;
width: 750;
margin: 25px;
}
input {
width: 100%;
height: 42px;
padding-left: 10px;
border: 2px solid silver;
border-radius: 5px;
outline: none;
background: #F9F0DA;
color: #9E9C9C;
}
button {
position: absolute;
top: 0;
right: 0px;
width: 42px;
height: 42px;
border: none;
background: silver;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
<form>
<input type="text" placeholder="Искать здесь...">
<button type="submit"></button>
</form>
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
button type="submit" - означает, что при клике на неё все данные из формы будут отправлены на сервер. Отсылается запрос всегда по тому адресу, который указан в атрибуте action. Если такой атрибут отсутствует или он пустой action='', то форма будет отправляться на тот же url, на котором находится. Поэтому происходит просто обновление страницы