Вернуться ко всем статьям
Как в HTML сделать кнопку
Почти на любом сайте есть какие-либо кнопки: отправки формы, перехода, действия.
Выделяют два основных типа кнопок: стандартные и графические.
Стандартные кнопки по умолчанию представляют собой серый прямоугольник с обводкой и текстом, иногда с иконкой, подсвечиваемый при наведении курсора. Есть два способа созданий стандартных кнопок:
- При создании формы через тег <input>.
- При помощи специального тега <button>.
Код кнопки формы выглядит следующим образом:
<form>
<input type="тип_кнопки" name="имя_поля_при_необходимости" value="текст_на_кнопке"/>
</form>
Атрибут type может принимать 3 значения:
- reset — сброс формы к значениям по умолчанию;
- button — используется в основном для активации скрипта;
- submit — для отправки данных формы на сервер;
Для вставки кнопки при помощи тега button, требуется только прописать только сам парный тег и текст кнопки между ним. По желанию можно добавьте иконку в виде растрового изображения и дополнительные атрибуты. Примеры кода простой кнопки и с изображением:
<button>Текст на кнопке</button>
<button src="имя_файла.png">Текст на кнопке</button>
При необходимости для изменения стиля кнопки можно к ней применить тег style.
Иногда бывает недостаточно вставить иконку в кнопку и изменить стиль её отображения.
Рассмотрим, как в HTML сделать кнопку, представляющую собой графическое изображение.
Для этого предварительно загрузите на сервер картинку, которую будете использовать, и примените к ней теги img и a, указывающие на изображение и ссылку. Код такой кнопки будет выглядеть следующим образом:
<a href="ссылка"><img src="имя_файла.jpg"></a>
Этот вид кнопки неприменим к формам.
