Формы на сайте (продолжение).



Кнопки


Используют следующие виды кнопок .

  • submit - кнопка отправки содержимого формы web-серверу. Ее параметры:
  • image - графическая кнопка отправки содержимого формы web-серверу. Ее параметры:
  • reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
  • button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:

Если на форме несколько кнопок, то они должны иметь разные названия.

Пример записи кода:

<form name="forma1"> <input type="submit" name="submit" value="Отправить"> <input type="image" name="button_img" img src="../Poleznoe/images/button.jpeg"/> <input type="reset" name="reset" value="Очистить"> <input type="button" name="button" value="Отправить"> </form>

РЕЗУЛЬТАТ:


Кнопки можно задавать при помощи тегов <button> </button>. Они могут отображаться в виде текста или картинки. Этот тег имеет параметры:

  • type - тип кнопки, может принимать значения:
  • name - имя кнопки,
  • value - надпись на кнопке.
    Пример записи кода:

    <form name="forma1"> <button name="submit" type="submit"><img src="../Poleznoe/mail.gif" align="absmiddle"><font size="4"> Отправить </font> </button> </form>

    РЕЗУЛЬТАТ:


    Поле для файлов


    Поле для ввода имени файла, имеющей кнопку Browse (Обзор), при щелчке по которой открывается окно просмотра папок компьютера, где можно выбрать нужный файл.
    Пример записи кода:

    <form name="forma1"> <input type="file" name="load" size="30"> </form>

    РЕЗУЛЬТАТ:


    Раскрывающиеся списки


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

    Задаются списки с помощью тегов <select> </select>, внутри которых располагаются элементы значений <option>. Параметры этих тегов:

    • <select>:
    • <option>:


    Пример записи кода:

    <form name="forma1"> Какой язык вы хотите изучать: <select name="language" size="1"> <option selected value="html">html <option value="php">php <option value="java">java </select> Какое время вы готовы на это потратить: <select name="time" size="3"> <option selected value="1">1 месяц <option value="2">2 месяца <option value="3">3 месяца </select> Какие дни недели для занятий вас устроят: выбирайте с нажатой клавишей ctrl) <select name="day" size="7" multiple> <option selected value="mon"> понедельник <option value="tue">вторник <option value="wen">среда <option selected value="thu">четверг <option value="fri">пятница <option value="sat">суббота <option value="san">воскресенье </select> </form>

    РЕЗУЛЬТАТ:

    Какой язык вы хотите изучать:

    Какое время вы готовы на это потратить:


    Какие дни недели для занятий вас устроят:
    (выбирайте с нажатой клавишей ctrl)

    Надписи перед формой


    Элементы формы можно связать с их надписями при помощи <label> и его параметра for.
    Пример записи кода:

    <form name="forma1"> <label for="load">Выбирайте файл:</label> <input type="file" name="load" size="30"> </form>

    РЕЗУЛЬТАТ:


    Далее рассмотрим: CSS для начинающих.