Создание простой формы регистрации на сайте с помощью HTML и CSS онлайн урок.


В этом уроке мы попытаемся объединить знания по HTML и CSS. Для этого создадим небольшую форму для регистрации.

Итак, пусть наша форма имеет следующие поля: First Name, Second Name, Email, Phone, About Myself.

Будем использовать блочную модель верстки. Создадим сначала HTML код: элементы формы будут находиться в блоках form-row, которые моделируют форму построчно. Также, поместим в форму теги <label>, в которых будет содержаться текст-описание для полей.



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


.form-row {
margin-bottom: 8px;
overflow: hidden;
}
.form-row input {
float: right;
height: 19px;
line-height: 19px;
margin: 0px;
padding: 0px 5px;
width: 287px;
border: 1px solid #ABADB3;
}

.reg-form {
width: 416px;
margin: 0 auto;
}


Тут важно обратить внимание на правила float: right; в form-row input и overflow: hidden; в form-row.

Подключив стилевой файл, мы получим форму, которая отцентрирована посередине экрана, а ее элементы прижимаются к правому ее краю внутри строк формы.

Теперь создадим правило для поля для больших объемов текста, кнопки отправки формы, а также - для стиля шрифтов:


.form-row textarea {
height: 90px;
line-height: 16px;
font-size: 12px;
padding: 0px 5px;
width: 404px;
border: 1px solid #ABADB3;
}

.form-row input[type=submit] {
padding:5px;
height:25px;
width:100%;
line-height: 10px;
background: #337AB7;
color:white;
}

.form-row input[type=submit]:hover {
background:#286090;
}

* {
font-family:arial;
font-size:10pt;
}


В результате, мы получим: