ЯК створити поля форм :: Веб-програмування

Обробкою даних, які відвідувачі відправляють на сервер після заповнення веб-форм, займається спеціальна програма (скрипт). Тому додавати поля в розміщену на інтернет-сторінці форму має сенс тільки в тому випадку, якщо в скрипт запрограмовані функції роботи саме з цими полями. Якщо ця умова дотримана, залишиться виконати відносно нескладну частину роботи по додаванню в вихідний код сторінки тегів, які формують потрібні поля.

Вам знадобиться

Базові знання мови HTML.

Інструкція

Операцію по формуванню необхідних тегів може взяти на себе редактор сторінок, якщо у вас є можливість використовувати в ньому режим візуального редагування. Такий редактор може бути складовою частиною системи управління сайтом - увійдіть у нього і завантажте сторінку з формою, в яку слід додати нові поля. Використовуйте операції копіювання і вставки - виділіть і скопіюйте пару існуючих елементів (поле введення і зіставлений йому текст), потім клацніть на сторінці місце, куди слід помістити додаткове поле, і вставте скопійоване.

Після цього відредагуйте властивості кожного елемента пари окремо. Напис просто виділіть мишкою і наберіть новий текст, а для поля введення використовуйте кнопку в панелі редактора, що відкриває його властивості. У властивостях вам, як мінімум, треба змінити значення в поле name - воно має відповідати назві поля, запрограмованому в обробному скрипті. Повторіть копіювання / вставку для необхідного набору полів і збережіть сторінку.

Якщо доступу до візуального редагування ні, відкрийте вихідний код сторінки в будь-якому текстовому або спеціалізованому редакторі і допишіть в нього потрібні теги. Цей спосіб вимагає деякого знання мови HTML і методів верстки веб-сторінок. Для додавання у форму простого текстового поля використовуйте тег input, вписавши в атрибут type значення text. Крім цього атрибута обов'язковим є тільки name - він повинен містити відоме скрипту-оброблювачу ім'я цього поля форми. За допомогою інших атрибутів можна задати кількість знаків, візуально визначають довжину поля введення (атрибут size), максимальне допустиму кількість знаків (maxlength), параметри стилю оформлення (style), належність до слассу (class) та ін. Виглядати цей тег в коді може, наприклад, так:

Для поля многострочного тексту використовуйте тег textarea. Він складається з двох частин - відкриває і закриває. У першій треба обов'язково поставити значення name, а за допомогою атрибутів rows і cols можна встановити кількість рядків і колонок цього елемента форми. Наприклад:

Іншими типами полів форми можуть бути чекбокси - для їх формування теж використовуйте тег input, але на відміну від однорядкового текстового поля в атрибуті type вказуйте значення checkbox. Якщо цей елемент форми повинен бути відзначений, додайте в його тег атрибут checked. Наприклад:

Для вставки в форму поля вибору і завантаження файлу використовуйте все той же тег input зі значенням file в атрибуті type. Наприклад:

Більш складна конструкція формує поле з списком, що випадає. Вона обов'язково повинна містити пару з відкриває і закриває тегів select. Між ними помістіть пари тегів option, кожна з яких задає один рядок вибору. В відкривають тегах повинен бути присутнім атрибут value (його значення буде передано на сервер), а між відкриває і закриває частинами помістіть текст, який буде бачити в цьому рядку списку відвідувач. Наприклад: