Атрибут cols
Вказує (число символів) число колонок, що містяться в текстовій області.
Атрибут name
Визначає найменування поля.
Атрибут rows
Задає кількість видимих рядків текстової області.
<BR> <TEXTAREA NAME="тема" COLS="38" ROWS="3">
</ TEXTAREA>
5. Використання списків у формі - тег <SELECT>
Коли форми HTML стають більш складними, у них часто включають списки з прокруткою і випадають меню. Для цього використовують тег SELECT з атрибутом TYPE = select.Для визначення списку пунктів використовують тег <OPTION>. Тег <SELECT> підтримує три необов'язкових атрибуту: MULTIPLE, NAME та SIZE.
Атрибут MULTIPLE
Дозволяє вибрати більш ніж одне найменування.
Атрибут NAME
Визначає найменування об'єкта.
Атрибут SIZE
Визначає число видимих користувачеві пунктів списку. Якщо у формі встановлено значення атрибуту SIZE = 1, то браузер виводить на екран список у вигляді випадаючого меню. У разі SIZE> 1 браузер представляє на екрані звичайний список.
У формі може використовуватися тег <OPTION> тільки всередині тега <SELECT>. Ці теги підтримують два додаткових атрибути: SELECTED і VALUE.
Атрибут SELECTED
Використовується для первинного вибору значення елемента за замовчуванням.
Атрибут VALUE
Вказує на значення, що повертається формою після вибору користувачем даного пункту. За замовчуванням значення поля дорівнює значенню тега <OPTION> ( відкрити ).
<BR> Вибір
<SELECT NAME="Вибірка">
<OPTION> Варіант 1
<OPTION> Варіант 2
<OPTION VALUE="Варіант 3"> Варіант 3
<OPTION SELECTED> Варіант 4
</ SELECT>
Рис. 1. Випадаюче меню
6. Приклад створення форми :
<html>
<head>
<!-- текст заголовка вікна -->
<title>Лаб.9 29</title>
</head>
<!-- тіло документу: -->
<body>
<!-- Форма для вводу даних -->
<form>
<!-- таблиця для оформлення форми і вирівнювання елементів -->
<table border="0" cellspacing="0" cellpadding="5" bgcolor="#eeeeee">
<!-- верхня полоса форми -->
<tr bgcolor="#cccccc"><td height="5" colspan="2"></td></tr>
<!—рядок 1 -->
<tr> <td>Ім’я</td>
<td><input type="text" name="ed1"></td>
</tr>
<!-- рядок 2 -->
<tr> <td>Прізвище</td>
<td><input type="text" name="ed2"></td>
</tr>
<!-- с рядок 3 -->
<tr> <td>По батькові</td>
<td><input type="text" name="ed3"></td>
</tr>
<!-- рядок 4 -->
<tr> <td>Телефон</td>
<td><input type="text" name="ed4"></td>
</tr>
<!-- рядок 5 -->
<tr> <td>Адреса</td>
<td><input type="text" name="ed5"></td>
</tr>
<!—відокремлення рядку вводу від кнопок -->
<tr bgcolor="#cccccc"><td height="5" colspan="2"></td></tr>
<!-- кнопки -->
<tr bgcolor="#dddddd">
<td colspan="2" align="center">
<!-- кнопка скидання даних у всіх полях -->
<input type="reset" name="btnReset" value="Скинути">
<!-- кнопка відправки даних з форми -->
<input type="submit" name="btnSend" value="Відправити">
</td>
</tr>
<!-- нижня полоса: -->
<tr bgcolor="#cccccc"><td height="5" colspan="2"></td></tr>
<!-- кінець таблиці -->
</table>
<!--кінець форми -->
</form>
</body>
</html>
Рис. 2. Форма вводу даних з використанням таблиці.
Перелік обладнання та програмногo забезпечення :
ПК
Завдання.
Створити просту форму вводу даних з використанням таблиці. (як на рис. 2)
Створити форму вводу даних, застосовуючи:
тег <INPUT> з атрибутами
TYPE = text
TYPE = checkbox
TYPE = radio
TYPE = image
TYPE = password
TYPE = reset
TYPE = submit
TYPE = hidden
тег <TEXTAREA> з атрибутами:
Атрибут COLS (Вказує число символів (колонок), що містяться в текстовій області.)
Атрибут NAME (Визначає найменування поля.)
Атрибут ROWS
-
тег <SELECT> з атрибутами :
Атрибут MULTIPLE
Атрибут NAME
Атрибут SIZE
Атрибут SELECTED
Атрибут VALUE
Запитання вихідного контролю.
Для чоговикористовуються форми?
Синтаксис тега FORM
Що таке методи GET та POST?
Що таке визначення «дії» при застосуванні форм?
Призначення та приклад використання тегу <INPUT> з атрибутами.
Призначення та приклад використання тегу <TEXTAREA> з атрибутами
Призначення та приклад використання тегу <SELECT> з атрибутами
Висновки.
Причини перетворення блочних елементів у рядкові та навпаки.
Першоджерела :
Муссиано, Кеннеди, «HTML и XHTML. Подробное руководство, 6-е издание», Символ-Плюс, 2008
Полонска Е.Л «Самоучитель язык HTML» Диалектика Москва 2003.
Довідник тегів http://htmlbook.ru/html/p/align
Довідник тегів http://manual.wpoonline.com/html.php?id=47
http://htmlbook.ru/samlayout/blochnaya-verstka/strochnye-elementy
Підручник по CSS, HTML http://ru.html.net/tutorials/css/
http://highlife.pp.ua/?p=1179
http://html.net/tutorials/html/
http://nbuv.gov.ua/books/19/html40/interact/forms.html