Как добавлять формы на сайт. Теги input и form

Формы часть 1. Теги input и form

14 авг. 2017

Формы на сайте – это инструменты, с помощью которых можно создать обратную связь с посетителями вашего сайта. Формы применяются почти на каждом сайте. С их помощью добавляют комментарии, оставляют реквизиты, заказывают товары, авторизуются и регистрируются на сайте, загружают файлы и т.д. Тема форм в языке HTML достаточна объемна, поэтому я разделил изучение форм на 2 урока. В этом уроке мы изучим всего лишь 2 тега и огромное количество атрибутов.

Первый тег, который мы изучим, это парный тег form , указывающий браузеру, что в документе присутствует форма и её необходимо обработать. И только потом, внутри этого тега добавляют формы. Второй тег, который мы изучим, это тег input , с английского переводится как ввод. С помощью этого одного тега можно сделать около 12 типов форм. Это осуществляется благодаря атрибуту type, в значении которого и указывают тип добавляемой формы. Давайте изучим значения атрибута type. 

 Теги input type="text"

Первое значение – поле для ввода логина

<input type=”text”>

input type="password"

Второе значение – поле для ввода пароля . Причем стоит отметить, что при вводе пароля, он не отображается, а отображаются звездочки

<input type=”password”>

 Форма добавления файлов


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

 <input type=”file”>

Добавление радтокнопки

Четвертое значение – радиокнопка, которая позволяет делать выбор между вариантами. При добавлении радиокнопок следует знать атрибут name, который как-бы говорит браузеру, что все добавленные радиокнопки относятся к одному опросу. Все радиокнопки в одном опросе должны иметь одинаковое имя. Если мы не укажем имя, то получим следующее. Поэтому атрибут name для радиокнопок обязателен.

 Какими поисковыми системами вы пользуетесь? <input type="radio" >Яндекс <input type="radio" >Google <input type="radio" >Рамблер<br><br>

 Какими поисковыми системами вы пользуетесь?

Яндекс
Google
Рамблер Добавление чекбоксов

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

На каких языках вы можете свободно разговаривать? <input type="checkbox" name="language">на русском <input type="checkbox" name="language">на английском <input type="checkbox" name="language">на немецком

 На каких языках вы можете свободно разговаривать?

на русском
на английском
на немецком Добавление поля выбора цвета в HTML

Шестое значение – выбор цвета. Этот и следующие 3 атрибута появились только в HTML 5. 

 <input type="color">

Седьмое значение – установка даты в удобной форме.

<input type="date">

 

Восьмое значение – установка времени в удобной форме 

<input type="time">

 

Девятое значение – кнопка очистки всей формы Также при добавлении пишут атрибут value , т.е. текст который будет выводиться в кнопке

<input type="reset" value="Очистить"> 

 

Десяток значение – кнопка отправки данных с сайта на сервер. , также можно ей прописать value со значением.

<input type="submit" value="Отправить">

 

Одиннадцатое значение – изображение в роли кнопки отправки данных, а также необходимо добавить источник изображения.

<input type="image" src="button.png">

 

При изучении HTML мы не сможем сделать полноценных форм, а сможем сделать только их отображение. За словосочетанием полноценные формы, я понимаю, формы, данные с которых отправляются на сервер и обрабатываются при нажатии на кнопку ввода или кнопку отправить. Все это мы будем делать в курсе php, а пока вам необходимо научиться добавлять формы. Обязательно практикуйтесь. Удачи вам и пока!

Если статья понравилась, то поделитесь ей в социальных сетях:

Понравилась статья? Подпишись и будь в курсе всех новостей!

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных Политика конфиденциальности

Вам также будет интересно:

Комментарии (0)


    Vkontakte