Далее на странице
Тег <input> используется совместно с тегом <form>. Он служит для создания полей ввода данных, расположенных в форме: тестовые поля, различные кнопки, флажки и переключатели...
С помощью элементов, созданных тегом <input>, пользователь вносит данные в форму, которые затем отправляются на сервер для обработки.
Атрибут Аlign
Атрибут align тега input - выравнивание изображения по горизонтали/вертикали относительно текста и других элементов формы.
- left - выравнивание изображения по левому краю окна формы
- right – выравнивание изображения по правому краю окна формы
- top - верхняя граница изображения выравнивается по уровню самого высокого элемента текущей строки
- bottom – нижняя граница изображения выравнивается по базовой линии текущей строки.
- middle – выравнивание середины изображения по базовой линии текущей строки
Атрибут Аlt
Атрибут alt тега input - альтернативный текст для кнопки с изображением. Он будет отображен вместо изображения, если оно по каким-то причинам отсутствует.
Атрибут Border
Атрибут border тега input - указывает толщину рамки вокруг изображения.
Атрибут Checked
Атрибут checked тега input - определяет заранее помеченное поле: такое как флажок (checkbox ) или переключатель (radio).
При использовании флажков допустимо помечать как один, так и несколько элементов группы. При применении переключателей можно отметить лишь один элемент.
Атрибут Disabled
Атрибут disabled тега input - устанавливает блокировку поля. В заблокированное поле нельзя, например, поставить флаг или ввести текст.
Атрибут Maxlength
Атрибут maxlength тега input - устанавливает максимальное количество символов, которое можно ввести в текстовое поле.
Атрибут Name
Атрибут name тега input - определяет имя, используемое обработчиком для идентификации поля. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.
Атрибут Readonly
Атрибут readonly тега input - текстовое поле только для чтения - нельзя изменить его содержимое.
Атрибут Size
Атрибут size тега input - определяет ширину текстового поля в символах.
Атрибут Src
Атрибут src тега input - задает адрес графического файла для поля с изображением.
Атрибут Type
Атрибут type тега input - определяет тип поля.
- checkbox - флажок. Возможен выбор нескольких вариантов из предложенных
- file - в поле вводится имя пересылаемого файла
- hidden - скрытое поле, не отображаемое на странице, дает возможность передавать скрытую информацию
- image - кнопка-изображение
- password – текстовое поле - используется для ввода пароля. Вместо символов будут показаны звездочки
- radio - переключтель. Возможен выбор лишь одного варианта из предложенных
- reset - кнопка сброса - возврата полей формы к их первоначальному виду - сброс введенных данных.
- submit - кнопка для отправки данных на сервер
- text - текстовое поле. В него вводят символы с клавиатуры.
Атрибут Value
Атрибут value тега input - значение элемента формы, которое будет отправлено на сервер.
На сервер отправляется пара «имя=значение». Пара задается атрибутами name и value соответственно.
Атрибут value, в зависимости от типа поля:
- устанавливает текстовую надпись на кнопках (type = "button","reset","submit");
- устанавливает предварительную надпись на текстовых полях (type = "password","text"). Текст можно редактировать;
- для флажков и переключателей (type = "checkbox","radio") установленное значение служит идентификатором выбранного пункта.
<html>
<head>
<meta charset="utf-8">
<title> Тег input </title>
</head>
<body>
<form action="obrabotka.php" method="post" name="test" target="_blank">
<p> Введите ФИО:
<input type="text" name="FIO" size="50">
<p> Место предполагаемой работы: <br>
<input type="radio" name="mesto" value="RF" checked> Russia <br>
<input type="radio" name="mesto" value="EU"> Europa <br>
<input type="radio" name="mesto" value="USA"> USA <br>
<p> Должность (<em> можно совмещать </em>): <br>
<input type="checkbox" name="dol" value="1"> №1 <br>
<input type="checkbox" name="dol" value="2"> №2 <br>
<input type="checkbox" name="dol" value="3"> №3 <br>
<p> О себе: <input type="text" value="Информация не интересует!" size="30" disabled>
<p> Введите пароль:
<input type="password" name="pasw" size="30" maxlength="10">
<p> <input type="submit" value="Отправить" disabled>
<p> <input type="reset" value="Сбросить">
</form>
</body>
</html>
Пояснение к примеру
Кнопка Отправить заблокирована, так как форма в примере не работает (она не связана с обрабатывающим скриптом) - она лишь иллюстрирует варианты различных полей, создаваемых тегом <input> и предназначенных для внесения данных в форму.
Кнопка Сбросить активна - Вы можете ввести данные в поля, а при необходимости привести их к первоначальному виду.
