Кнопки в HTML. Как осуществить отправку или очистку формы?

кнопки в html. как осуществить отправку или очистку формы?

Создание кнопки отправки формы

Ранее мы уже рассматривали процесс отправки формы в HTML. Примеры, приводимые во всех предыдущих уроках, содержат специальные кнопки, отвечающие за инициацию этой процедуры. Цель данной статьи заключается в закреплении изученного материала и рассмотрении новых возможностей.

Форма может быть отправлена программным путем с помощью языка программирования JavaScript, встроенного в браузер. Кнопка, выполняющая отправку формы, необходима в обязательном порядке, если вы применяете только средства HTML.

Первым способом создания кнопки является использование элемента <input>, атрибут type которого должен иметь значение submit. Отображение такого поля может разниться в разных типах браузеров, но в целом оно выглядит как выступающая прямоугольная область. Вы можете задать произвольный текст, который будет отображен на кнопке отправки. Для этого используйте атрибут value с текстовым значением.

Вторым способом является использование элемента <button>. Он также должен содержать атрибут type со значением submit. Отличительная черта такого поля в том, что между открывающим тегом <button> и закрывающим </button> можно располагать другие HTML-элементы. Например, изображения. При нажатии на любом внутреннем элементе будет выполнена отправка формы.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания кнопок отправки формы</title>
    </head>
    <body>
        <form>
            <!-- обычная кнопка отправки формы -->
            <input type="submit" value="Отправить">

            <!-- кнопка содержащая изображение -->
            <button type="submit">
                <img src="https://coder-booster.ru/images/main-logo.png"
                    alt="Логотип сайта CoderBooster">
            </button>
        </form>
    </body>
</html>
Отображение созданных кнопок отправки формы в браузере
рис 1. Отображение кнопок отправки формы в браузере

Заметка
Никаких дополнительных настроек не требуется. При нажатии кнопки браузер самостоятельно обработает содержимое формы и согласно заданным атрибутам элемента <form> выполнит отправку на сервер.

Создание кнопки очистки формы

Аналогично правилам, изложенным выше, в HTML можно создать и кнопку очистки формы. При её нажатии форма будет возвращена к тому состоянию, в котором находилась при загрузке страницы.

Для создания кнопки очистки формы можно использовать элемент <input> или <button>. Их атрибуты type должны содержать значение reset. Как и в примерах с отправкой формы, элемент <button> может иметь произвольное содержимое, а чтобы изменить текст кнопки, созданной через <input>, используйте атрибут value.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания кнопок очистки формы</title>
    </head>
    <body>
        <form>
            <!-- обычная кнопка очистки формы -->
            <input type="reset" value="Очистить">

            <!-- кнопка содержащая изображение -->
            <button type="reset">
                <img src="https://coder-booster.ru/images/main-logo.png"
                    alt="Логотип сайта CoderBooster">
            </button>
        </form>
    </body>
</html>

Использование произвольных кнопок

HTML также позволяет создать любое количество произвольных кнопок. Они не имеют поведения по умолчанию. При нажатии ничего не происходит. Основной целью их существования является программная обработка взаимодействия с помощью JavaScript. Так программисты могут реализовать дополнительный функционал. Например, можно создать несколько кнопок, при нажатии по которым содержимое формы будет заполняться какими-либо предустановленными значениями.

Для создания таких кнопок, так же как и в вышеперечисленных примерах, используются элементы <input> и <button>. Отличием является лишь добавление атрибута type со значением button.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Cоздание произвольных кнопок формы</title>
    </head>
    <body>
        <form>
            <!-- обычная произвольная кнопка формы -->
            <input type="button" value="Произвести действие">

            <!-- кнопка содержащая изображение -->
            <button type="button">
                <img src="https://coder-booster.ru/images/main-logo.png"
                    alt="Логотип сайта CoderBooster">
            </button>
        </form>
    </body>
</html>

Последние публикации