Войти
Регистрация

Значки для текстовых полей в HTML

Значки для текстовых полей в HTML

Здравствуйте, дорогие читатели.

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

Например, для поля ввода телефона значок телефона и т.д.

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

Для этого в первую очередь необходимо где-то найти эти значки. Решить эту задачу нам помогут иконочные шрифты Font Awesome.

Подключаем вот этот JavaScript внутри тега <head>:


<script src="https://use.fontawesome.com/219ee59df6.js"></script>

Далее создадим простую форму с 2 полями ввода и каждое поле ввода внесем внутрь тега <div>. Также добавим наши значки перед полями ввода с помощью Font Awesome:


<form action="#" method="POST" class="form">
    <div>
        <i class="fa fa-user"></i>
        <input type="text" name="name" placeholder="Введите Ваше имя"/>
    </div>
    <div>
        <i class="fa fa-envelope"></i>
        <input type="text" name="email" placeholder="Введите Ваш email"/>
    </div>
</form>

В результате получим вот такую не стилизованную форму:

Далее уже применим CSS стили, чтобы привести ее в порядок, чтобы она выглядела привлекательно:


.form {
    width:300px;
}
.form > div {
    border:1px solid #dcdcdc;
    border-radius:4px;
    background: #fff;
    margin:5px;
    height:30px;
    padding:0 5px;
}
.form input {
    padding:5px;
    border:none;
    outline: none;
    background: transparent;
    height:100%;
    box-sizing:border-box;
} 
.form > div i {
    display: inline-block;
    height:100%;
    color:#A4A4A4;
    font-size: 14px;
}

Применив стили, получим вот такие уже привлекательные поля со значками:

Здесь все очень просто. На сайте Font Awesome Вы можете выбрать любые значки, кликнув по выбранному значку Вы увидете инструкцию по его добавлению. Добавляется значок с помощью тега <i> с нужным классом значка.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?