belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

6.3. Универсальный тег <input>. Назначение тега <label>

Как говорилось выше, элемент 'form' является контейнером, в котором расположены остальные элементы формы. Самым универсальным из них можно смело назвать пустой элемент 'input', поскольку он применяется как для создания текстовых полей, так и различных кнопок, переключателей, скрытых полей и т.д. Формируется данный элемент соответствующим одиночным тегом <input>, а его назначение определяется его атрибутом type, который может принимать целый ряд значений:

Использование некоторых из перечисленных разновидностей элемента 'input' показано в примере 6.3.

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Формы</title>
</head>
<body>
<form action="php/registration.php" method="POST" name="reg_form">
	<!-- Создаем поле для ввода имени -->
	<label>Имя: <input type="text" name="first_name"></label><br><br>
			
	<!-- Все элементы одной группы радиокнопок должны иметь одно имя-->
	Возраст: <label>20-30<input type="radio" name="age" value="2030"> &nbsp;</label>
	<label>31-40<input type="radio" name="age" value="3140">  &nbsp;</label>
	<label>41-50<input type="radio" name="age" value="4150"></label><br><br>
	
	<!-- Выбираем виды, которыми владеем -->
	Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box">  &nbsp;</label>
	<label>каратэ<input type="checkbox" name="karate" value="karate">  &nbsp;</label>
	<label>дзюдо<input type="checkbox" name="judo" value="judo"></label> <br><br>
	
	<!-- Поле для загрузки файла (фото) -->
	<label>Загрузить фото: <input type="file" name="foto"></label><br><br>
	<!-- Поле ввода пароля -->
	<label>Введите пароль: <input type="password" name="passw"></label><br><br>
	
	<!-- Создаем кнопки сброса и отправки данных на сервер -->
	<input type="reset" value="Сброс"> &nbsp; &nbsp;
	<input type="submit" value="Отправить"> 
</form>
</body>
</html>

Пример 6.3. Использование элемента 'input'

Как видим, элемент 'input' действительно универсальный. И это без учета того, что в HTML 5 был добавлен еще целый ряд значений для атрибута type, которые можно посмотреть на официальном сайте здесь. Мы их не указывали, так как на данный момент они поддерживаются еще не всеми браузерами.

Кроме атрибута type у элемента 'input' присутствует весьма внушительное количество дополнительных атрибутов. Перечислим их.

И даже сейчас некоторые атрибуты элемента 'input' не были перечислены. Полный список атрибутов можно посмотреть на официальном сайте здесь. Однако на данный момент они поддерживаются еще не всеми браузерами.

Если для элемента 'form' указаны атрибуты novalidate, action, enctype, method, target и др., то соответствующие атрибуты элементов формы в случае применения переопределяют их.

Использование некоторых из перечисленных атрибутов элемента 'input' показано в примере 6.4. А попрактиковаться с ними можно в разделе 'Задачник'.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Атрибуты элемента 'input'</title>
</head>
<body>
<form action="php/registration.php" method="POST" name="reg_form">
	
	<label>Имя: <input type="text" name="first_name" 
	minlength="2" maxlength="20" autofocus></label><br><br>
			
	<label>Фамилия: <input type="text" name="last_name" 
	minlength="3" maxlength="20"></label><br><br>
	
	<!-- Все элементы одной группы радиокнопок должны иметь одно имя-->
	Возраст: <label>20-30<input type="radio" name="age" value="2030"> &nbsp;</label>
	<label>31-40<input type="radio" name="age" value="3140">  &nbsp;</label>
	<label>41-50<input type="radio" name="age" value="4150"> </label><br><br>
	
	<!-- Выбираем виды, которыми владеем -->
	Виды единоборств: <label>бокс<input type="checkbox" name="box" value="box"> &nbsp;</label>
	<label>каратэ<input type="checkbox" name="karate" value="karate">  &nbsp;</label>
	<label>дзюдо<input type="checkbox" name="judo" value="judo" checked> </label> <br><br>
	
	<!-- Поле для загрузки нескольких файлов сразу (фото) -->
	<label>Загрузить фото: <input type="file" name="foto" multiple></label><br><br>
	
	<!-- Обязательное поле ввода логина -->
	<label>Введите логин: <input type="text" name="login" required></label><br><br>
	
	<!-- Обязательное поле ввода пароля -->
	<label>Введите пароль: <input type="password" name="passw" 
	minlength="7"  maxlength="15" required></label><br><br>
	
	<!-- Создаем кнопки сброса и отправки данных на сервер -->
	<input type="reset" value="Сброс"> &nbsp; &nbsp;
	<input type="submit" value="Отправить"> 
</form>
</body>
</html>

Пример 6.4. Использование атрибутов элемента 'input'

В рассмотренных нами примерах многие поля расположены внутри элементов 'label', сформированных парными тегами <label>. Данные элементы необходимы для установления связи между текстом и элементом формы, которые расположены внутри них. В результате этой связи при щелчке на тексте соответствующее поле получит фокус. Установить такую связь можно еще одним способом. Необходимо поместить требуемый текст внутрь контейнера 'label', а в открывающем теге <label> задать атрибут for, указав в качестве значения соответствующее значение атрибута id элемента формы, с которым требуется установить связь (см. пример 6.1). Использовать элемент 'label' очень удобно, т.к. нет необходимости, например, целиться в маленькое окошко для того, чтобы поставить галочку, а достаточно щелкнуть по соответствующей надписи.

Контрольные вопросы и задания

  1. Перечислите типы элемента 'input'.
  2. Опишите атрибуты элемента 'input'. Какие из них переопределяют
    соответствующие значения атрибутов формы?
  3. Чем полезен элемент 'label'?

Словарь новых английских слов

form [ˈfɔːm] – форма, фигура.
action [ˈakʃ(ə)n] – действие, акция.
validate [ˈvalɪdeɪt] – подтверждать, проверять.
accept [əkˈsɛpt] – принимать.
input [ˈɪnpʊt] – вводить данные, ввод.
value [ˈvaljuː] – значение, ценность.
hidden [ˈhɪdn] – скрытый, спрятанный.
password [ˈpɑːswəːd] – пароль.
reset [riːˈsɛt] – возврат в начальное положение.
submit [səbˈmɪt] – представить на рассмотрение .
multiple [ˈmʌltɪp(ə)l] – множественный.
required [rɪˈkwʌɪəd] – обязательный.
read [riːd] – читать.
only [ˈəʊnli] – только.
length [leŋθ] – длина.
list [lɪst] – список, каталог.
check [tʃɛk] – проверять, проверка, птичка.
label [ˈleɪb(ə)l] – ярлык, бирка.
area [ˈeəriə] – район, область, зона.
row [raʊ] – ряд, последовательность.
hard [hɑːd] – твердо, крепко.
soft [sɔːft] – мягко, нежно.
select [sɪˈlɛkt] – выбирать, отбирать.
button [ˈbʌt(ə)n] – кнопка, пуговица.
group [ɡruːp] – группа, кучка.
option [ˈɒpʃ(ə)n] – предмет выбора.
field [fiːld] – площадка, участок, поле.
set [set] – устанавливать.
legend [ˈlɛdʒ(ə)nd] – легенда, надпись.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх