x
 
Коля Коробочкин
20 сентября 2012

Научите, пожалуйста, правильно верстать формы авторизации и т. п. Перерыл интернет и «Сафари Дев центр», но не нашёл каких-либо материалов о том, как сверстать форму так, чтобы Keychain Access на маке предложил сохранить логин и пароль.



Коля!

К сожалению, я не знаю, в чём именно у вас возникла трудность, поэтому расскажу обо всём по порядку. Чтобы любой бразуер распознал форму авторизации и предложил сохранить логин и пароль, нужно оформить её правильно. Обязательно наличие самого тега form, атрибута action и поля с типом password.

<form name="letMeIn" method="post" action="login.php">
  <div><input type= "text" name="email" placeholder="почта" /></div>
  <div><input type="password" name="password" placeholder="пароль" /></div>
  <div><button type="submit">Войти</button></div>
</form>

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

<form name="letMeIn" method="post" action="login.php" target="responseFrame">
  <div><input type="text" name="email" placeholder="почта" /></div>
  <div><input type="password" name="password" placeholder="пароль" /></div>
  <div><button type="submit">Войти</button></div>
</form>
<iframe name="responseFrame" src="login.php"></iframe>

Демонстрация

Некоторые браузеры, например «Хром» и «Опера», поддержиают автозаполнение любых форм. Для этого они опираются на названия инпутов, сгруппированных в формы. Для того, чтобы браузер мог разобраться, атрибут name, у инпута должен быть соотвествующим его значению: email, lastname, country, city и т.д.

Если вам, наоборот, нужно запретить браузеру заполнять форму автоматически, то добавьте ей атрибут autocomplete со значением off. Запретить автозаполнение отдельного поля можно добавлением этого аттрибута к соответсвующему инпуту.

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


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Сергей Розенблат
20 сентября 2012

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

Азат Аюпов
30 сентября 2012

А что ставят в атрибут name галочкам «Сохранить пароль» и другим с похожим значением?

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Что дизайнеру стоит знать о якорных ссылках? Чем дизайнеру могут помочь инструменты разработчика? Анализ сетевых запросов Чем плоха стилизация по айди? Вредные комментарии: зарубки, тудушки и документашки




Недавно всплыло

2 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 1 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5