Ответов: 7 Просмотров: 890
|
andrewkard пишет:Daniel1999 пишет:Опишу точнее, может в поле почты для авторизации подставлять город из регистрации, может в городе регистрации подставлять электронную почту.
Это автозаполнение, значит ранее Вы вводили в инпуты с таким name эти значения в этом браузере. И он их запомнил и с радостью подставляет Вам.
Я тоже так думаю.
Я везде поставил autocomplete="off", обнаружилось что ранее в двух местах стоял autocomplete="on". Сейчас подсказывает правильно. Это спиленная форма, поэтому в её дизайне я ничего не понимаю или мало понимаю.
А вот для приличного сайта плохо когда в 2 полях подсказки вставляются, а всего их 6. То есть 2/6.
(Добавление)
В Виндоус Экслорере тоже видно это, так что это не ошибка, точнее это недоработка программиста. Формы регистрации/авторизации думают, что там всего два инпута и соответственно двумя попавшимися значениями заполняют, а там их стало в три раза больше, то есть 6. Я говорил что дело в стилях. Эти формы с одного сайта, который приводил для пользования 20 разных по дизайну форм авторизации и регистрации. Я взял самый лучший и добавил в форму 6 полей, изменил назначение тех полей которые уже были.
В стилях я мало что понимаю.
(Добавление)
Содержание файла с дизайном формы ниже:
CODE ( javascript):
скопировать код в буфер обмена
html { background: url(../images/bg.png) repeat; min-height: 100%; box-sizing: border-box; font: 12px/2 Helvetica Neue, Helvetica, Arial, sans-serif; color: #888; } ::-webkit-input-placeholder { color: #bbb; } #login { border-radius: 5px; margin: 120px auto; width: 300px; -webkit-perspective: 1000; } #login h1 { position: relative; margin: 0; padding: 15px; border: 1px solid rgba(0,0,0,.3); border-radius: 5px 5px 0 0; font-size: 16px; text-align: center; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); background-color: #3f7eb6; box-shadow: inset 0 1px rgba(255,255,255,.3); background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.15)); font-family:Tahoma; } #login h1:after { content: ""; position: absolute; width: 100%; bottom: 2px; left: 0; border-bottom: 1px dashed rgba(0,0,0,.5); } #login a { color: #888; text-decoration: none; } #login a:hover { color: #369; } #login p { margin: 0;} #login .social { display: inline-block; height: 20px; margin-left: 7px; padding: 0 2px; cursor: pointer; border-radius: 3px; } #login .social:before { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: top; margin: 3px 5px 0 0; } #login .social.fb:before { background: url('../images/fc-webicon-facebook.svg') no-repeat; } #login .social.gp:before { background: url('../images/fc-webicon-googleplus.svg') no-repeat; } #login .social:hover { color: #333; background: #eee; box-shadow: 1px 1px 1px #bbb; } #login fieldset { display: block; margin: 0; padding: 20px; background: #fff; border: 1px solid rgba(0,0,0,.3); border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 1px 2px #aaa; } #login input { width: 238px; margin: 0; padding: 12px 10px; border: 1px solid #ccc; outline: none; font-size: 14px; } #login input:focus { background: #fafafa; box-shadow: inset 0 1px 7px #ddd;} #login input[type="email"] { border-radius: 3px 3px 0 0; } #login input[type="password"] { border-width: 0 1px; border-radius: 0; } #login .form-login input[type="password"] { border-width: 0 1px 1px 1px; border-radius: 0 0 3px 3px; } #login input[type="text"] { border-radius: 0 0 3px 3px; } #login input[type="submit"] { width: 260px; padding: 12px 20px; margin: 15px 0; border: 1px solid #C1711B; border-radius: 3px; color: #111; font-size: 1.3em; font-weight: bold; text-shadow: 1px 1px 1px rgba(255,255,255,.5); cursor: pointer; background-color: #FFB83A; box-shadow: inset 0 1px 1px rgba(255,255,0,.6); background-image: linear-gradient(rgba(255,207,92,.7), rgba(223,156,38,.8)); } #login input[type="submit"]:hover { background-color: #F5FF00; } #login input[type="submit"]:active { padding: 13px 20px 11px; text-shadow: -1px -1px 1px rgba(255,255,255,.6); box-shadow: inset 0 1px 4px rgba(0,0,0,.2); } /* flip animation */ .flip { position: relative; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; } .form-login, .form-signup { position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; } .form-signup { z-index: 2; } .form-login { -webkit-transform: rotateY(180deg); } .flip.flipped { -webkit-transform: rotateY(-180deg); } #login input.login-err, #login input.login-err:focus { color: #C4550B; background-color: #FFEDD7; border-color: #EB975F; } #login input.login-err::-webkit-input-placeholder { color: #C4550B; } #login input.login-ok, #login input.login-ok:focus { color: #4E831F; background-color: #EBFDDC; border-color: #9FCC41; } #login input.login-ok::-webkit-input-placeholder { color: #4E831F; } #login p.login-msg { display: none; margin: 0 0 5px; font-size: 13px; font-weight: bold; color: #C4550B; }
|