отзывы

Восстановление
пароля

Готово

Назад

Основы программирования
Успеха достигает тот, кто способен на время отодвинуть свои увлечения
Программист - профессия будущего!

<input>

  • 83

  • 0

  • Нравится

    0

  • Код:766539047342

создавать разные элементы интерфейс...
Задайте вопрос продавцу

<input>

грн. / шт.

Компания: Уроки программирования
Телефон: +38(093)43-03-164
Адрес: Киевская область г. Киев, с. Красное
Оставьте свой номер
<input>

грн. / шт.

Оставьте свой номер телефона и представитель компании с вами свяжется.

     предназначен для создания текстовых полей, различных кнопок

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

 

 

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

 

 

Атрибуты

 

accept - Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

accesskey - Переход к элементу с помощью комбинации клавиш.

align - Определяет выравнивание изображения.

alt - Альтернативный текст для кнопки с изображением.

autocomplete - Включает или отключает автозаполнение.

autofocus - Устанавливает фокус в поле формы.

border - Толщина рамки вокруг изображения.

checked - Предварительно активированный переключатель или флажок.

disabled - Блокирует доступ и изменение элемента.

form - Связывает поле с формой по её идентификатору.

formaction - Определяет адрес обработчика формы.

formenctype - Устанавливает способ кодирования данных формы при их отправке на сервер.

formmethod - Сообщает браузеру каким методом следует передавать данные формы на сервер.

formnovalidate - Отменяет встроенную проверку данных на корректность.

formtarget - Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

list - Указывает на список вариантов, которые можно выбирать при вводе текста.

max - Верхнее значение для ввода числа или даты.

maxlength - Максимальное количество символов разрешенных в тексте.

min - Нижнее значение для ввода числа или даты.

multiple - Позволяет загрузить несколько файлов одновременно.

name - Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern - Устанавливает шаблон ввода.

placeholder - Выводит подсказывающий текст.

readonly - Устанавливает, что поле не может изменяться пользователем.

required - Обязательное для заполнения поле.

size - Ширина текстового поля.

src - Адрес графического файла для поля с изображением.

step - Шаг приращения для числовых полей.

tabindex - Определяет порядок перехода между элементами с помощью клавиши Tab.

type - Сообщает браузеру, к какому типу относится элемент формы.

value - Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

 

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

 

Разница между HTML и XHTML

В HTML тег <input> не имеет закрывающего тега.

В XHTML тег <input> должен быть правильно закрыт.

Советы и примечания

Совет: Используйте тег <label> для определения ярлыков элементов ввода.

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>


 

Описание и использование

Тег <input> используется для выбора информации от юзера.

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

Синтаксис

HTML
<input атрибуты>
XHTML
<input атрибуты />

<html>
<body>
<form action="">
<input type="radio" name="Sex" value="Мужской" checked="checked" /> Мужчина<br />
<input type="radio" name="Sex" value="Женский" /> Женщина<br />
<input type="text" size="20" value="Россия" /> Страна<br />
<input type="text" size="20" /> Город<br /><br />
<input type="image" src="../images/input_img.png" /><br />
</form>
</body>
</html>

====================

 

 

Атрибуты и значения

  • Атрибут type="" со значениями: button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week – указывает тип тега <input /> (text – по умолчанию).
  • Атрибут src="" – указывает url изображения-кнопки, применяется совместно с type="image".
  • Флажок checked="checked" – устанавливает для примера одно из предложенных значений, применяется совместно с type="checkbox" или type="radio".
  • Атрибут name="" – присваивает имя элементу. Используется для идентификации полученной информации при обработке данных.
  • Атрибут value="" используется в различных целях: надписует кнопки (если применяется совместно с type="submit" или с type="reset"), хранит некоторые значения, которые отправляются на обработку (если применяется совместно с type="checkbox" или с type="radio"), устанавливает значения по умолчанию для текстовых полей ввода данных (если применяется совместно с type="text" или с type="password").
  • Атрибут size="20" – устанавливает длину текстового поля в символах.
  • Флажок required="required" – определяет обязательное для заполнение поле.
  • Атрибут autocomplete="" со значениями on, off – говорит браузеру сохранять или не сохранять введенные пользователем данные в поля формы. Другими словами, данные автоматически отобразятся в текстовом поле формы, при повторной попытке ввода, если установлено значение on.
  • Флажок multiple="multiple" – разрешает выбирать более одного значения из списка.
  • Атрибут min="6" – устанавливает минимально допустимое количество вводимых символов.
  • Атрибут max="20" – устанавливает максимально допустимое количество вводимых символов.
  • Атрибут maxlength="30" – устанавливает максимально допустимое количество вводимых в текстовое поле символов.
  • Атрибут height="" – определяет высоту поля в пикселях или в процентах.
  • Атрибут width="" – определяет ширину поля в пикселях или в процентах.
  • Атрибут form="имя формы" – указывает имя формы, которой принадлежит элемент <input />.
  • Атрибут formmethod="" со значениями get, post, put, delete – определяет метод отправки данных на обработку по обозначенному url. Имеет преимущество перед атрибутом method="" тега <form>.
  • Атрибут formaction="url" – определяет url, по которому будут отправлены данные. Имеет преимущество перед атрибутом action="" тега <form>.
  • Атрибут list="" – смотрите теги <datalist> </datalist>.

Отзывов нет

Публикация отзыва производится после предварительной модерации

Отправить

Случайные статьи