Web-Development. Frontend. HTML 5

Share This Post

Share on facebook
Share on whatsapp
Share on twitter
Share on email
Share on vk

HTML. Формы. Вступление.

Всем привет, дорогие читатели! Сегодня мы с вами поговорим на тему форм в HTML. 

Формы в HTML составляют одну из важнейших функций на веб странице. Они позволяют нам передавать информацию о ком либо, о чем либо в базу данных, и в дальнейшем пользоваться ею. 

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода <input> и <textarea>, списки <select>, подсказки и т.д. Весь код формы заключается в элемент <form>.

Взглянем на эту форму: 

<fieldset>

<legend>Контактная информация</legend>

<label>Имя<input type="text" required></label>

<label>E-mail<input type="email" required></label>

</fieldset>

Данная форма будет выглядеть вот так:

Для того чтобы работать с формами, для начала вам важно знать один тег, это тег input

С помощью этого тега, вы можете использовать почти все элементы, у формы регистрации.

И так, для того чтобы создать формы. Напишем тег input и дальше, у его атрибута type меняем значения, например:

Тег input, у которого type: button.

Он создаст для нас кнопку сделанную строго в форме. Данная кнопка будет оформлена, и будет иметь основные стили браузера. 

Пройдемся по основным атрибутам:

checkbox 

Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.

email

Определяет поле для ввода адреса электронной почты.

file — Элемент управления, который позволяет пользователю выбрать файл.

password -Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега <input>, чтобы задать максимальную длину значения, которое может быть введено в поле.

radio — Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка (radio button) или переключатель.

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

range — Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным.

search — Определяет однострочное текстовое поле для ввода строки поиска.

submit — Определяет кнопку отправки формы.

И использовав эти атрибуты внутри формы мы можем получить вот такой результат.

 

<!DOCTYPE html>
<html>
	<head>
		<title>HTML формы</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так после того, как мы познакомились с основными тегами и атрибутами форм, советую вам обратить внимание на атрибут action внутри тега form.

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

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

В качестве значения принимается полный или относительный путь к серверному файлу (URL).

Следующее, это атрибуты внутри тега input, такие как, name, id, value, placeholder.

Пройдемся по каждому по порядку.

name — обозначает какое название будет элемент в дальнейшем при отправке формы.

id — Атрибут form (HTML тега <input>) задает форму (элемент <form>) к которой элемент управления принадлежит. В качестве значения должен выступать идентификатор формы (id) в этом же документе.

value — это то значение, которое будет передаваться во время отправки формы.

placeholder — эдакая подсказка, которая будет помогать нам на этапе использования само формы.

И так друзья! на этом вступительный урок по формам окончен!

Всем спасибо за внимание!

Обязательно повторите пройденный материал самостоятельно!

Покеда!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Uncategorized

Теория Зон Обучения (Сеннингер, 2000)

Теория Зон Обучения (Сеннингер, 2000) Изучение чего-то нового похоже на начало нового путешествия. Вы должны оставить позади то, что удобно и привычно, чтобы учиться и

AzatAI Team

Вирусы. Распространение.

Что такое вирус? Вирус — можно назвать тайным агентом, который проникает в живые клетки организма и размножается т.е. он не может размножаться сам по себе

Do You Want To Boost Your Business?

drop us a line and keep in touch

Follow Us

© 2019 AzatAI All Rights Reserved