поле e mail обязательно для заполнения

Как правильно написать адрес электронной почты (e-mail) ✔, чтобы вам могли на нее отправить письмо.

Доброго дня!

«Почему не отвечаешь?», «Мне ничего не приходило на почту!», «Вы мне не можете скинуть письмо с документами?!» — это всё вопросы и претензии, которые я неоднократно получал как на рабочем месте, так и на этом блоге. 👀

Самое интересное во всем этом — что в этих случаях в принципе нельзя было ответить и отправить e-mail, так как адрес был неправильно написан. И человеку на том конце провода никогда ничего не докажешь.

Собственно, после очередного такого «случая» решил набросать небольшой ликбез по этой теме (теперь будет куда поставить ссылку в случае очередной подобной претензии. 👌).

Как создать электронную почту: e-mail (на портале mail.ru). Настройка почты — [см. пошаговую инструкцию]

Правильное написание e-mail адреса

ШАГ 1: основы

К тому же, написание e-mail должно быть выполнено латинскими буквами (прим.: допускаются цифры, подчеркивания)!

То, что я перечислил выше — это не чье-то требование, а международный формат. Соблюдая его, вам всегда смогут ответить и переслать письмо.

См. в качестве примера скриншот ниже. 👇

Пример e-mail адреса

Пару примеров правильного написания e-mail адресов:

Разберу каждую часть адреса подробнее:

Важно!

Никакие кавычки или дополнительные знаки при написании адреса электронной почты использовать не нужно ( пробелы между собачкой, логином и доменом — не используются)!

Вставка e-mail в форму

ШАГ 2: как завести себе почтовый ящик

Завести почту сегодня можно практически на любом крупном портале (👉 лучшие сервисы электро-почт).

Например, весьма неплохим выбором может стать 👉 почта от Яндекса.

Чтобы завести ящик, нужно-то:

Завести почту на Яндекс

ШАГ 3: как отправить кому-нибудь письмо на e-mail

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

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

Прикрепление к письму документов

ШАГ 4: как сделать свой номер мобильного адресом почты

Весьма хорошим способом перестать путаться с написанием e-mail может стать одна функция Яндекс-почты — можно свой номер мобильного использовать в качестве адреса электро-почты!

Чтобы включить данную опцию, после регистрации в почте от Яндекса, зайдите в настройки личных данных и используйте функцию «Сделать адресом номер телефона» (см. скрин ниже, стрелками показано, куда нужно нажать). 👇

Сделать адресом номер телефона

После этого, вы сможете получать электронную почту как по адресу 79271234567@yandex.ru *, так и по своему прежнему (т.е., по сути, у вас будет 2 адреса e-mail, письма с которых будут поступать в один ящик!).

На сим сегодня всё. Дополнения приветствуются.

Источник

Адрес электронной почты

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

Синтаксис создания поля следующий.

Атрибуты по большей части совпадают с текстовым полем и приведены в табл. 1.

Табл. 1. Атрибуты поля для почтового адреса

В примере 1 показано применение значения email для создания формы авторизации на сайте, где в качестве логина указывается адрес электронной почты.

Пример 1. Адрес электронной почты

HTML5 IE 10+ Cr Op Sa Fx

По своему виду поле для ввода адреса ничем не отличается от текстового поля. Различия проявляются, если указать некорректный адрес, в этом случае браузер выведет замечание об ошибке. Firefox поле с неверным адресом обозначает красной рамкой и сообщением об ошибке при отправке формы (рис. 1), Chrome никак сразу не выделяет поле с ошибкой, но выводит сообщение при отправке формы (рис. 2). Аналогично поступает и Opera (рис. 3). Сама форма на сервер не отправляется, пока ошибка не будет исправлена.

Рис. 1. Отправка формы в Firefox

Рис. 2. Отправка формы в Chrome

Рис. 3. Отправка формы в Opera

Другие популярные браузеры (IE, Safari) интерпретируют поле для адреса электронной почты как текстовое.

Источник

Как пишется адрес электронной почты

5 минут Автор: Елена Иванова 230

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

Формат адреса

Адрес электронной почты – уникальный идентификатор, не бывает двух одинаковых емэйлов. Он определяет и почтовый сервис, которым вы пользуетесь и ваш личный ящик.

Он формируется по четкой структуре и должен соответствовать определенным правилам. Для его составления используют только буквы латинского алфавита. Допустимы арабские цифры и некоторые непечатные знаки (нижнее подчеркивание, точка, дефис). Обязателен значок @ – эт или «собака».

Адрес электронной почты состоит из трех частей:

Как получить

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

Для регистрации указываю фамилию, имя, придумывают логин. Далее в соответствующие графы вписывают пароль. Если боитесь забыть учётные данные, запишите их.

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

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

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

Если придумать логин к почте не получается, воспользуйтесь онлайн-генератором никнеймов. Например, никнейм.ру.

Тонкости различных сервисов

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

Яндекс.ру

При регистрации емэйла на Яндексе вы получаете основной домен yandex.ru. А бонусом даются еще несколько – @ya.ru, @yandex.com, @yandex.by, @yandex.ua, @yandex.kz.

Можете дописать к логину любой из них, и письма будут приходить на ящик. То есть если одному знакомому оставили почту mari_23@yandex.ru, а другому – mari_23@ ya.ru, вы прочтете письма и от одного друга и от другого.

Если при регистрации яндекс почты указали номер мобильного телефона, то он может играть роль логина в вашем емэйле. Образец такой почты – +7951ХХХХХ20@yadex.ru.

Маил.ру

Обычно мейловская почта пишется, например, так mari_23@mail.ru. Но если логин mari_23 уже занят сервис предложит варианты домена на выбор –
@list.ru, @bk.ru, @inbox.ru. И тут, если ошибетесь окончанием почты, описка будет фатальной. Письма будут приходить не вам, а кому-то другому или вовсе не будут отправляться.

Рамблер.ру

Сервис дает возможность добавить к логину окончания @rambler.ru, @lenta.ru, @autorambler.ru, @myrambler.ru, @ro.ru. Но тут, как и с маил.ру – пользоваться всеми сразу не сможете.

Поэтому для Рамблера важно определенным образом указывать весь адрес электронной почты. Например, mari_23@myrambler.ru.

Как правильно записывать

При регистрации в социальных сетях, онлайн-магазинах, играх или форумах адрес электронной почты указывается полностью. А его части располагают в правильном порядке логин + @ + домен. Конечно, значок «+» не ставится. Запрещены и пробелы между частями емэйла.

Когда вы указываете электронную почту на официальных бланках допустимо перед непосредственно адресом написать e-mail. На визитках эта приставка необязательна.

Источник

Обязательные поля в формах — отмечать или нет?

Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.

Искушение не отмечать обязательные поля

Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:

1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.

2. Они отмечают необязательные поля, так как их обычно меньше.

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

Что не так с этими подходами? Тут есть несколько проблем:

• Люди не читают инструкции в верхней части формы.

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

Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?

Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?

Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным. (Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.

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

Как пометить обязательные поля?

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

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

Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.

Можно ли отмечать необязательные поля?

Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.

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

Как насчет форм авторизации?

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

Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).

Заключение

Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.

Источник

HTML5 и его атрибуты для проверки формы

2015-05-22 / Вр:13:29 / просмотров: 22258

В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.

Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:

Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.

К примеру, у нас есть стандартная html форма:

Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email» :

Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.

Заполните и для остальных полей:

В результате, если пользователь, когда будет писать email адрес, не поставит « @ », ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ « @ ».

Такой фокус можно проделать с полем для сайта, если такое имеется:

формат ввода должен быть таким:

Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:

Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:

Цифра, что находится в фигурных скобках < >означает число вводимых символов. В моем примере не менее 4-х символов :

Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:

Итак, первый проверяемый участок до символа « @ ». В квадратных скобках [] я прописал, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках < >я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет « @ rambler.ru ».

Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « @ ».

На этом проверка правильного заполнения поля email адреса закончилась.

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

Итак, в итоге поле «email» будет выглядеть вот так:

Для образца телефона:

Для образца телефона:

Итак, в итоге поле «tel» будет выглядеть вот так:

В итоге вот такой получился код формы:

Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.

Вот так это будет выглядеть в коде:

Вот так это будет выглядеть в коде:

В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:

Таблица регулярного выражения

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

Источник