Изучаем поведение большинства элементов форм


    Чтобы лучше изучить поведение большинства элементов форм я создал простую страницу, демонстрирующую различные атрибуты границ применяемых в каскадных таблицах стилей CSS.
    Страница содержит в себе форму включающую в себя большинство элементов ввода.
    На странице программы рисующей границы размещена текстовая область, два списка и две группы элементов выбора.
<form method="post">
  <h2> Введите текст в тестовое поле</h2><br />
                 <!--Текстовое поле-->
   <textarea rows="10" cols="40" name="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.
   </textarea>
  
   <table  border="2">
  <tbody>
    <tr>
      <td>Стиль границы</td>
      <td colspan="2">Размер границы</td>
      <td>Цвет границы</td>
    </tr>
    <tr>
            <!--Ниспадающий список-->
      <td><select name="borderstyle">
            <option  value="ridge">ridge</option>
            <option  value="groove">groove</option>
            <option  value="double">double</option>
            <option  value="inset">inset</option>
            <option  value="outset">outset</option>
          </select>
      </td>
             <!--Простой список-->
      <td><select name="bordersize" size="5">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="5">5</option>
            <option value="10">10</option>
          </select>
      </td>
                 <!--Две группы переключателей-->
      <td>
      <input type="radio" checked="true" name="sizetype" value="px" />pixels<br />
      <input type="radio" name="sizetype" value="pt" />points<br />
      <input type="radio" name="sizetype" value="cm" />centimeteres<br />
      </td>
      <td><input type="radio" name="bcolor" value="red" checked="true" />red<br />
      <input type="radio" name="bcolor" value="green" />green<br />
      <input type="radio" name="bcolor" value="blue" />blue<br />
      <input type="radio" name="bcolor" value="black" />black<br />
      </td>
    </tr>
  </tbody>
</table>
                 <!-- Кнопка отправить-->
   <input type="submit" value="Отправить" />
 </form>

    Страница с формой обращается к программе обработчику form_border_vyv.php, обратите внимание на значения атрибута action.
    Для каждого элемента option я назначил атрибут value, а кнопки переключатели имеют одно и тоже имя, но разные значения.
    Кнопка submit отправляет введенные данные программе обработчику.
    Программа обработчик ожидает данные со страницы с формой. Интерпретатор PHP обрабатывает имя каждого элемента и его значение. PHP автоматически создает переменную, соответствующую каждому элементу формы. Значением этой переменной становится значение элемента.
    В случае с текстовыми областями пользователь вводит данные вручную. По умолчанию туда помещен небольшой фрагмент.
    Каждый из элементов и выпадающих и обыкновенных списков созданных при помощи объекта select имеет атрибут name. Каждый из возможных выборов в списке представлен объектом option. Каждый объект option имеет атрибут value.
    Имя объекта select становится именем переменной, а значение атрибута value – значением этой переменной
    У переключателей (радио-кнопок) в каждый момент времени может изменятся только одна из данных величин. И хотя на странице расположено по нескольку переключателей в группе, PHP программа получит только одну переменную.
    Значением этой переменной станет значение атрибута value выбранного пользователем варианта.

Введите текст в текстовое поле




Стиль границы Размер границы Цвет границы
pixels
points
centimeteres
red
green
blue
black

Автор: Сергей Зарубин

Дата: 2011-04-03

Колличество просмотров: 5985

Нравится

Комментарии к заметке:



Добавить новый комментарий


Введите число с картинки:

captcha