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

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

рекламное digital агентство полного цикла.

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

• высокий показатель кроссбраузерности;
• правильно написанный код с точки зрения семантики;
• отсутствие каких-либо конфликтов с запоминалками паролей;
• хорошая читабильность кода.

Решение поставленной задачи с помощью Javascript

Поставленную задачу можно решить с помощью Javascript-кода, причем все установленные требования будут соблюдены.

https://www.intimledi.biz.

Начинаем с создания HTML-кода. Для начала хочу Вас ознакомить с особенностями написания HTML, чтобы было понятно что и зачем написано в коде:

1. Подписи полей логин и пароль необходимо делать не внутри тега input, а через label. Это будет правильно с точки зрения семантики нашего кода. В тоже время соответствует общепринятым правилам создания форм, что обеспечит легкое понимание кода и простоту его чтения.
2. Название наших полей (содержимое label) нужно абсолютным позиционированием установить над самим полем. То есть тег label будет лежать поверх тега input. Таким образом мы экономим место для формы и реализуем одну из поставленных нами задач. Абсолютное позиционирование задается с помощью свойства position и значения absolute для него.
3. Воспользуемся событием onfocus, благодаря которому текст названия будет исчезать при наведение на поле.
4. Для того, чтобы сохранить адекватность работы с запоминалками полей необходимо наладить их анализ при загрузке. Если поля не пустые, то текст тегов label должен быть удален.

Таким образом, мы подошли непосредственно к самому HTML-коду, который должен выглядеть следующим образом:

HTML

<form action="#">
    <fieldset>
    <legend>Вход в личный кабинет</legend>
    <div>
        <label for="siteLogin" class="labelLogin">логин</label>
        <input name="login" value="" id="siteLogin" type="text" />
    </div>
    <div>
        <label for="sitePass" class="labelPass">пароль</label>
        <input name="pass" value="" id="sitePass" type="password" />
    </div>
    <div>
        <input value="Войти" type="submit" />
        </div>
    </fieldset>
</form>

CSS

form div {
	margin: 5px 20px 5px 20px;
	position: relative;
}
fieldset {
	border: 1px solid #7caee1;
}
label {
	position: absolute;
	top: 3px;
	left: 6px;
	color: #818181;
}
input {
	margin-right: 10px;
	width: 150px;
}

После этого необходимо заняться написанием кода Javascript. Пример приведен на основе фреймворка jQuery, однако не стоит паниковать, так как при желании можно корректировать код в соответствии с другими фреймворками. Для этого не нужно много ума и времени, так как алгоритм действий сохраняется

Javascript

$(document).ready(function(){
 
/*анализ полей на наполненность -
нужно для запоминалки поролей*/
 
if($("#siteLogin").val()!='')
{
    $("#siteLogin").prev().text('');
    $("#sitePass").prev().text('');
}
 
 
/*связь события и получение полем фокуса*/
 
$("div > input").focus(
function(e)
{
    var clicked = $(e.target),
    clickedId = clicked.attr("id");
 
    /* удаление текста из label при получении
 фокуса для поля логина*/
 
    if(clickedId=="siteLogin")
    {
         clicked.prev().text('');
    }
 
    /*тоже самое для пароля*/
 
    else if(clickedId=="sitePass")
    {
         clicked.prev().text('');
     }
 
});
 
/*потеря фокуса полем*/
 
$("div > input").blur(
function(e)
{
    var clicked = $(e.target),
    clickedId = clicked.attr("id");
 
    if(clickedId=="siteLogin")
    {
        if(clicked.val()=='') clicked.prev().text('логин');
    }
 
    else if(clickedId=="sitePass")
    {
        if(clicked.val()=='') clicked.prev().text('пароль');
    }
 
});
 
});

Единственным недостатком такого решение является то, что применяется Javascript. Существуют еще пути решения данной задачи:

1. Добавить динамическое поле пароля с атрибутом type и значением password.
2. Изменение подписей с помощью фоновых изображений.

Динамические поля

Суть данного метода заключается в создании двух полей с указанием текстового типа (type="text"). В этих же полях прописываем атрибут value, значением которого будет название поля. Таким образом, мы получим название поля, которое будет в нем выводиться. Для очищения значения поля используем тот же принцип, что и в первом методе. При назначении фокуса очищаем поле. Для поля пароля необходимо наладить замену текущего типа на password.

Данный метод имеет право на жизнь, но необходимо знать его основные недостатки:

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

Решение на основе фоновых изображений

Принцип работы этого метода полностью идентичен первому способу. Единственное отличие заключается в том. Что вместо тега label используют бекграунд для тега input. Далее алгоритм сохраняется: при получении фокуса свойство background получает значение none.

Этот способ имеет ряд своих недостатков:

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

В каких браузерах работает?