Просмотров: 1 438

Универсальный тег input для создания элементов веб-форм.

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

Например, с помощью input мы можем создать текстовые поля для ввода текстовой информации, кнопки, при нажатии на которые происходит отправка данных на сервер, поля для ввода пароля и.т.д.

Каким же образом из одного тега можно получать сразу несколько элементов?

На самом деле все очень просто. Задавая различные значения специальному атрибуту «type», мы можем преобразовывать этот тег в разные элементы форм.

Давайте рассмотрим на примерах, какие элементы мы можем создавать:

(Можете открыть свой html-редактор и попробовать создать эти элементы на практике)

1 класс элементов. Текстовые поля.

1) Текстовое поле.

<input type="text">

2) Поле с паролем.

<input type="password">

Специальные атрибуты для текстовых полей:

1) size — задает ширину для текстовых полей.

2) maxlength – задает максимальное количество символов, которые возможно ввести в текстовое поле.

3) value – задает значение по умолчанию для текстового поля

4) disabled – блокирует доступ к текстовым полям и их изменение

Пример:

<input type="text" value="Пробный текст" size="50" maxlength="12" disabled="disabled">

Или

<input type="password"  value="Пробный текст" size="50" maxlength="12" >

2 класс элементов. Переключатели.

1) Переключатель radio

<input type="radio">

2) Переключатель checkbox

<input type="checkbox">

Специальные атрибуты для переключателей:

1) checked – указывает, какой из переключателей должен быть предварительно выбран.

2) disabled – блокирует доступ к текстовым полям и их изменение

Пример:

<input type="radio" checked="checked"> Первый
<input type="radio"> Второй
<input type="radio"> Третий

Или

<input type="checkbox" checked="checked"> Первый < br>
<input type="checkbox" checked="checked"> Второй < br>
<input type="checkbox"> Третий

3 класс элементов. Кнопки.

1) Кнопка

<input type="button" value="Надпись">

2) Кнопка для отправки данных формы

<input type="submit">

3) Кнопка для очистки данных в полях формы:

<input type="reset">

4) Кнопка с изображением

<input type="image" src="download1.jpg">

Атрибут src указывает адрес до графического файла с изображением.

5) Кнопка для выбора и отправки файла

<input type="file">

Атрибуты:

1) value – задает значение, которое будет отображаться в качестве надписи на кнопке.

2) disabled – блокирует доступ к текстовым полям и их изменение

4 класс элементов. Скрытое поле.

1) Скрытое поле (визуального эффекта на странице видно не будет, но информация, которая будет храниться в этом поле, будет передана в программу, которая будет обрабатывать  форму)

<input type="hidden">

Вот такой сегодня получился обзор. Самое главное попробуйте создать эти элементы на практике. Это дает уверенности и позволяет лучше запомнить новую информацию.