Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 10. Веб-формы. Продолжение темы

Содержание курса

Формы. Продолжение темы

Следующий <input> со значением атрибута type="checkbox" задает "чекбокс" или, как его еще называют "флажок". Флажку также важно указать атрибут name, по значению которого будет происходить его обработка на сервере. Атрибут checked отмечает флажок по умолчанию (флажок уже проставлен при загрузке страницы).

В html есть ряд атрибутов, имя которых совпадает со значением, в этом случае допускается значение не писать, а только атрибут. checked - один из таких атрибутов, его полное написание checked="checked", но допускается писать просто checked.

Радиокнопка задается <input /> со значением атрибута type="radio", радиокнопке также задается атрибут name. Радиокнопка в отличие от флажка предполагает выбор одного варианта из нескольких. Радиокнопки группируются по имени (атрибут name), у кнопок, которые переключаются между собой должно быть одинаковое имя. Переключения между радиокнопками разных групп не происходит.
У радиокнопки важно значение value, по которому на сервере определяется, какая из радиокнопок одной группы была нажата. Это значение должно быть уникально для каждой из радиокнопок. Атрибут checked задает выбранную радиокнопку по умолчанию.

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

			Основные элементы веб форм (продолжение): 
			
<form action=" " method="get"
enctype=application/x-www-form-urlencoded>
	<!-- Чекбокс -->
	<input type="checkbox" id="chb" name="my_chekbox" checked />
	<label for="chb">Вам нравится html?</label>
	<!-- Две радиокнопки одной группы -->
	<input type="radio" id="radio1" name="radio_button1" value="yes" checked />
		<label for="radio1">Да</label>
	<input type="radio" id="radio2" name="radio_button1" value="no" />
		<label for="radio2">Нет</label>
	</form>

Вид в браузере:

Выпадающий список формы

Выпадающий список задается элементом <select></select>, находящимся в элементе <form></form>. Внутри <select></select> находятся остальные элементы выпадающего списка.

Элемент <option></option> задает пункты списка, у него может быть атрибут value, по значению которого происходит обработка на сервере. Если атрибут value не задан, то на сервер посылается содержимое элемента <option></option>

Выбранный пункт списка по умолчанию задается сокращенным атрибутом selected. По умолчанию выбран первый пункт списка.

Атрибут size задает количество видимых пунктов списка. Значение по умолчанию size="1".

Сокращенный атрибут тега <select> multiple позволяет выбрать несколько пунктов списка (удерживая клавишу "ctrl").

При указании size больше единицы и/или указании атрибута multiple, список становится невыпадающим.

Элемент <optgroup></optgroup> объединяет пункты списка в группы. В случае его использования, этот элемент прописывается внутри элемента <select></select>, а сами пункты группы - элементы <option></option> располагаются внутри соответствующего <optgroup></optgroup>. Группе можно дать название, указав у тега <optgroup> атрибут label.

	Основные элементы веб форм (продолжение): выпадающий список
			
	<form action=" " method="get"
	enctype=application/x-www-form-urlencoded>
	<!-- Список формы -->
		<select name="list" size="4" multiple>
			<optgroup label="Смартфоны">
				<option value="1">Samsung</option>
				<option value="2">Lenovo</option>
				<option value="3">LG</option>
			</optgroup>
			<optgroup label="Планшеты">
				<option value="4">Samsung</option>
				<option value="5">Lenovo</option>
				<option value="6">LG</option>
			</optgroup>
		</select><br /><br />
		<input type="submit" value="Отправить"</input>
	</form>

Результат отображения в браузере:

Большое текстовое поле, скрытое поле, выбор файла

Текстовое поле формы задается элементом <textarea></textarea>. Его атрибуты - это:
name - имя текстового поля, по которому происходит его обработка на сервере,
cols - ширина в символах; значение указывается цифрами,
rows - видимая высота поля в количестве строк; значение указывается цифрами.
Текст по умолчанию пишется между тегами <textarea></textarea>

Выбор файла задается элементом <input /> со значением атрибута type="file". Это используется для загрузки пользователями файлов на сервер. У этого элемента также есть важный атрибут name, по которому происходит обработка на сервере.

Элемент <input /> со значением атрибута type="hidden" задает скрытое поле, которое не видно в браузере. Его используют разработчики для своих целей. У этого элемента есть также атрибуты name и value

Рамка для полей формы задается элементом <fieldset></fieldset>. В случае оформления рамкой все остальные элементы полей формы должны находиться между тегами <fieldset></fieldset>. Рамок в форме может быть несколько, объединяя (оформляя) нужные поля формы, а элемент <legend></legend>, расположенный внутри <fieldset></fieldset> задает название объединенной группе полей (это только для красоты).

Новые элементы, появившиеся сравнительно недавно:
<input type="email" name="email" /> (поле для ввода email)
<input type="url" name="url" /> (поле для ввода url сайта)
<input type="search" name="search" /> (поле для ввода поискового запроса)
<input type="number" name="num" /> (числовое поле)
<input type="range" name="range" min="1" max="5" value="4" /> (Шкала с ползунком)
Внешне эти элементы выглядят точно также, как текстовое поле (за исключением последнего) и отличаются лишь семантикой (смысловым значением).

	Основные элементы веб форм (продолжение):
	Текстовое поле, скрытое поле, выбор файла, новые элементы
			
	<form action=" " method="get"
	enctype=application/x-www-form-urlencoded>
	<!-- Большое текстовое поле -->
		<textarea name="text" cols="40" rows="5">Текст по умолчанию.</textarea>
	<!-- Поле для выбора файла -->
		<input type="file" name="upload" />
	<!-- Скрытое поле -->
		<input type="hidden" name="xxx" value="20" />
	<!-- Новые элементы -->
		<input type="email" name="email" />
		<input type="url" name="url" />
		<input type="search" name="find" />
		<input type="number" name="num" />
		<input type="range" name="range" min="1" max="10" value="4" />
	<!-- Оформление рамкой -->
		<fieldset>
			<legend>Регистрация</legend>
			<label>Введите логин</label>
			<input type="text" name="login" />
			<label>Введите пароль</label>
			<input type="password" name="psw" />
		</fieldset>
	</form>

Вид в браузере:

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

На этом мы закончим изучение html-кодов форм. В следующем уроке мы рассмотрим CSS свойства форм.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля