Однією з найважливіших частин веб-розробки є створення інтерактивних форм, які дозволяють користувачам вводити та надсилати дані. Часто виникає ситуація, коли у формі потрібно додати кнопку, яка дозволить користувачеві очистити всі введені дані та розпочати заповнення форми заново.
HTML дає простий спосіб додати таку кнопку. Для цього потрібно використовувати елемент <button> усередині форми, атрибут type повинен дорівнювати "reset". Крім того, можна встановити зовнішній вигляд і текст кнопки, використовуючи атрибути class і value.
Зразковий код для додавання кнопки очищення форми:
<form>
<!– элементы формы –>
<button type=”reset” class=”clear-button”>Очистить форму</button>
</form>
Стилізація кнопки може бути виконана за допомогою CSS. Для цього можна використовувати клас "clear-button" та застосувати необхідні стилі, такі як колір тла, розмір шрифту та інші. Також можна встановити іконку для кнопки, щоб вона краще виділялася або відповідала дизайну сайту.
Додавання кнопки очищення форми HTML є гарним способом поліпшити досвід користувача і спростити роботу з формою. Користувачі зможуть швидко очистити всі введені дані та розпочати заповнення знову, якщо вони зробили помилку або змінили своє рішення. Крім того, це також знижує кількість помилок, пов'язаних із неправильно заповненими формами. Використовуйте цю функцію під час створення наступної інтерактивної форми!
| Тег | Опис | приклад |
|---|---|---|
<input type="reset"> | Створює кнопку, яка скидає всі значення форми до вихідних. | <form> <input type="text" name="name" value="Имя"> <input type="email" name="email" value="Электронная почта"> <input type="reset" value="Очистить"> </form> |
<button type="reset"> | Створює кнопку, яка скидає всі значення форми до вихідних. | <form> <input type="text" name="name" value="Имя"> <input type="email" name="email" value="Электронная почта"> <button type="reset">Очистить</button> </form> |
<script> | Можна використовувати JavaScript для створення функції, яка скидатиме значення форми. | <form id="myForm">
<input type="text" name="name" value="Имя">
<input type="email" name="email" value="Электронная почта">
<button type="button" onclick="resetForm()">Очистить</button>
</form>
<script>
function resetForm() {
document.getElementById("myForm").reset();
}
</script> |
Як очистити форму в HTML?
Тег input з атрибутом type у значенні reset створює кнопку скидання полів HTML форми. Після натискання на таку кнопку поля форми набудуть того виду, який вони мали при заході на сторінку (до внесених користувачем змін).
Як зробити кнопку у формі HTML?
Кнопка HTML Кнопку HTML можна зробити трьома різними способами: За допомогою тега input; За допомогою тега button; За допомогою посилання (тег a) та CSS-властивостей.
Навіщо використовується input()?
Опис Елемент HTML <input> використовується для створення інтерактивних елементів керування у веб-формах для отримання даних від користувача; в залежності від пристрою та user agent, доступний широкий вибір типів вхідних даних та віджетів керування.