Формы в HTML5 (2 часть)

Всем доброго времени суток. На связи Алексей Гулынин. Целых 4 дня не писАл в блог. Начал дома ремонт: электричества нет, разруха полная (попозже выложу фотографии этого ужаса). В данной статье мы продолжаем разбираться с формами в HTML5. В прошлой статье мы изучили достаточное количество новых элементов, которые подарил нам HTML5, но это ещё не все. Давайте начнём с нового атрибута list и связанного с ним тега <datalist>. Вы ни раз видели на сайте такой функционал: вы начинаете вводить что-то, и вам сразу, в виде всплывающего окна, показываются элементы, которые можно выбрать. datalist как раз и реализует подобный функционал. Сразу пример:

<!DOCTYPE html5>
<html>
<head>
	<title>Формы в HTML5 (2 часть)</title>
	<meta charset="utf-8"/>
</head>
<body>
<form name = "form1" action = "#" method = "post">
	<input type = "text" name = "cities" list = "mycities"/>
	<datalist id = "mycities">
		<option label="Стерлитамак1" value="Стерлитамак"/>
		<option label="Салават1" value="Салават"/>
		<option label="Ишимбай1" value="Ишимбай"/>
	</datalist>
</form>
</body>
</html>

Вы увидите пустое текстовое поле. Наберите в нём букву "С" и увидите варианты выбора с двумя городами. В данном случае я указал разные значения в label и value для того, чтобы вы набрали пример и посмотрели, в чем разница между label и value. Обращаю ваше внимание, что в разных браузерах подобный функционал может быть реализован по разному. В атрибуте list указывается тот datalist, значения которого мы хотим увидеть.

Новый элемент <dialog> служит, как не трудно догадаться, для создания диалога. Реализуется он следующим образом:

<dialog>
  <dt>Собеседник 1</dt>
  <dd>Сообщение собеседника 1</dd>
  <dt>Собеседник 2</dt>
  <dd>Сообщение собеседника 2</dd>
</dialog>

Парный тег <dt> отвечает за имя пользователя, а парный тег <dd> за сообщение пользователя.

Также появился функционал по работе с цветом. Реализуется он с помощью атрибута type = "color":

<p><input type = "color" name = "color"/></p>

В яндекс-браузере всё работает нормально, в IE11 почему-то до сих пор не реализовано.

HTML5 не обошел стороной работу с датами. Реализовать можно с помощью атрибута type = "date":

<p><input type = "date" name = "date"/></p>

В браузере яндекса опять всё нормально, IE11 снова нас не балует. Думаю ещё пока рано применять данный инструмент, лучше воспользоваться JQuery и реализовать с помощью datepicker(). Как это сделать, поговорим в одной из следующих статей. Отмечу, что можно вывести ещё и время с помощью атрибута type = "time". А если нужно вывести и дату, и время. Для этого нужно использовать атрибут type = "datetime-local". Наберите и проверьте работает ли данная конструкция в вашем браузере.

Также в HTML5 появился элемент, который обычно реализует загрузку. Это <progress>:

<p><progress value = "50" max = "100"></progress></p>

В данном случае максимальное значение 100, значение, которое мы поставили — 50. Прогрессбар будет заполнен наполовину. Наберите данный пример и посмотрите, как он работает.

В качестве домашнего задания предлагаю реализовать следующую задачу:

Необходимо создать 2 поля для ввода даты (атрибут type = "date") и под ними кнопку, при нажатии на которую будет выводиться количество дней между этими датами. Вариант реализации можно посмотреть ниже:

Подсмотреть код реализации

<!DOCTYPE html5>
<html>
<head>
	<title>Формы в HTML5 (2 часть)</title>
	<meta charset="utf-8"/>
</head>
<body>
<form name = "form1" action = "#" method = "post">
	<p><input type = "date" id="firstDate"/></p>
	<p><input type = "date" id ="lastDate"/></p>
	<p><input type = "button" id="count" value = "Посчитать"/></p>
	<script>
		var firstDate = document.getElementById("firstDate");
		var lastDate = document.getElementById("lastDate");
		var but = document.getElementById("count");
		but.addEventListener("click",function() {
			var fD = new Date(firstDate.value);
			var lD = new Date(lastDate.value);
			alert("Количество дней между двумя датами = " + Math.round((lD.getTime() - fD.getTime()) / (1000 * 24 * 60 * 60)));
		});
	</script>
</form>
</body>
</html>

В данной статье вы узнали, что появилось нового по работе с формами в HTML5.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.