Ссылка на e-mail или mailto в html

Туториал. Список задач с drag & drop

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


В этом туториале Саша Смыгина из HTML Academy покажет, как реализовать эффект drag & drop на ванильном JavaScript.

Drag & drop может понадобиться в разных ситуациях, например:

  • Простое визуальное изменение положения элемента.
  • Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
  • Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
  • Перемещение локальных файлов в окно браузера.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
  • Используя полученные знания и не изменяя структуры архива составьте следующую HTML страницу (index.html в архиве), которая содержит четыре ссылки:

Практическое задание № 4.

Первая ссылка «Информация о примере» должна вести на родительскую страницу (на уровень выше), т.е. при клике вы должны перейти на эту страницу:

Обратите внимание, что на странице необходимо сделать две ссылки: первая — относительная ссылка, которая должна вести обратно на главную страницу (при клике вы должны перейти на нее), а вторая — абсолютная, при клике на нее осуществляется переход на сайт basicweb.ru. Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css)

Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images

Вторая и третяя ссылка представляют из себя ссылки-изображения, при клике на них происходит переход на страницы, расположенные в дочерних каталогах (html и css). Сделайте так, чтобы при клике на изображение CSS страница открывалась в новом окне. Изображения находятся в каталоге images.

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

Заключительная задача заключается в том, чтобы при клике на четвертую ссылку запускалось скачивание архива, расположенного в дочернем каталоге download

Результат примера вы можете скачать после выполнения задач для самопроверки:

Атрибуты

Форматирование текста

×

Кажется, вы используете блокировщик рекламы 🙁

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

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

Как отключить? Поддержать

Что должен уметь верстальщик, чтобы его все хотели

Вот раньше было время! В нулевых, например, никаких фронтов не было, а человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно.

А что должен уметь верстальщик сегодня? Разбираться в HTML и CSS, немного знать JavaScript, использовать магию гридов, флоатов, знать системы сборки и точно кое-что еще.

О том, как выглядит идеальная вакансия для верстальщика в 2020 году, какие навыки и знания востребованы, и что обо всём этом думают специалисты из индустрии — читайте в блоге HTML Academy.

Безопасность и приватность

Несколько проблем с безопасностью отмечены в RFC 2368, но самая большая проблема — сбор адресов роботами. Конструкции mailto можно найти в HTML-страницах автоматически, используя DOM или регулярные выражения. Собранные таким образом адреса могут быть добавлены в спамерские ссылки рассылки и получать большое количество нежелательных писем.

И хотя существуют методы, чтобы «усложнить» сбор адресов, — маскирование адресов и обфускация при помощи JavaScript, — они обходятся достаточно сложными роботами. Другие же способы, такие как скрытие адреса за капчей или подобной «проверкой на человечность», предоставляют безопасность, сопоставимую с другими способами контакта, например веб-формами, которые испытывают схожие трудности с предотвращением спама.

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.

Первая функция преобразует все символы, которые пользователь попытается добавить в форму:

При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ «<» в ‘&lt;’. Также он поступить с другими символами, встречающимися в html коде.

Вторая функция декодирует url, если пользователь попытается его добавить в форму.

Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:

Существуют и другие функции, позволяющие отфильтровать переменные php. Их использование зависит от того , насколько вы опасаетесь того, что злоумышленник попытается добавить программный код в данную форму отправки данных на почту html.

Проверка данных, передаваемых от HTML формы в файл PHP


Для того, чтобы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:

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

Добавление кнопки копирования адреса

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

Чтобы исправить это, мы решили добавить ссылку mailto к адресу электронной почты, и расположить рядом с ней кнопку «copy address», которая позволяет пользователям быстро скопировать адрес в буфер обмена.

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

Итерация 3: адрес электронной почты – это ссылка mailto, а рядом с ней есть кнопка «Copy»

Это дает пользователям тот же выбор, что описан выше, но дизайн выглядит аккуратнее и привычнее.

Тем не менее, стоит отметить, что это решает только одну из трех проблем ссылок mailto, которые мы упоминали выше: они затрудняют пользователям копирование адреса.

Даже используя наше решение, люди, переходящие по этой ссылке, по-прежнему:

  • попадают в тупик, если у них не настроено приложение электронной почты
  • не получат выбора, какое приложение использовать, если они используют более одного почтового приложения

Ссылки

Последнее обновление: 08.04.2016

Ссылки, которые представлены элементом <a></a>, играют важную роль — они обеспечивают навигацию между отдельными документами. Этот элемент имеет следующие атрибуты:

Наиболее важным атрибутом является :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ссылки</title>
	</head>
	<body>
		<a href="content.html">Учебник по HTML5</a>
	</body>
</html>

Здесь для ссылки используется относительный путь content.html. То есть в одной папке с данным документом должен находиться файл content.html, на который будет идти переход по нажатию на ссылку.

Также мы можем использовать абсолютные пути с полным указанием адреса:

<a href="http://metanit.com/web/html5/">Учебник по HTML5</a>

Навигация внутри документа

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Внутренние ссылки</title>
	</head>
	<body>
		<a href="#paragraph1">Параграф 1</a> | <a href="#paragraph2">Параграф 2</a> | <a href="#paragraph3">Параграф 3</a>
		<h2 id="paragraph1">Параграф 1</h2>
		<p>Содержание параграфа 1</p>
		<h2 id="paragraph2">Параграф 2</h2>
		<p>Содержание параграфа 2</p>
		<h2 id="paragraph3">Параграф 3</h2>
		<p>Содержание параграфа 3</p>
	</body>
</html>

Чтобы определить внутреннюю ссылку, указывается знак решетки (#), после которого идет id того элемента, к которому надо осуществить переход. В данном случае переход будет идти к заголовкам h2.

Атрибут target

По умолчанию ресурсы, на которые ведут ссылке, открываются в том же окне. С помощью атрибута target можно переопределить это действие. Атрибут target может принимать следующие значения:

  • : открытие html-документа в новом окне или вкладке браузера
  • : открытие html-документа в том же фрейме (или окне)
  • : открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме
  • : открытие html-документа на все окно браузера
  • : открытие html-документа во фрейме, который называется framename (В данном случае framename — только пример, название фрейма может быть произвольным)
<a href="http://metanit.com/web/html5/" target="_blank">Учебник по HTML5</a>

Значение как раз и указывает браузеру, что ресурс надо открыть в новой вкладке.

Стилизация ссылок

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ссылки</title>
		<style>
			a:link    {color:blue; text-decoration:none}
			a:visited {color:pink; text-decoration:none}
			a:hover   {color:red; text-decoration:underline}
			a:active  {color:yellow; text-decoration:underline}
		</style>
    </head>
    <body>
        <a href="index.html">Учебник по HTML5</a>
    </body>
</html>

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

указывает на состояние ссылки, по которой уже был осуществлен переход.

указывает на состояние ссылки, на которую навели указатель мыши.

указывает на ссылку в нажатом состоянии.

Стиль устанавливает цвет ссылки. А стиль устанавливает подчеркивание: если значение , то ссылка поддчеркнута, если , то подчеркивание отсутствует.

Ссылка-картинка

Поместив внутрь элемента элемент , можно сделать ссылку-изображение:

<a href="index.html">
	<img src="cover.png" alt="HTML tutorial">
</a>

НазадВперед

Примеры

Использование «mailto» в HTML-документе, чтобы создать ссылку для отправки письма:

<a href="mailto:someone@example.com">Send email</a>

Также возможно указать значения для заголовков (например, тему, копии, и т.п.) и тело сообщения в URL. Пробелы и переносы строки нельзя вставить без кодирования процентами.

<a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a>

Можно указать несколько адресов:

<a href="mailto:someone@example.com,someoneelse@example.com">Send email</a>

Можно не указывать адрес:

<a href="mailto:?to=&subject=mailto%20with%20examples&body=http://en.wikipedia.org/wiki/Mailto">Share this knowledge...</a>

Создание регистрации на PHP:

Пришло время написать регистрацию на PHP, но для начала сделаем форму.

PHP

1 2 3 4 5 6 7

<form action=»<?= $_SERVER ?>»method=»post»>

<p>Логин<input type=»text»name=»login»><samp style=»color:red»>*<samp><p>

<p>EMail<input type=»email»name=»email»><samp style=»color:red»>*<samp><p>

<p>Пароль<input type=»password»name=»pass»><samp style=»color:red»>*<samp><p>

<p>Повторитепароль<input type=»password»name=»pass_rep»><samp style=»color:red»>*<samp><p>

<p><input type=»submit»value=»Зарегистрироваться»name=»doGo»><p>

<form>

Ну тут не чего интересного нет, простая HTML форма, Вот какая форма получилась.

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

// Проверяем нажата ли кнопка отправки формы

if(isset($_REQUEST’doGo’)){

// Все последующие проверки, проверяют форму и выводят ошибку

// Проверка на совпадение паролей

if($_REQUEST’pass’!==$_REQUEST’pass_rep’){

$error=’Пароль не совпадает’;

}

// Проверка есть ли вообще повторный пароль

if(!$_REQUEST’pass_rep’){

$error=’Введите повторный пароль’;

}

// Проверка есть ли пароль

if(!$_REQUEST’pass’){

$error=’Введите пароль’;

}

// Проверка есть ли email

if(!$_REQUEST’email’){

$error=’Введите email’;

}


// Проверка есть ли логин

if(!$_REQUEST’login’){

$error=’Введите login’;

}

// Если ошибок нет, то происходит регистрация

if(!$error){

$login=$_REQUEST’login’;

$email=$_REQUEST’email’;

// Пароль хешируется

$pass=password_hash($_REQUEST’pass’,PASSWORD_DEFAULT);

// хешируем хеш, который состоит из логина и времени

$hash=md5($login.time());

// Переменная $headers нужна для Email заголовка

$headers=»MIME-Version: 1.0\r\n»;

$headers.=»Content-type: text/html; charset=utf-8\r\n»;

$headers.=»To: <$email>\r\n»;

$headers.=»From: <mail@example.com>\r\n»;

// Сообщение для Email

$message=’

                <html>                 <head>                 <title>Подтвердите Email</title>                 </head>                 <body>

                <p>Что бы подтвердить Email, перейдите по <a href=»http://example.com/confirmed.php?hash=’.$hash.'»>ссылка</a></p>

                </body>                 </html>

                ‘;

// Добавление пользователя в БД

mysqli_query($db,»INSERT INTO `user` (`login`, `email`, `password`, `hash`, `email_confirmed`) VALUES (‘».$login.»‘,'».$email.»‘,'».$pass.»‘, ‘».$hash.»‘, 1)»);

// проверяет отправилась ли почта

if(mail($email,»Подтвердите Email на сайте»,$message,$headers)){

// Если да, то выводит сообщение

echo’Подтвердите на почте’;

}

}else{

// Если ошибка есть, то выводить её

echo$error;

}

}

Информацию о функции password_verify найдёте здесь.

Проблема с mailto ссылками

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

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

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

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

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

И, наконец, у многих пользователей не настроено приложение электронной почты. Это означает, что ссылка может привести их в тупик или «кроличью нору».

Например, когда вы кликаете по адресу электронной почты в Chrome на своем Macbook, приложение «Почта» загружает запрос на настройку учетной записи электронной почты. Мы используем Gmail, и настроить его в Chrome действительно сложно.

По этим причинам мы решили убрать ссылку mailto и добавить адрес почты в виде обычного текста.

Итерация 1: нет ссылки mailto

Но у этого решения были свои недостатки.

Плюсы ссылок mailto

Мы сомневались в правильности решения убрать ссылку mailto, потому что:

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

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

Предлагая выбор

Люди, которые хотят перейти к отправке письма могут нажать на ссылку mailto, а люди, которые хотят скопировать адрес электронной почты могут скопировать текст.

Добавление кнопки копирования адреса

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

Чтобы исправить это, мы решили добавить ссылку mailto к адресу электронной почты, и расположить рядом с ней кнопку «copy address», которая позволяет пользователям быстро скопировать адрес в буфер обмена.

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

Итерация 3: адрес электронной почты – это ссылка mailto, а рядом с ней есть кнопка «Copy»

Это дает пользователям тот же выбор, что описан выше, но дизайн выглядит аккуратнее и привычнее.

Тем не менее, стоит отметить, что это решает только одну из трех проблем ссылок mailto, которые мы упоминали выше: они затрудняют пользователям копирование адреса.

Даже используя наше решение, люди, переходящие по этой ссылке, по-прежнему:

  • попадают в тупик, если у них не настроено приложение электронной почты
  • не получат выбора, какое приложение использовать, если они используют более одного почтового приложения

Что нам действительно нравится

Это такая распространенная проблема, и кажется, что браузеры и операционные системы должны это исправить.

Мы считаем, что это будет идеальным решением, если пользователи, нажимающие на ссылку mailto, увидят меню с такими вариантами:

  1. Отправить письмо из Gmail
  2. Письмо с другого аккаунта
  3. Скопировать адрес электронной почты
  4. Поделитесь адресом электронной почты через…

Это отвечает наиболее распространенным потребностям и дает большинству пользователей возможность двигаться вперед.

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

На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.

Первая строка будет следующей


Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:

Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.

Следующая строка:

Следующей строкой будет кнопка «отправить»:

И последней строкой в форме будет тэг </form>

Теперь соберем все вместе.

Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:

Живые и неживые коллекции в JavaScript

Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.

Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.

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

Подробности читайте в блоге HTML Academy. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и уделять дополнительные 10-15 минут самообразованию.

И пусть живые позавидуют неживым!

Новые приключения в HTML Academy

Приём-приём, вызываем любителей приключений!

26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.

Каждый попаданец из фракции-победителя получит:

  • Доступ ко всем платным тренажёрам до 10 августа включительно.
  • Скидку 50% на навыки.
  • Скидку 70% на макеты и проекты
  • Скидки от 1500 до 5500 рублей на курсы и профессии.

Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.

Помещаем HTML и PHP код отправки формы в один файл

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:

<a href="http://yandex.ru" target="_blank">Поиск </a> 

Ниже представлены все значения этого атрибута:

Атрибут Значение

_blank Загружает страницу в новое окно браузера. _self Загружает страницу в текущее окно. Это значение по умолчанию.

_parent Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

framename Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Примеры

Использование «mailto» в HTML-документе, чтобы создать ссылку для отправки письма:

<a href="mailto:someone@example.com">Send email</a>

Также возможно указать значения для заголовков (например, тему, копии, и т.п.) и тело сообщения в URL. Пробелы и переносы строки нельзя вставить без кодирования процентами.

<a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a>

Можно указать несколько адресов:

<a href="mailto:someone@example.com,someoneelse@example.com">Send email</a>

Можно не указывать адрес:

<a href="mailto:?to=&subject=mailto%20with%20examples&body=http://en.wikipedia.org/wikipedia/Mailto">Share this knowledge...</a>

MAILTO в Html — что и как можно реализовать

Итак, прелесть MAILTO в том, что это мулька позволяет пользователю (например, посетителю вашего сайта) быстро отправить сообщение (письмо — читайте что такое электронная почта). При этом ему не потребуется ни почтовый клиент открывать, ни Емайл адрес с сайта копировать — при клике по такой ссылке все произойдет на автомате. Попробуйте сами кликнуть по этой тестовой ссылке: Отправить письмо админу KtoNaNovenkogo.ru

Можно будет и тему сообщения в эту ссылку зашить, и даже его содержание (текст). Последнее может быть удобно, например, при отправке сообщений об обнаружении какой-то определенной ошибки на сайте или при заказе какого-нибудь бесплатного курса, где текст может быть стандартным, а пользователю только по кнопке «Оправить» останется жмакнуть для отправки вам сообщения.

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

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

<a href="mailto:admin@ktonanovenkogo.ru%2C%20qwertydmitriy@gmail.com?subject=От%20уважаемого%20читателя&amp;body=Здравствуйте!%0D%0A%0D%0AВыражаю%20Вам%20свое%20фи!!!%0D%0AВы%20сильно%20пали%20в%20моих%20глазах!!!!">Отправить письмо админу KtoNaNovenkogo.ru</a>

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

/example

You’ll find runnable, great examples on the project’s GitHub repository in the folder.

Flutter example app

  1. Clone the repository
  2. Change directory to
  3. and wait for the app to start
  4. You can fill out the forms with your own input or click the «Surprise me» button to see how your mail client handles tricky input

HTTP server serving an HTML web page with a mailto link

import 'dart:io';

import 'package:mailto/mailto.dart';

Future<void> main() async { 
  final mailto = Mailto(
    to ,
    cc ,
    bcc ,
    subject 'Let\'s drink a "café"! ️ 2+2=4 #coffeeAndMath',
    body
        'Hello this if the first line!\n\nNew line with some special characters őúóüűáéèßáñ\nEmoji: ',
  );

  final server = await HttpServer.bind(InternetAddress.loopbackIPv4, 3000);
  String renderHtml(Mailto mailto) => '''<html><head><title>mailto example</title></head><body><a href="$mailto">Open mail client</a></body></html>''';
  await for (HttpRequest request in server) {
    request.response
      ..statusCode = HttpStatus.ok
      ..headers.contentType = ContentType.html
      ..write(renderHtml(mailto));
    await request.response.close();
  }
}
  1. Clone the repository
  2. Change directory to
  3. Start HTTP server
  4. Open your browser and visit
  5. Click on the link
  6. If you have an email client installed on your computer, this client will be opened when you click the link on the HTML page.

С этим читают