Как сделать кнопку в HTML для загрузки файла

Автор: Roger Morrison
Дата создания: 18 Сентябрь 2021
Дата обновления: 10 Май 2024
Anonim
Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS
Видео: Как в HTML сделать кнопку для скачивания файла вместо открытия в браузере | Уроки HTML, CSS

Содержание

Веб-дизайнеры часто используют кнопки, встроенные в документы HTML, по функциональным и эстетическим причинам. Помимо предоставления пользователям визуально приятного способа отправки информации или принятия решений, кнопки предоставляют различные функциональные возможности в зависимости от взаимодействия с пользователем. В этой статье кнопка HTML позволит пользователю загружать файл при нажатии.


направления

Кнопки являются полезными и гибкими компонентами HTML (Hemera Technologies / PhotoObjects.net / Getty Images)
  1. Создайте файл HTML в текстовом редакторе, таком как Блокнот. Базовый файл должен содержать как минимум теги "html" и "body":

    >

    Тег «button» содержит информацию, которая описывает кнопку. В этом случае кнопка имеет общий тип «кнопка» и называется «Скачать». Слова между тегами "" появятся на кнопке, когда страница отобразится в браузере.

  2. Сделайте так, чтобы кнопка указывала на файл при нажатии пользователем. Для этого добавьте событие «onClick»:

    Событие «onClick» запускается, когда пользователь нажимает кнопку. В этом случае откроется новое окно, указывающее на адрес файла.

  3. Сохраните файл и откройте его в своем веб-браузере. Сохраните с расширением «html» (например, «test.html»). Откройте его в браузере. Кнопка появится в левом верхнем углу окна, и щелчок по ней направит пользователя к файлу и начнет процесс загрузки.


чаевые

  • Этот код можно скопировать и вставить в любой HTML-документ. Прочтите веб-сайт «W3C Schools» (w3schools.com), чтобы узнать больше о возможностях кнопок HTML.

Что вам нужно

  • Текстовый редактор
  • Веб-браузер

ссылки

  • W3C Schools: HTML-тег «кнопка»
  • Кодер JavaScript: использование метода Window.Open

средство

  • W3C Schools: HTML-тег «кнопка»