Форми визначаються за допомогою елемента form. Усі елементи, які знаходяться всередині елементу form, відносяться до цієї форми.
<form> … </form>
У вступному <form> очікується атрибут action. Цим вказується, що слід робити з даними форми. Як правило, це PHP-застосування.
<form method="post" action="form.php"> … </form>
Переконайтеся, що вказаний файл дійсно можна знайти. Тому вам потрібно встановити правильний шлях.
Замість сценарію можна також вказати адресу електронної пошти.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
У цьому випадку дані форми надсилаються по електронній пошті. Це, звичайно ж, не надзвичайно елегантно, тому майже завжди використовується варіант із сценарієм. Але якщо немає під рукою сценарію, ви можете відправити форму електронною поштою.
Ще одним важливим атрибутом для елемента форми є method. Цим ви визначаєте метод передачі HTTP для відправки вмісту форми. Доступні два різних варіанти.
• post = Дані форми здійснюють двоступову передачу до вказаної адреси. Спочатку браузер звертається до вказаної адреси. Якщо це вдалося, дані форми передаються сценарію.
• get = У цьому методі дані форми додаються в кінець URL, який був призначений для атрибуту action. Дані форми таким чином будуть видно, зокрема, у рядку адреси браузера.
Звісно, виникає питання, який із цих двох варіантів слід використовувати для відправки даних форми. Принципово ви можете використовувати обидва. Зазвичай, проте, для великих обсягів даних та завантаження файлів на сервер слід використовувати метод post.
Прості поля форми
До цього часу була визначена лише зовнішня конструкція форми. Проте в браузері ще немає видимості самої форми.
<form method="post" action="form.php"> … </form>
Тепер настав час заповнити форму вмістом і життям.
Ймовірно, найбільш потрібний тип поля - це однорядкове поле введення даних. Його використовують, наприклад, для запитування імені, прізвища та адреси електронної пошти. Однорядкові поля вводу визначаються наступним чином:
<input type="text" name="vorname" />
Елементу input встановлюється поєднання атрибуту-значення type="text". Крім того, кожному полю вводу слід надати внутрішній ідентифікатор, який повинен бути унікальним в документі. Цей ідентифікатор особливо важливий при обробці даних форми використанням сценарію. Не використовуйте пробіли та спеціальні символи в ідентифікаторі.
Якщо ви переглянете результат у браузері, ви побачите наступне:
В цілому це ще не виглядає дуже вражаюче. Проте, коли ви вводите в текстове поле, ви помітите, що вже можете вводити дані там.
Для того щоб відвідувачі знали, що потрібно вводити в це поле, ще потрібно добавити підпис.
Ім'я: <input type="text" name="vorname" />
Також тут, подивившись у браузер, ви побачите очікуваний результат.
За допомогою атрибуту size ви можете визначити ширину поля.
Ім'я: <input type="text" name="vorname" size="30" /> <br /> Поштовий індекс: <input type="text" name="plz" size="5" />
Атрибуту size встановлюється бажана ширина поля.
При цьому 5 відповідає точно п'яти символам. У цьому контексті також цікавий атрибут maxlength. Цим вказується максимально допустима кількість символів, які можуть бути введені в поле. Тут також наведено приклад:
Ім'я: <input type="text" name="vorname" size="30" maxlength="40" />
Якщо значення, вказане у maxlength, більше, ніж у size, то для довших введень автоматично прокручується поле.
За допомогою атрибуту value можна встановити значення поля за замовчуванням.
Ім'я: <input type="text" name="vorname" value="Твоє ім'я" />
Значення, яке призначено для value, призначене для автозаповнення поля.
Користувачі можуть видалити це автозаповнене значення.
Ви, зокрема, можете запобігти видаленню значень з полів. Для цього визначте поле введення, яке фактично не є полем введення. На практиці такі поля часто використовуються для виведення. Це може бути цікаво, наприклад, для відображення значень, отриманих за допомогою сценарію. При цьому можна також вручну автоматично заповнити поле текстом, який відвідувачі не можуть змінити. (Примітка: знак євро, на жаль, не відображається правильно у PDF-перегляді).
<input name="preis" type="text" value="€ 699.-" readonly />
Щоб зробити поле тільки для читання, додайте йому атрибут readonly. Ще раз погляньте на результат:
Ви побачите заздалегідь вказаний текст. Однак його не можна видалити.
Визначення полів для пароля
Звісно, ви знаєте поля для пароля. При реєстрації ви повинні вказати пароль. (Зазвичай вам потрібно ввести його двічі).
Дані, введені в поле введення, не відображаються та автоматично замінюються зірочками/точками в браузері. Вигода цього варіанту поля: люди, які можуть спостерігати за вами під час введення пароля, не можуть розшифрувати його. Проте це є помилковою думкою, що поля для пароля автоматично є безпечними. Фактично паролі передаються у відкритому вигляді при надсиланні форми через звичайний HTTP.
Поля для пароля визначаються наступним чином:
<input type="password" name="passwort" />
Атрибуту type присвоюється значення password. Ще раз погляньте на результат.
Якщо ви щось вводите туди, браузери приховують його під час введення.
