» Створюємо HTML-форми
Типография Си-Ти пресс: Офсетная печать. Офсетная печать! Москва.У цій статті я розповім про тім як зробити на своєму сайті будь-яку форму, але попереджу відразу, що мова про яке-небудь програмування в цій статті не піде.
Тэги <form></form>
Весь опис HTML- форми розташовується усередині тэгов <form></form>. Закриваючий тэг </form> ніколи не несе в собі якої-небудь інформації, а от відкриваючий заслуговує додаткового розгляду. Розглянемо синтаксис цього тэга: <form method=”метод” action=”ім’я_сценарію”> Атрибут Method може приймати значення GET або POST. А атрибут action являє собою URL якого-небудь сценарію, що виконує дії відповідно до заповненої форми.
Тэг <input> і його атрибути
Тэг <input> має кілька атрибутів. От основні з них: <input type=”тип поля” value=”значення” name=” ім’я”> Де name приримает будь-яке унікальне ім’я в межах однієї форми; будь-яке поле уведення повинне мати ім’я, для наступного оброблення даних із цього поля сценарієм. Value - це значення за замовчуванням даного поля. Атрибут type може приймати значення text, hidden, password, checkbox, radio, reset, submit. Зупинимося на кожному з них детальніше. Після опису даних типів, ми розглянемо все на прикладах.
Text - указує браузеру, що потрібно відобразити поле уведення. Значення атрибута value тут буде вказувати первісне значення даного поля. Також тут можуть бути присутнім два додаткових атрибути, це size й maxlenght. Size визначає довжину поля, а maxleght задає максимальна кількість символів, що може ввести користувач.
Hidden - цей тип текстового поля браузер на відображає. Потрібний він для приховання від відвідувача яких-небудь даних.
Password - цей тип поля відображається аналогічно текстовому, тільки всі уведені в ньому символи будуть закриті зірочками, для того, щоб ніхто не міг підглянути пароль, що вводить вами.
Checkbox - браузер відображає цей тип поля квадратом, у якому можна поставити прапорець. За замовчуванням value даного поля коштує ON, але якщо поставити прапорець у це поле, то value прийме значення checked.
Radio - трохи схоже на checkbox, але тільки одне з декількох полів radio, у відмінності від checkbox, може бути включено.
Submit - відображає кнопку, при натисканні на яку всі дані з форми відправляються сценарію, зазначеному в атрибуті action тэга <form>.
Reset - при натисканні на цю кнопку, вся уведена інформація у форму онулируется.
Тэги <textarea></textarea>
Тэг <textarea> визначає многострочную область уведення. Цей тэг має також кілька атрибутів. От приклад: <textarea name=”ім’я” rows=”10″ cols=”20″>Цей текст буде перебуває в області уведення, даного типу, користувач може змінити цей текст</textarea> Атрибути rows й cols визначають висоту й довжину відповідно. “ім’я” - унікальне ім’я в межах однієї форми.
Тэги <select></select>
Ці тэги створюють список, кожний з варіантів якого задається тэгом <option>. Тэг <select> може нести в собі атрибути size, name й multiple. Думаю з size й name все понятно, а от c multiple, напевно не дуже. Отже, цей атрибут задає режим при якому користувач буде вибирати щось зі списку. Якщо цей атрибут присутній, то користувач може вибрати кілька значень зі списку, а якщо ж він опущений, то можна вибрати тільки одне значення.
Щоб усе було більш зрозуміло, давайте розглянемо все на прикладах:
Створюємо сторінку й пишемо в неї даний код:
<html>
<head><title>Анкета</title>
</head>
<body>
<h3 align=center>Анкета</h3>
<form action=script.php method=post>
<input type=hidden name=hidden value=”Це схований текст”>
<b>Уведіть будь ласка пороль:</b>
<input name=pass type=password>
<b>Заповните наступні дані будь ласка:</b><br>
Прізвище <input type=text size=14 name=fam><br>
Ім’я<input type=text size=14 name=name><br>
По батькові<input type=text size=14 name=ot>
<b>Скільки ви маєте судимостей:</b><br>
<select>
<option>10
<option>20
<option>30
</select><p>
<b>Скільки вам років?</b><br>
<input name=1 type=radio name=1>Від 1 до 10<br>
<input name=1 type=radio name=2>Від 10 до 18<br>
<input name=1 type=radio name=3>Від 18 до 30<br>
<input name=1 type=radio name=4>Від 30 до 50<br>
<input name=1 type=radio name=5>Від 50 до 100<br>
<input name=1 type=radio name=6>Від 100 до 200<br><p>
<b>Наявність хронічних захворювань:</b>
<input type=checkbox><br><p>
<b>Особливі примітки:</b><br>
<textarea name=texta rows=4 cols=30>
</textarea>
<input type=submit value=Всі> <input type=reset value=заново>
</form>
</body></html>
Подразделы этой страницы: