Атрибут required в HTML

requiredВы наверно часто видели, когда регистрировались на сайтах, что некоторые поля обязательны для заполнения и если его не заполнить, то выводится сообщение «Заполните это поле». Сегодня мы будем делать такое же поле.

Для начала посмотрите демо. В демо просто нажмите на кнопку и вы увидите сообщение «Заполните это поле». Вот этим мы и займемся сегодня.

Чтобы поле было обязательным для заполнения к нему нужно дописать атрибут required. Данный атрибут как раз за это и отвечает. Описание атрибута ниже:

Required — устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Шаг 1. HTML-разметка
Сначала сделаем HTML-разметку. Она будет состоят из обычной формы с полем ввода и кнопкой для отправки. Вот ее код:

<form class="form">
  <input type="text"  placeholder="example: Avril Lavigne" required />
</form>

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

Но, мы продолжим и улучшим нашу форму. Выделим поле красным и добавим картинку, если не будет ничего введено. А если все будет введено, то мы выделим поле зеленым цветом и добавим картинку.

Для этого нам нужно создать CSS-файл и создать все классы, которые мы написали в первом коде.

Шаг 2. Создаем класс form
Сначала создадим просто класс form и укажем в нем ширину нашей формы:

.form {
    width: 600px;
}

Теперь придадим нашему полю input более красивый вид. Для этого добавим еще стили:

.form  input {
    width: 300px; 
    height: 30px; 
    margin: 0px 0px 0px 0px; 
    padding: 6px 6px 6px 6px; 
    background: white; 
    border-radius: 8px; 
    border: 1px solid #c7c7c7; 
    outline: none;
}

Я не прописал такие вещи как border-radius для всех браузеров, так что допишите их сами.

Шаг 3. Стили для заполненного поля input
Теперь мы будем писать стили для нашего поля input. Пишем стиль, когда поле заполнено:

.form input:required {
    background: #fff;
}

.form input:required:valid {
    background: #fff;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
    background: url("images/valid.png") #fff no-repeat 98% center;
}

Здесь мы прописали, что если поле заполнено (input:required:valid), то мы добавляем к нему рамку и тень зеленого цвета и еще картинку.

Шаг 4. Стили для поля input, когда оно не заполнено
Теперь напишем стили, когда поле не заполнено:

.form input:focus:invalid {
    background: url("images/invalid.png") #fff no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535;
}

Здесь мы прописали, что если поле не заполнено (input:focus:invalid), то мы добавляем к нему рамку и тень красного цвета и еще картинку.

На данный момент у нас уже все работает правильно. Можно оставить так, но можно добавить еще стили к нашей кнопке.

Шаг 5. Стили для кнопки
Делаем нашу кнопку более красивой. Для этого создадим класс submit и пропишем ему стили:

button.submit {
    background-color: #68b12f;
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    margin: 20px 0px 0px 0px;
    outline: none;
}

button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}

button.submit:active {
    border: 1px solid #20911e;
    outline: none;
    
}

Можете писать перед самим классом button, а можете и не писать. Разницы не будет никакой, просто я так привык писать.

Вот полный код нашего CSS-документа:

.form {
    width: 600px;
}

.form  input {
    width: 300px; 
	height: 30px; 
	margin: 0px 0px 0px 0px; 
	padding: 6px 6px 6px 6px; 
	background: white; 
	border-radius: 8px; 
	border: 1px solid #c7c7c7; 
	outline: none;
}

.form input:required {
    background: #fff;
}

.form input:required:valid {
    background: #fff;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
	background: url("images/valid.png") #fff no-repeat 98% center;
}

.form input:focus:invalid {
    background: url("images/invalid.png") #fff no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535;
}

button.submit {
    background-color: #68b12f;
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    margin: 20px 0px 0px 0px;
    outline: none;
}

button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}

button.submit:active {
    border: 1px solid #20911e;
    outline: none;
    
}

На этом все. Данный урок окончен. Спасибо за внимание!

Автор урока: Артур Хабиров
Урок для Вас подготовлен командой сайта www.red-star.pro.