select,textarea,button

Формы часть 2 (select,textarea,button)

15 авг. 2017

В прошлом уроке мы изучили теги form и 11 атрибутов тега input. В этом уроке разберем оставшиеся элементы форм.
По окончанию этого урока мы сделаем форму оформления покупки. Но для ее создания необходимо изучить еще селекты открытые и закрытые, текстовое поле и кнопку с изображением. 

Формы часть 2 (select,textarea,button)

Тег select позволяет создавать раскрывающийся список, состоящий из 1 или нескольких элементов. Элементами селекта являются теги option. Причем теги select и option являются парными тегами. Это сделано для того, чтобы внутри тега select расположить элементы, а внутри option поместить текст. Селекты бывают как закрытыми, так и открытыми. По умолчанию они являются закрытыми, а чтобы их сделать открытыми достаточно указать атрибут multiple со значением multiple у тега select. 

<form><select multiple="multiple">
		<option>Вариант 1</option>
		<option>Вариант 2</option>
		<option>Вариант 3</option>
	</select></form>

Получим результат:

Для создания большого текстового поля используют парный тег textarea. Внутри тега можно поместить текст, который будет отображаться в текстовом поле. По умолчанию поле имеет маленькую ширину и высоту, для того, чтобы их увеличить используют атрибуты cols и rows. Cols - это количество колонок, rows - количество рядов. В значении этих атрибутов указывают числа без величин, т.е. указывают только значение.

<textarea cols="50" rows="10">Текст по умолчанию</textarea>

Результат:

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

<button><img src="mail.png"> Кнопка</button>

Результат:

А теперь доделаем нашу форму до предложенного образца, вставляя инпуты.
Вот весь код:

<h1>
	Оформление покупки
</h1><form>
	<p>Ваше имя: <input type="text"></p>
	<p>e-mail: <input type="text"></p>
	<p>Выберите комплект товара:</p>
	<select multiple="multiple">
		<option>Вариант 1</option>
		<option>Вариант 2</option>
		<option>Вариант 3</option>
	</select>
	<p>Дополнительно</p>
	<input type="checkbox">Двойная защита
	<input type="checkbox">Ускоренная отправка
	<input type="checkbox">Отслеживание статуса
	<p>Способ оплаты</p>
	<select>
		<option>Наличные</option>
		<option>Эл.карта</option>
	</select>
	
	<p>Пожелания:</p>
	<textarea cols="50" rows="10">Текст по умолчанию</textarea>
 <br>
	<button><img src="mail.png"> Кнопка с рисунком</button>
	<p>День отправки: <input type="date"></p>
	<input type="submit" value="Отправить">
	<input type="reset" value="Сбросить">


Готово!


Оформление покупки


Ваше имя: 


e-mail: 


Выберите комплект товара:



Дополнительно


Двойная защита
Ускоренная отправка
Отслеживание статуса

Способ оплаты




Пожелания:



 


День отправки: 


Если статья понравилась, то поделитесь ей в социальных сетях:

Понравилась статья? Подпишись и будь в курсе всех новостей!

Нажимая на кнопку, вы даете согласие на обработку своих персональных данных Политика конфиденциальности

Вам также будет интересно:

Комментарии (0)


    Vkontakte