Как сделать в html ссылку на почту: Как сделать ссылку на адрес электронной почты?

Содержание

Как сделать ссылку на электронную почту в html

HTML-ссылка mailto

mailto: HTML-ссылка на электронную почту, что это такое, как создать, примеры и генератор кода.

Что такое ссылка mailto

Ссылка Mailto — это тип HTML-ссылки, которая активирует почтовый клиент по умолчанию на компьютере для отправки электронной почты.

Веб-браузер требует, чтобы на его компьютере было установлено программное обеспечение электронной почты по умолчанию, чтобы активировать почтовый клиент.

Если у вас , например , Microsoft Outlook в качестве почтового клиента по умолчанию, нажатие на ссылку mailto откроет новое окно почты .

Как создать ссылку mailto в HTML

Ссылка mailto записывается как обычная ссылка с дополнительными параметрами внутри атрибута href:

<a href=»mailto:[email protected]«/Link text</a/

Параметр	Описание
mailto:[email protected]	адрес получателя электронной почты
cc=name@email. com	адрес электронной почты с копией
bcc=[email protected]	адрес электронной почты для слепой копии
subject=subject text	тема электронного письма
body=body text	тело электронного письма
?	разделитель первого параметра
&	разделитель других параметров

mailto примеры

Написать на адрес электронной почты

<a href=»mailto:[email protected]»/Send mail</a/

Код сгенерирует эту ссылку:

При нажатии на ссылку выше откроется новое почтовое окно:

Отправить письмо на адрес электронной почты с темой

<a href=»mailto:[email protected]?subject=The%20subject%20of%20the%20mail»/Send mail with subject</a/

% 20 представляет собой пробел.

Код сгенерирует эту ссылку:

При нажатии на ссылку выше откроется новое почтовое окно:

Отправить письмо на адрес электронной почты с копией, скрытой копией, темой и телом

<a href=»mailto:name1@rapidtables. [email protected]&bcc=name3@RT
&subject=The%20subject%20of%20the%20email
&body=The%20body%20of%20the%20email»/
Send mail with cc, bcc, subject and body</a/

% 20 представляет собой пробел.

Код сгенерирует эту ссылку:

При нажатии на ссылку выше откроется новое почтовое окно:

Как добавить пробелы в теме или теле письма

Вы можете добавить пробелы, вписав %20 текст в тему или основной текст.

<a href=»mailto:[email protected]?subject=The%20subject&body=This%20is%20a%20message%20body»/Send mail</a/

Как добавить разрыв строки в тело письма

Вы можете добавить новую строку, написав %0D%0A текст в теле.

Как добавить нескольких получателей электронной почты

Вы можете добавить нескольких получателей, написав разделитель-запятую ( , ) между адресами электронной почты.

Mailto — HTML ссылка на электронную почту на сайте

Чтобы как-то разбавить дизайнерскую тематику посмотрим сегодня еще один урок по верстке – после предыдущего поста о CSS hover эффектах прошло уже немало времени. Данная заметка будет посвящена вопросу создания ссылки на почту в html. Все это реализуется с помощью обычного тега A, который не смотря на всю свою простоту, может использоваться не только для оформления гиперссылкок, но и имеет несколько интересных нюансов.

Базовый синтаксис выглядит так:

<a href=»mailto:[email protected]»>Напишите нам</a>

Здесь в качестве атрибута href пишете фразу mailto и почту, куда нужно отправить сообщение. Внутри тега располагается текст линка, на который пользователь будет нажимать.

Проблема этой конструкции заключается в не самом лучшем UI/UX решении для пользователей, т.к. клик по линку выполняет действия, которые далеко не всем нравятся. Это как с PDF-документом, когда тот сразу открывается в браузере.

Открытие в новом окне

Если на пользовательском компьютере одна из почтовых программ (Apple Mail, MS Outlook и т.п.) установлена как приложение, срабатывающее по умолчанию для текущей задачи, то при клике на mailto-линк откроется соответствующее приложение с новым созданным письмом. Причем не важно указан ли здесь атрибут target=»_blank» (срабатывание в новом окне) или нет – программа всегда реагирует одинаково.

Когда же для почты вы используете веб-клиент, например, указали в Chrome в качестве базового почтового приложений Gmail, то клик по ссылке выполняет такие же действия, как и в любом другом случае — то есть без указания открытия в новом окне вы просто будете перенаправлены сходу на Gmail (текущая открытая страница пропадет).

В принципе, прописывание target=»_blank» для всех линков на сайте такой же спорный вопрос как и отключение правого клика мыши. Но даже если вы против этого атрибута в целом, то как минимум, для ссылки на адрес почты это имеет смысл делать.

<a href=»mailto:[email protected]» target=»_blank» rel=»noopener noreferrer»> Напишите нам </a>

Дополнительные параметры в письме

Если вы где-то видели фишку, когда при открытии нового письма там автоматически вводится тема сообщения и даже его содержимое, то знайте – все это легко делается через следующие доп. параметры:

Вы даже можете использовать механизм добавление дополнительных получателей (в том числе и скрытых) — вставляйте специальные переменные CC (копия) и BCC (скрытая копия). Значения в данных опциях разделяются запятыми, а между ними ставится символ «&».

Конструктор ссылок mailto

Новичкам, которые так и не поняли как сделать ссылку на почту рекомендуем глянуть сервис mailtolink.me. Он позволяет с помощью визуально понятного интерфейса заполнить все необходимые параметры сообщения и на выходе получить готовый html mailto код.

Единственный нюанс, что нужно еще тестировать, – ввод русских букв, сервис преобразовывает их в определенные символы. Возможно, проще будет создать сначала англоязычный вариант линка, а потом поменять фразы в нем.

CSS оформление

В статье про подчеркивание ссылок и текста с CSS вы могли видеть много интересных приемов. Учитывая то, что люди не особо любят сюрпризы, есть идея выделять ссылки на электронную почту каким-то другим образом, отличимым от обычных. Это, в принципе, логично, т.к. клики по ним будут давать разные результаты.

Первый прием – подставлять в качестве анкора непосредственно сам почтовый адрес:

Также дополнительно можно задать CSS-стиль:

Этот код применяется во всем A-тегам, поэтому, если вам нужно выделять лишь некоторые, дополнительно используйте классы/id.

Плагин IHateMailto в Chrome/Firefox

Для людей, которых функциональность данного атрибута нереально раздражает, разработчики придумали специальное расширение для браузеров — ihatemailto.com.

Его функциональность состоит из двух частей: во-первых приложение блокирует традиционный механизм срабатывания почтовой ссылки, а во-вторых, сам email-адрес при этом копируется в буфер обмена.

Почтовая форма

Еще один экстравагантный вариант применения ссылки mailto в html предложен авторами оригинальной статьи, которую мы сегодня и переводили. Как вы знаете, тег Form позволяет с помощью директивы GET переадресовывать на внешний URL-адрес, и в качестве этого URL может выступать mailto-ссылка с введенными в форме параметрами.

То есть это такая себе простенькая альтернатива отправке почты через форму обратной связи, но без использования PHP или модулей разных CMS. Понятно, что после клика вам придется использовать тот или иной клиент для написания сообщения, вы лишь заполните его базовые параметры: адресата, тему и т.п.

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

Все о почтовых ссылках: работа с mailto HTML

От автора: вы можете сделать так, чтобы ссылка открывала почтовую программу по умолчанию. Давайте немного глубже рассмотрим mailto HTML. Она довольно проста в использовании, но, как и в случае практически всего остального в Интернете, есть много вещей, на которые стоит обратить внимание.

Основной функционал

Это работает! Но мы сразу же сталкиваемся с несколькими проблемами UX. Одной из них является то, что события после нажатия на эту ссылку удивляют некоторых людей и им это не нравится. Что-то вроде того, как человек кликает по ссылке на PDF-файл, и открывается файл вместо веб-страницы. Легкий вздох. Мы вернемся к этому немного позже.

«Открыть в новой вкладке» иногда важно

Если у пользователя почтовый клиент по умолчанию (например, Outlook, Apple Mail и т. д.) настроен как отдельное приложение, это не имеет значения. Они нажимают на mailto: ссылку, открывается это приложение, создается новое электронное письмо, и оно ведет себя одинаково независимо от того, пытались ли вы открыть эту ссылку в новой вкладке или нет.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Но если у пользователя настроен почтовый клиент на основе браузера, это имеет значение. Например, вы можете разрешить Gmail обрабатывать электронную почту по умолчанию в Chrome. В этом случае ссылка ведет себя как любая другая ссылка. Если вы не откроете новую вкладку, страница будет перенаправлена к Gmail.

Я не совсем уверен насчет этого. Раньше я рассматривал вопрос об открытии ссылок в новых вкладках, но не об открытии электронных писем. Я бы сказал, что скорее склоняюсь к использованию target=»_blank» для таких ссылок, несмотря на свои чувства по поводу использования открытия в новой вкладке в других сценариях.

Специальные ссылки. Справка

Что такое специальные ссылки и обработчики протоколов
Назначить Яндекс Почту для обработки протокола mailto
Назначить Яндекс Календарь для обработки протокола webcal
Изменить назначенные обработчики протоколов
Запретить обработку протоколов
Отправить ссылку на страницу по электронной почте

Специальные ссылки — это ссылки, при переходе по которым открываются программы. Например, когда вы нажимаете на ссылку с адресом электронной почты, запускается почтовая программа. В ней создается сообщение с заполненным адресом получателя.

Специальные ссылки используют следующие протоколы:

mailto — чтобы открывать приложение для работы с электронной почтой;
webcal — чтобы добавлять событие в календарь.

Обработчики протоколов — это программы или веб-службы, которые открываются при переходе по специальным ссылкам.


Протокол	Обработчик протокола
Протокол	Программа	Веб-служба
webcal	Outlook	Яндекс Календарь
mailto	Outlook, The Bat!	Яндекс Почта

В настройках Яндекс Браузера можно задать веб-службу, которая будет использоваться по умолчанию для электронной почты и календаря.

Примечание. Если вы не назначили обработчики протоколов, специальные ссылки передаются в программы, которые заданы на компьютере по умолчанию для почты или календаря.

Когда вы в первый раз открываете Яндекс Почту в Браузере, он предлагает назначить ее обработчиком протокола по умолчанию:

В правой части В адресную строку можно вводить поисковые запросы — Браузер сам поймет, что вам нужно.»}}»> нажмите значок .
Выберите Разрешить.
Нажмите Готово.

Если в правой части Умной строки нет значка , назначьте Яндекс Почту обработчиком с помощью консоли JavaScript:

Перейдите на страницу Яндекс Почты.
Нажмите клавиши Ctrl + Shift + J (для Windows и Linux) или ⌥ + ⌘ + J (для macOS), чтобы открыть консоль JavaScript.

Введите в консоль команду:

javascript:window.navigator.registerProtocolHandler("mailto","https://mail. yandex.ru/compose?mailto=%s","Яндекс.Почта")

Нажмите Enter.
В открывшемся окне нажмите Разрешить.

Совет. Закройте консоль JavaScript с помощью значка либо клавиш Ctrl + Shift + J (для Windows и Linux) или ⌘ + ⌥ + J (для macOS).

Перейдите на страницу Яндекс Календаря.
Нажмите клавиши Ctrl + Shift + J (для Windows и Linux) или ⌥ + ⌘ + J (для macOS), чтобы открыть консоль JavaScript.

Введите в консоль команду:

javascript:window.navigator.registerProtocolHandler("webcal","https://calendar.yandex.ru/?extsrc=webcal&url=%s","Яндекс.Календарь")

Нажмите Enter.
В открывшемся окне нажмите Разрешить.
В окне Выбор стандартных приложений для протоколов найдите протокол WEBCAL и выберите для него Яндекс Браузер.

Совет. Закройте консоль JavaScript с помощью значка либо клавиш Ctrl + Shift + J (для Windows и Linux) или ⌘ + ⌥ + J (для macOS).

Чтобы просмотреть список назначенных обработчиков протоколов:

Нажмите → Настройки → Сайты.
Прокрутите страницу вниз и нажмите Расширенные настройки сайтов.
В блоке Обработка протоколов нажмите Настройки сайтов.

Откроется окно со списком назначенных обработчиков:

В окне вы можете:

Назначить веб-сервис обработчиком протокола

Наведите указатель мыши на обработчик и нажмите Использовать по умолчанию.

Удалить обработчик протокола

Наведите указатель мыши на обработчик и нажмите Удалить.

Если вы не хотите, чтобы при переходе по специальным ссылкам открывались программы или веб-службы, — запретите обработку протоколов на всех сайтах:

Нажмите → Настройки → Сайты.
Прокрутите страницу вниз и нажмите Расширенные настройки сайтов.
В блоке Обработка протоколов включите опцию Запрещено.

Чтобы отправить ссылку на открытую в Браузере страницу по электронной почте:

Установите указатель мыши в В адресную строку можно вводить поисковые запросы — Браузер сам поймет, что вам нужно.»}}»>.
В правой части Умной строки нажмите Поделиться → Отправить по почте. Откроется новое письмо со вставленной ссылкой на страницу.
Введите электронный адрес и отправьте письмо.

Способ работает, если в Браузере назначен обработчик протокола mailto. Чтобы проверить это:

Нажмите → Настройки → Сайты.
Прокрутите страницу вниз и нажмите Расширенные настройки сайтов.
Убедитесь, что в блоке Обработка протоколов включена опция Разрешено.
Нажмите ссылку Настройки сайтов.
Убедитесь, что для электронной почты назначен обработчик mailto.

Написать в службу поддержки

Была ли статья полезна?

Как создать ссылку на электронную почту в HTML

‘).insertAfter(«#intro»),$(‘

‘).insertBefore(«.youmightalsolike»),$(‘

‘).insertBefore(«#quiz_container»),$(‘

‘).insertBefore(«#newsletter_block_main»),fa(! 0),b=document.getElementsByClassName(«scrolltomarker»),a=0;a

В этой статье:

Шаги

Дополнительные статьи

Источники

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

Шаги

1
Введите тег привязки <a href= в HTML-документе.
Ссылка будет начинаться с атрибута «<a href=» в HTML-документе. Тег «<a href=» указывает браузеру, что следующий элемент является ссылкой.
- Введите весь HTML-код, прежде чем делать переходы в другие разделы кода.
2
Введите mailto: после символа «=». Так вы укажете браузеру, что ссылка относится к адресу электронной почты, а не к веб-странице.
3
Введите адрес электронной почты. На данный момент введенная вами строка должна выглядеть так: <a href=mailto:[email protected].
4
Добавьте тему письма (по желанию). Для этого после адреса электронной почты введите вопросительный знак (?), введите слово «subject» (без кавычек), введите знак равенства (=), а затем введите тему внутри кавычек.
- Если вы решили добавить тему письма, введенная вами строка должна выглядеть так: <a href=mailto:[email protected]?subject="текст темы"
- В тексте темы не пользуйтесь символами, которые не являются буквенно-цифровыми. Это необходимо, чтобы ссылка работала правильно.
- С помощью синтаксиса mailto можно добавить информацию для предварительного заполнения строки темы, но такой метод используется крайне редко — он более распространен, когда письма отправляются на сервер с ботом, который управляет ими для дальнейшей обработки (фильтрации).
- С помощью аналогичного синтаксиса можно добавить строки «body» (тело письма), «cc» (копия) и «bcc» (скрытая копия). Введите вопросительный знак (?), введите «body», «cc» или «bcc», введите знак равенства (=), а затем введите текст строки внутри кавычек.
5
Введите >, чтобы добавить закрывающую скобку.
До сих пор введенные HTML-команды указывали браузеру на адрес электронной почты и добавляли тему/копию/скрытую копию. Закрывающая скобка «>» сообщает браузеру, что команд, которые нужно выполнить при щелчке по ссылке, больше нет.
6
Введите текст ссылки. Это текст, по которому пользователь щелкнет, чтобы открыть ссылку на электронную почту. Введите текст после закрывающей скобки. В качестве текста может выступить слово, фраза или даже копия адреса электронной почты. Как правило, вводится слово «нажмите здесь», «почта» или аналогичное.
7
Введите </a> после текста ссылки, чтобы закрыть HTML-команду. Тег привязки нужно закрыть, чтобы оставшийся код не стал частью этого тега.
- Вся HTML-команда, которая добавляет ссылку на электронную почту, должна выглядеть так: <a href=mailto:[email protected]?subject="HTML ссылка">Нажмите здесь, чтобы отправить письмо</a>
8
Вставьте другой код в HTML-документ. Сделайте это, если в документ нужно добавить еще какой-нибудь код. Теперь сохраните документ.
Реклама

Советы

Тегом привязки <a> можно пользоваться по-разному. Почитайте об этом теге в интернете, чтобы эффективно использовать его.
Теги привязки должны находиться внутри раздела body (<body>. ..</body>) HTML-документа. Если этот тег вставить в другое место документа, это приведет к ошибкам или запуску почтового клиента при загрузке веб-страницы (независимо от того, открыл ли страницу другой пользователь или это сделали вы), что негативно повлияет на загрузку страницы.

Предупреждения

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

Об этой статье

На других языках

Как создать ссылку на электронную почту в HTML — Wiki How Русский

Эту страницу просматривали 14 114 раз.

Как создать ссылку электронной почты для HTML, которая автоматически составляет электронные письма

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

Вот как создать ссылку электронной почты для HTML, которая предварительно составляет пользовательское сообщение электронной почты, используя параметры «Кому», «От», «Копия», «Скрытая копия», «Тема» и даже основной текст.

Вы когда-нибудь нажимали на гиперссылку в Интернете, и вместо открытия другой веб-страницы открывалось электронное письмо? Это изящный трюк, который позволяет посетителям вашего сайта легко отправлять электронные письма вам или кому-то еще. А с помощью некоторых незначительных настроек кода вы можете предварительно составить поля «Кому», «От», «Копия», «Скрытая копия», «Тема» и даже «тело» электронного письма.

Попробуйте: нажмите здесь, чтобы отправить электронное письмо с предварительно составленными полями «Кому», «Тема» и «Основной текст»

Mailto HTML Link

Как сделать гиперссылку на адрес электронной почты в HTML?

Самый простой пример ссылки электронной почты для HTML — просто включить информацию «кому» с использованием параметра «mailto».

 Нажмите здесь, чтобы отправить мне электронное письмо

Mailto со строкой темы

Как добавить тему в mailto?

Следующий вариант — добавить тему электронной почты к коду ссылки HTML. Для этого вам нужно будет вставить subject= и текст вашей темы в код.

 Нажмите здесь, чтобы написать нам и сказать "Привет"!

Однако вы НЕ МОЖЕТЕ использовать пробел для ввода пробела между несколькими словами в строке темы. Пробелы в атрибуте href HTML не допускаются. Если вы хотите добавить пробел в свою тему, то вам нужно набрать %20 между словами.

Вот пример темы с более чем одним словом, в котором используется разделитель %20.

 Нажмите здесь, чтобы написать нам и сказать "Привет"!

HTML-код Mailto Body

Далее добавим некоторый текст в теле письма. Для этого нам нужно будет добавить body= к нашему коду ссылки. Вот пример только с тегами MAILTO и BODY.

 Нажмите здесь, чтобы отправить нам электронное письмо о наших руководствах

Mailto CC и BCC

Что делать, если вам нужна электронная почта идти к нескольким людям? Вы можете добавить как вариант CC (копия), так и вариант BCC (слепая копия) в гиперссылку электронной почты HTML.

 Нажмите здесь, чтобы написать всем нам

Чтобы добавить несколько адресов электронной почты в поля «Копия» или «Скрытая копия», используйте %2C между адресами электронной почты. %2C — это код ASCII для запятой.

 Нажмите здесь, чтобы написать нам

Собираем все вместе

Теперь, когда вы понимаете различные варианты, следующим шагом будет собрать все вместе. Чтобы сделать это правильно, у вас должен быть только один « ? » в вашей ссылке, а затем используйте « и » между каждым дополнительным параметром. Посмотрите внимательно на то, как «?» и символы «&» используются в этом примере HTML-ссылки электронной почты.

 
 Проверить ссылку электронной почты с несколькими предварительно заполненными параметрами

Для удобства ниже приведены некоторые HTML-примеры гиперссылок электронной почты. Просто щелкните по ним правой кнопкой мыши и скопируйте код ссылки. Затем вы можете изменить ссылки для своих целей.

До
Кому, Тема
Кому, Тема, Тело
Кому, Тема, Тело, CC
Кому, Тема, Тело, Копия, Скрытая копия
Кому, Тема, Тело, Копия (несколько адресов копии)

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

ПРИМЕЧАНИЕ БОТАНИКА: Электронная почта была изобретена Рэем Томлинсоном в 1971 году. До его изобретения пользователи могли отправлять сообщения друг другу только на одном компьютере. Томлинсон смог объединить программы SNDMSG и CPYNET, что позволило отправлять сообщения между разными системами. Ему также пришла в голову идея использовать символ @ для разделения имени пользователя и домена, схема, которая используется до сих пор. Томлинсон был введен в Зал славы Интернета в 2012 году за то, что изобрел электронную почту и произвел революцию в том, как мы сегодня общаемся в цифровом формате.

Статьи по теме:

Исправлено! Порядок просмотра бесед в Gmail: как увидеть новые электронные письма в топе
Вот что происходит, когда вы отвечаете на спам-письмо
способов защитить себя от спама по электронной почте
Как удалить двойной межстрочный интервал из подписи электронной почты Microsoft Outlook

HTML-тег mailto — javatpoint

следующий → ← предыдущая

Ссылка mailto — это тип гиперссылки HTML, которая перенаправляет программиста к почтовому клиенту по умолчанию с предопределенным адресом получателя. Когда пользователь нажимает на mailto для создания ссылки, почтовый клиент по умолчанию открывается на компьютере пользователя для отправки электронной почты. Почтовый клиент имеет предопределенные параметры, такие как копия, скрытая копия, тема и основной текст, которые используются для отправки электронной почты одному или нескольким получателям. Например, если в вашей системе есть Microsoft Outlook, Google, Yahoo! Mail, Apple Mail, Thunderbird и другие установленные учетные записи, почтовый клиент перенаправляет их вам, когда вы нажимаете ссылку mailto в браузере.

Синтаксис

Нажмите на сообщение

Чтобы создать ссылку mailto в HTML, нам нужно использовать тег HTML с его атрибутами href , а затем использовать ссылку mailto.

Давайте создадим простую программу mailto в HTML.

mail.html

<голова> Использование тега MailTo в HTML <тело> Нажмите, чтобы отправить электронное письмо

Вывод:

Нажмите на ссылку Нажмите, чтобы отправить электронное письмо ; он перенаправляет на установленную учетную запись электронной почты, как показано ниже.

В приведенном выше примере, когда мы запускаем файл mail.html в браузере Chrome, он показывает ссылку Click to send email . После этого, когда мы нажимаем на ссылку, она перенаправляет нас на установленную учетную запись электронной почты для отправки электронного письма, как показано на изображении выше.

Если мы хотим отправить электронное письмо более чем одному пользователю, нам нужно разделить каждый адрес цифрой 9.0005 запятая или символ & ( амперсанд ), как показано в приведенном ниже синтаксисе тега mailto.

{текстовая ссылка или изображение}

В приведенном выше синтаксисе атрибуты mailto могут быть расположены в любом порядке, но убедитесь, что { адрес электронной почты ), а затем непосредственно за ним следует вопросительный знак.

Свойства HTML-тега mailto

Ниже приведены различные свойства тега mailto html.

mailto: Это основной параметр, который указывает адрес электронной почты получателя , включая дополнительные параметры, такие как CC ( Копия ), BCC ( Слепая копия ), тему и тело сообщения.
Адрес электронной почты: Это основной параметр тега mailto, определяющий адрес почтового поля получателя.
Копия: Это необязательный параметр тега mailto , который содержит адрес другого письма и получен получателем как копия письма.
Скрытая копия: Это необязательный параметр тега mailto, который содержит конкретный адрес другого письма и принимается получателем как скрытая копия письма.
Тема: Это необязательный параметр тега mailto. Он используется для написания темы письма.
Тело: Это необязательный параметр тега mailto. Он используется для заполнения или записи контента для почты.
?: Это необязательный параметр тега mailto, который содержит первый параметр разделителя.
@: Это также необязательный параметр тега mailto, который содержит другие параметры-разделители.
Кликабельный текст или изображение: Это поле гиперссылки HTML, которое отображается пользователю в браузере.

Пример 2: Напишите программу для добавления нескольких адресов пользователей с темой и телом, используя тег mailto в HTML для отправки электронной почты.

mail2.html

<голова> Использование тега MailTo в HTML <тело> com»> Дать обратную связь

Вывод:

Щелкните ссылку Оставить отзыв ; он перенаправляет на установленную учетную запись электронной почты, как показано ниже.

На изображении выше мы добавили несколько учетных записей пользователей, таких как [email protected], [email protected] и [email protected], с темой электронной почты и содержимым тела .

Пример 3 : Напишите программу для автоматического заполнения копии, скрытой копии, темы и тела письма с помощью тега mailto в html.

mailto.html

<голова> <название> Добро пожаловать в JavaTpoint <выравнивание тела = "по центру">

JavaTpoint

Использование тега mailto в HTML
& body=JavaTpoint — это платформа, которая способствует лучшему изучению различных технологий, связанных с компьютерными науками. Мы заверяем вас, что вы не столкнетесь с какими-либо проблемами с нашими учебниками. Но если есть какая-либо ошибка, сообщите о проблеме в нашу контактную форму.»> Отправляйте свои запросы по почте

Вывод:

Нажмите на ссылку Отправляйте свои запросы по почте ; он перенаправляет на установленную учетную запись электронной почты, как показано ниже.

В приведенном выше выводе мы установили ссылку на копию, скрытую копию, тему и тело сообщения электронной почты, которое автоматически заполняется посетителями.

Пример 4: Создайте пользовательский макет для отправки электронной почты с использованием тега mailto в html.

mail5.html

<голова>Использование ссылки mailto <стиль> ч2 { коричневый цвет; } h4{ цвет: зеленый } . контейнер { ширина: 600 пикселей; граница: 2px сплошной черный; отступ: 25 пикселей; } <выравнивание тела = по центру> <дел>

JAVATPOINT.COM

Использование ссылки mailto
<метод формы="POST" action="mailto: [email protected]? Тема = отзыв/предложение" enctype="multipart/form-data"> <дел> Имя:
<дел> Мобильный номер:
<дел> Предложение/отзыв:

</текстовое поле>
            </div>
            <br>
            <дел>
                <тип ввода="отправить"
                       значение = "Отправить" />
            </div>
  
        </форма>
    </div>
</тело>
</html>
 </p>
 <p> <strong> Вывод: </strong> </p>
 <p> После заполнения формы нажмите на кнопку <strong> Submit </strong>; он перенаправляет нас на учетную запись электронной почты для отправки сообщения.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/d/d/1/dd141cf4aa5dce2562a71c7250321e67.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/d/d/1/dd141cf4aa5dce2562a71c7250321e67.jpeg' /></noscript>  </p>
 <hr/> <p> Следующая темаHTML Counter </p>
 <p> ← предыдущая
следующий → </p>
 </td> </tr> </table>  <h2><span class="ez-toc-section" id="i-19"> Генератор ссылок на почту </span></h2>  <p> Что еще более важно, позвольте мне рассказать вам о ссылках на почту, чтобы вы знали, как <strong> писать их самостоятельно. </strong> </p> <ul> <li> Что такое ссылка mailto? </li>
       <li> Начать с mailto: </li>
       <li> Один получатель </li>
       <li> Несколько получателей </li>
       <li> Нет получателя
       </li> <li> Символы, разделяющие параметры </li>
       <li> Mailto link с темой </li>
       <li> Пробелы и другие специальные символы </li>
       <li> Mailto ссылка с темой и телом </li>
       <li> Mailto ссылка с темой, телом, скрытой копией и копией </li>
       <li> HTML-теги </li>
       <li> Заключение </li>
     </ul>  <h3><span class="ez-toc-section" id="i-20"> Что такое почтовая ссылка? </span></h3> <p> Ссылка Mailto — это гиперссылка, которая позволяет пользователю отправлять электронное письмо на определенный адрес непосредственно из HTML-документа без необходимости копировать и вводить его в почтовый клиент, такой как Gmail или Outlook.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/digitalaccesspass.com/doc/wp-content/uploads/2010/10/dap_htmlstarttag.png' /><noscript><img loading='lazy' src='/800/600/http/digitalaccesspass.com/doc/wp-content/uploads/2010/10/dap_htmlstarttag.png' /></noscript>  </p> <p> Сначала мы рассмотрим «ссылочную часть» ссылки mailto, а затем поместим ее в теги HTML. </p> <h3><span class="ez-toc-section" id="_mailto-4"> Начните с mailto: </span></h3> <p> Каждая ссылка mailto начинается с: </p><pre> mailto: </pre><p> Затем следует адрес электронной почты без каких-либо дополнительных символов, просто адрес электронной почты как есть. </p><pre> mailto:somebody@email.com </pre><h3><span class="ez-toc-section" id="i-21"> Несколько получателей </span></h3>  <p> Не рекомендуется </strong> указывать несколько получателей в полях «Кому», «Копия» или «Скрытая копия» ссылки mailto. Вы можете это сделать, но это может не сработать. </p> <p> Если вы уже решили создать ссылку mailto для нескольких получателей и не можете отчаиваться, сделайте следующее: </p> <ol> <li> Добавьте несколько адресов электронной почты. </li>
         <li> Разделите их <strong> запятыми (,) </strong> . </li>
         <li> Удалите пробелы между запятыми и адресами электронной почты. </li>
         <li> Проверьте связь с несколькими почтовыми клиентами. <p> Если запятые не работают.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/2/d/02d53f8cb3fb5b34bf523d38fd92a5c5.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/2/d/02d53f8cb3fb5b34bf523d38fd92a5c5.jpeg' /></noscript> .. </p> </li>
         <li> Разделяйте адреса электронной почты <strong> точками с запятой (;) </strong> . </li>
         <li> Удалите пробелы между точками с запятой и адресами электронной почты. </li>
         <li> Проверьте связь с несколькими почтовыми клиентами. </li>
     </ol> <p> Ссылка Mailto с несколькими получателями и запятыми должна выглядеть так: </p><pre> mailto:first@email.com,second@email.com, Third@email.com </pre><p> Или с точкой с запятой: </p><pre> mailto:first@email.com;second@email.com; Third@email.com </pre><p> Единственный способ, который, безусловно, будет работать, — это с <strong> до 3 адресов электронной почты </strong>, где вы указываете один в поле «Кому», один в поле «Копия» и один в поле «Скрытая копия». </p><pre> mailto:first@email.com?cc=second@email.com&bcc=first@email.com </pre><h3><span class="ez-toc-section" id="i-22"> Нет получателя </span></h3> <p> Аналогично <strong> не рекомендуется </strong>, чтобы оставить поле «Кому» ссылки mailto пустым. Вы можете это сделать, но это может не сработать.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/3/f/3/3f3857649516e64d3632cb27cfc83cce.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/3/f/3/3f3857649516e64d3632cb27cfc83cce.jpeg' /></noscript>  </p> <p> Если вы уже решили создать ссылку mailto без получателей, это возможные способы сделать это. Примеры ниже содержат «Hello» в поле «Body» ссылки mailto. </p> <p> Ванильная версия: </p><pre> mailto:?body=Hello </pre><p> Space версия: </p><pre> mailto: ?body=Hello </pre><p> Space as Unicode версия: </p><pre> mailto:%20?body=Hello </pre>«<p> Отдельный параметр : </p><pre> mailto:?to=&body=Hello </pre><p> Не забудьте <strong> протестировать </strong> эти ссылки с несколькими почтовыми клиентами перед их публикацией. </p> <h3><span class="ez-toc-section" id="i-23"> Символы, разделяющие параметры </span></h3> <p> В последнем примере вы могли заметить два символа, разделяющих параметры ссылки mailto: <strong> вопросительный знак (?) </strong> и <strong> амперсанд (&) </strong> . </p> <p> Знак вопроса появляется только перед первым параметром, а амперсанд — перед всеми остальными. Вот несколько примеров с символами подчеркивания (___), представляющими содержимое. </p><pre> почта:___ </pre><pre> почта:___ <strong> ? </strong> body=___ </pre><pre> mailto:___ <strong> ? </strong> субъект=___ <strong> и </strong> тело=___ </pre><pre> mailto:___ <strong> ? </strong> cc=___ <strong> & </strong> bcc=___ <strong> & </strong> subject=___ <strong> & </strong> body=___ </pre><h3><span class="ez-toc-section" id="Mailto_link"> Mailto link с темой </span></h3> <p> Вот пример mailto link со строкой темы: «Как дела?» </p><pre> mailto:somebody@email.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/1/d/b/1db7b877723a734f362b4907ecb5e0fe.png' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/d/b/1db7b877723a734f362b4907ecb5e0fe.png' /></noscript> com?subject=How%20are%20you%20doing%3F </pre><h3><span class="ez-toc-section" id="i-24"> Пробелы и другие специальные символы </span></h3>  <p> Как видите, в примере есть несколько необычных символов. Это связано с тем, что генератор ссылок Mailto закодировал все специальные символы для правильного форматирования ссылки. </p> <p> Вот краткий список символов, которые мы привыкли переводить в символы в кодировке UTF-8: </p><pre> %20 = пробел
%21 = !
%2D = -
%2E = .
%3А = :
%3F = ? </pre><p> Это <strong> основная причина, </strong> почему такие инструменты, как генератор ссылок Mailto, пригодятся. Никто не хочет запоминать, что <code> %20 </code> означает <i> пробел </i> . </p> <p> Это также причина, по которой я предлагаю вам ⭐ <strong> добавить этот сайт в закладки </strong>, чтобы вы могли быстрее найти его в следующий раз, когда вам понадобится создать ссылку mailto.

</p>  <h3><span class="ez-toc-section" id="i-25"> Ссылка на письмо с темой и телом </span></h3> <p> Вот пример ссылки на письмо с темой: «Дорогой Ларс» и телом: «Надеюсь, у вас все хорошо. Увидимся во вторник.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/priboruniversalpro.ru/wp-content/uploads/2019/02/zabsmallqiv.png' /><noscript><img loading='lazy' src='/800/600/http/priboruniversalpro.ru/wp-content/uploads/2019/02/zabsmallqiv.png' /></noscript>  С любовью, Сигрит». </p><pre> mailto:lars@firesaga.com?subject=Dear%20Lars&body=I%20hope%20you%20are%20doing%20well%20and%20will%20see%20you%20on%20Вторник.%20Love%2C%20Sigrit </pre><h3><span class="ez-toc-section" id="_Mailto"> Ссылка Mailto с темой, телом, скрытой копией и копией </span></h3>  <p> Вот пример ссылки mailto со всем: </p> <ul> <li> Кому: Committee@eurovision.com </li>
       <li> Копия: culture@iceland.gov </li>
       <li> СК: sigrit@firesaga.com </li>
       <li> Тема: Подача заявки </li>
       <li> Текст: Приветствую комитет Евровидения, я посылаю вам работу этого года от Fire Saga of Iceland. С уважением, Ларс Эрикссонг </li>
     </ul><pre> mailto:committee@eurovision.com?cc=culture@iceland.gov&bcc=sigrit@firesaga.com&subject=Entry%20submission&body=Greetings%20Eurovision%20committee%2C%20I%20am%20sending%20you%20this%20years%20submission%20from %20Fire%20Saga%20of%20Iceland.%20Best%20regards%2C%20Lars%20Erickssong </pre><p> <i> (Если вы еще не догадались, Евровидение: История огненной саги (2020) — мой любимый фильм </i> ❤️ <i> ) </i> </p>  <h3><span class="ez-toc-section" id="HTML"> HTML-теги </span></h3>  <p> После того, как вы сгенерировали «ссылочную часть» ссылки mailto, все, что вам остается, — это вставить ее в HTML-теги ссылки, которые выглядят следующим образом: </p><pre> <a> </a> </pre><p> Открывающий тег <a> находится в начале, а закрывающий тег </a> — в конце.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/9/c/79c314c974c46db0be846273108d30d6.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/9/c/79c314c974c46db0be846273108d30d6.jpeg' /></noscript>		</div>
	</div>
</div>
</article>

<nav class="navigation post-navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/css/css-important-dokument-ne-najden-htmlbook-ru.html" rel="prev">Css important: Документ не найден | htmlbook.ru</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/css/css-chekboks-css-stilizacziya-checkbox-i-radio-2-varianta.html" rel="next">Css чекбокс: CSS стилизация checkbox и radio — 2 варианта</a></div></div>
	</nav><div id="comments" class="comments-area">

<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/kak-sdelat-v-html-ssylku-na-pochtu-kak-sdelat-ssylku-na-adres-elektronnoj-pochty.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт

Как сделать ссылку на электронную почту в html

HTML-ссылка mailto

Что такое ссылка mailto

Как создать ссылку mailto в HTML

mailto примеры

Написать на адрес электронной почты

Отправить письмо на адрес электронной почты с темой

Отправить письмо на адрес электронной почты с копией, скрытой копией, темой и телом

Как добавить пробелы в теме или теле письма

Как добавить разрыв строки в тело письма

Как добавить нескольких получателей электронной почты

Mailto &#8212; HTML ссылка на электронную почту на сайте

Открытие в новом окне

Дополнительные параметры в письме

Конструктор ссылок mailto

CSS оформление

Плагин IHateMailto в Chrome/Firefox

Почтовая форма

Все о почтовых ссылках: работа с mailto HTML

Основной функционал

«Открыть в новой вкладке» иногда важно

Специальные ссылки. Справка

Как создать ссылку на электронную почту в HTML

Шаги

Советы

Предупреждения

Об этой статье

Как создать ссылку на электронную почту в HTML — Wiki How Русский

Как создать ссылку электронной почты для HTML, которая автоматически составляет электронные письма

Mailto HTML Link

Mailto со строкой темы

HTML-код Mailto Body

Mailto CC и BCC

Собираем все вместе

HTML-тег mailto — javatpoint

Синтаксис

Свойства HTML-тега mailto

JavaTpoint

Использование тега mailto в HTML

JAVATPOINT.COM

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

Рубрики

Mailto — HTML ссылка на электронную почту на сайте