Кнопка RESET

При натисненні на цю кнопку, дані форми повертаються в первинне значення. Використовуваний type=reset

Приклад коди

<form action="/cgi-bin/handler.cgi">
<input type=text width=20> <input type=reset value="Сбросить данные">
</form>

Відображення на сторіночці

Спробуйте вписати дані і скинути їх!

Прапорці (checkbox)

Прапорці використовують, коли необхідно вибрати два або більш за варіант із запропонованих. Використовуваний type=checkbox

<form action="/cgi-bin/handler.cgi"> <b>С якими операційними системамы ви знайомі?</b>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98
<input type=checkbox name=option2 value=a2>Windows 2000
<input type=checkbox name=option3 value=a3>Linux
</form>

Ось що виходить:

З якими операційними системамы ви знайомі? Windows 95/98 Windows 2000 Linux

Ви можете поставити або зняти галочок в одного або відразу декількох елементів.
Значение поля value= визначає, що буде відправлене на сервер при поставленій галочці. Останні параметри аналогічні параметрам кнопок.

Перемикачі (radiobutton)

Перемикачі використовують, коли необхідно вибрати один єдиний варіант із запропонованих. Використовуваний type=radio

<form action="/cgi-bin/handler.cgi"> <b>Какое пора року Ви більше любите?:-)</b>
<input type=radio name=answer value=a1>Весну
<input type=radio name=answer value=a2>Лето
<input type=radio name=answer value=a3>Осень
<input type=radio name=answer value=a4>Зиму
</form>

На сторіночці можна буде побачити наступне:

Яка пора року Ви більше любите?:-) Весну Лето Осень Зиму

Тобто, використовуючи радіокнопки Ви можете вибрати лише одне значення. Спробуйте:-)

Поле із списком

У спадаючому списку можна вибирати одне або декілька значень. Зробимо вибір пори року за допомогою спадаючого списку.
Поля вибору починаються тегом <select> і закінчуються </select> Кожне вибиране поле поміщене в теги <option> і </option >

Приклад:

<form action="/cgi-bin/handler.cgi">
<b>Какое пора року Ви більше любите?:-)</b>
<p align=center>
<select name= час года>
<option>Весну</option>
<option>Лето</option>
<option>Осень</option>
<option>Зиму</option>
</select>
</form>

На сторіночці видем наступне:

Яка пора року Ви більше любите?:-)

Для списків використовуються наступні параметри:

Параметр select	Опис
name=...	Ім'я поля. Призначено для того, щоб обробник форми міг ідентифікувати це поле.
size=...	Кількість видимих рядків. За умовчанням один рядок.
multiple	Цей параметр дозволяє вибрати відразу декілька рядків. Вибір робиться за допомогою клавіші Control або Shift.
Параметр option	Опис
selected	Видиме поле за умовчанням.
value=...	Значення визначає, що буде відправлене на сервер при вибраному пункті списку.

Кнопка із зображенням

Кнопки із зображеннями аналогічні по дії кнопці Submit, але є малюнком.
Используем type=image

<form action="/cgi-bin/handler.cgi">
<table align=center>
<tr><td colspan=2>Введите ваше ім'я: <tr>
<td><input type=text width=25></td>
<td><input type=image src=../school/examples3/ser.gif width=90 height=68 border=0></td>
</tr>
</table>
</form>

На сторіночці це виглядатиме так:

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

Картанка задається за допомогою тега scr і адрес картинки.

src=../school/examples3/ser.gif

Таким чином, комбінуючи різні способи створення форм, ми можемо на одній странике розмістити декілька форм відразу. Для отдедения одного вигляду форми від іншого використовуватимемо тег <fieldset>

Приклад комбінованої форми

Приклад використання різних форм на одній страничке
Заполните, будь ласка, цю форму Вашими даними і натискуйте кнопку "Відправити дані"! Ви зможете побачити варіант обробки Ваших даних.

Заповните Ваші данные: Ім'я:   Виберіть улюблений колір: Желтий Голубой Розовий Зелений Напишіть тут що-небудь хороше:-)

Ця форма має наступний код:

<form method="post" action="8.php">
<fieldset>
<b>Зaполните Ваші дані:</b><br><br>
Имя: <input type=text name="name" maxlength=25 size=20 value=" ">
<br><br>
</fieldset>
<p>
<fieldset>
<b>Выберите улюблений колір:</b><br>
<p align=center> <input type=radio name=answer value="#F4F090">Желтый<br>
<input type=radio name=answer value="#80ECF3">Голубой<br>
<input type=radio name=answer value="#F3ACC5">Розовый<br>
<input type=radio name=answer value="#A7F4AB">Зеленый<br>
</select>
<br><br>
</fieldset>
<p>
<fieldset>
<b>Напишите тут що-небудь хороше:-)</b><br>
<textarea name="basictext" rows=7 cols=45 ></textarea>
</fieldset>
<p>
<fieldset>
<input type=reset value="Сбросить данные">
<input type="submit" value="Отправить данные">
</fieldset>
</form>

Вправа

Cоздайте на свій смак html-документ, на якому розташуєте всі розглянуті види форм. Це може бути сторіночка опиту, відправки яких-небудь даних або щось ще... Програмувати нічого не треба!:-)

Викладете файл, що вийшов, в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.

1. Символьні об'єкти.

· Що таке символьні об'єкти?

· Приклади використання

· Вправа

Що таке символьні об'єкти?

Будь ласка, наберіть ось таку строчку:

?????????????

Або мелодію

d d d d d....

Вийшло?:-)
Если ні, то познайомимося з так званими символьними об'єктами.

При складанні HTML сторіночки зручно використовувати коментарі:

<!- Текст коментаря ->

При цьому коментарі на екрані, під час перегляду документа в браузері, не відображуються.

Оскільки символи "<" і ">" сприймаються браузерами як почало і кінець HTML-меток, виникає питання: а як показати ці символи на екрані? У HTML це робиться за допомогою символьних об'єктів (&-последовательностей).

Ось тільки деякі з них:

Символьний объект	Відображення в браузері
&lt;	<
&gt;	>
&amp;	&
&quot;	"
&reg;	®
&#153;	™
&сміттю;	©
&nbsp;	пропуск

Пам'ятаєте: крапка з комою - обов'язковий елемент &-последовательности. Крім того, всі букви, складові послідовність, мають бути в нижньому регістрі (тобто, маленькі). Використання міток типа &QUOT; або &AMP; не допускається.

Символьними об'єктами можна відображувати в браузері букви, математичні знаки, знаки грошових одиниць і багато що інше. Необхідні символьні об'єкти ви завжди можете знайти в довідниках. Наприклад, здесь

http://www.konus.biz/books/DHTML...
http://ascii.org.ua/table.php
http://borisych.fopf.mipt.ru/gr025/book/10/html1019.htm

Дата добавления: 2015-10-02