Как сделать ссылку на адрес электронной почты?
Адрес электронной почты пишется в формате vlad@webref.ru, где vlad — это имя пользователя, а webref.ru — имя домена. Для создания ссылки используется элемент , в атрибуте href сперва пишется ключевое слово mailto: , затем без пробела указывается адрес электронной почты пользователя.
При щелчке по такой ссылке открывается почтовая программа по умолчанию. Если подобные ссылки ещё не открывались, то операционная система выведет окно со списком программ (рис. 1).
Рис. 1. Список программ для открытия адреса электронной почты
По своему виду такая ссылка ничем не отличается от обычных ссылок на сайты. Чтобы пользователь их как-то различал можно использовать следующие рекомендации.
В тексте ссылки дать адрес.
Написать пояснение в тексте.
Добавить символ почты до или после текста ссылки с помощью свойства content и псевдоэлемента ::before или ::after, как показано в примере 1. Чтобы иконка работала только с нужными ссылками, мы используем селектор a[href^=»mailto»] , он будет применять стиль только к элементам , у которых атрибут href начинается с mailto .
Пример 1. Иконка после адреса
Результат данного примера показан на рис. 1. Иконка взята с сайта utf8icons.com.
Рис. 1. Иконка после адреса почты
См. также
- content
- quotes
- relative и absolute
- text-decoration-skip-ink
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибуты ссылок
- Добавление тени
- Использование :hover
- Наследование в CSS
- Не только текст
- Очистка float
- Подробнее о позиционировании
- Псевдоэлемент ::after
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Создание ссылок
- Ссылки
- Ссылки
- Ссылки в HTML
- Якоря
Ссылка на адрес электронной почты
Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты (пример 8.6).
Пример 8.6. Ссылка на адрес электронной почты
Адрес почты Задавайте вопросы по электронной почте
Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject=тема сообщения , как показано в примере 8.7.
Пример 8.7. Задание темы сообщения
Тема письма Задавайте вопросы по электронной почте
При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.
HTML по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Ссылка на E-mail или Mailto в HTML
Если кликнуть по такой ссылке, то откроется почтовая программа, заданная по умолчанию для обработки ссылок-mailto, в которой, в шаблоне письма, поле Кому будет уже заполнено соответствующим адресом.
Адрес электронной почты указывать необязательно; в этом случае поле Кому останется пустым; однако двоеточие пишется всегда.
Параметры
Помимо простого указания адресата, в ссылках-mailto можно использовать параметры, с помощью которых почтовой программе сообщаются тема и содержание письма, а также кому отправить обычную и скрытую копию.
| Параметр | Значение |
|---|---|
| subject | тема письма |
| body | содержание письма |
| cc | кому отправить обычную копию |
| bcc | кому отправить скрытую копию |
Синтаксис
mailto:адрес+электронной+почты?параметр=значение&параметр=значение&. То есть, сначала указывается слово «mailto»; затем — двоеточие (:); затем — адрес электронной почты (необязательно); затем — вопросительный знак (?); затем — пары «параметр=значение», разделённые амперсандом (&).
Адресов почты можно указывать несколько, разделяя их запятой или пробелом.
Пример
Mailto в формах
В качестве обработчика формы, путь к которому указывается в атрибуте action элемента , можно использовать адрес электронной почты. Это делается по аналогии с обычными ссылками на E-mail.
По некоторым причинам пример не работает в браузере Google Chrome.
Вместе с адресом электронной почты после двоеточия можно указывать дополнительную информацию (например, имя получателя); при этом, для корректного определения адреса почты, его лучше заключить в угловые скобки (%3C и %3E) как показано в примере ниже:
- Can I set subject/content of email with using mailto:?
- html mailto tips and tricks
- mailto — пишите письма, это всех раздражает!
- Ссылка на адрес электронной почты
Ссылка на адрес эл. почты
Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты (пример 1).
Пример 1. Ссылка на адрес электронной почты
Адрес электронной почты Задавайте вопросы по электронной почте
Такая ссылка ничем не отличается от ссылки на веб-страницу, но при нажатии на нее запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки следует указывать, что она имеет отношение к электронной почте, чтобы читатели понимали к чему приведет нажатие на нее.
Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса — параметр subject=»тема сообщения» (пример 2).
Пример 2. Задание темы сообщения
Адрес электронной почты Задавайте вопросы по электронной почте
При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.