Web-дизайн

:

Основы работы с HTML
[+]
Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 6:

Формы HTML и ввод данных
A
|
версия для печати
< Лекция 5 || Лекция 6: 123456 || Лекция 7 >
Примеры форм
Регистрация в системе
<html>
<body>

<form name="input" action="html_form_action.asp" method="post">
  <table bgcolor="#9999FF">
    <tr>
      <th colspan="2" align="center">Регистрация в системе</th>
    </tr>    
    <tr>
      <td align="right">Имя:</td> 
      <td align="left"><input type="text" name="name"></td>
    </tr>
    <tr>
      <td align="right">Пароль:</td> 
      <td align="left"><input type="password" name="password"></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="checkbox">Запомнить пароль</td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" value="Вход"></td>
    </tr>
  </table>
</form>

</body>
</html>

Пример выполнения данного HTML-кода

В этом примере представлена типовая форма входа в систему авторизованного пользователя. Форма состоит из поля ввода имени, поля ввода пароля, флажка сохранения пароля и кнопки входа.

Необходимо отметить, что при работе с паролями следует использовать только метод post. При использовании метода get пароль будет передаваться для обработки в открытом виде. Для проверки этого достаточно в данном примере заменить метод post на get, запустить пример, заполнить поля (например, имя пользователя: Bill, пароль superstar ) и нажать кнопку "Вход". В этом случае в адресной строке браузера появится адрес: {ваш рабочий каталог} /html_form_action.asp?name=Bill&password=superstar.

Примечание: необходимо, чтобы в Вашем рабочем каталоге находился файл с именем "html_form_action.asp" (это может быть даже пустой файл).

Запрос документа
<html>
<body>

<form name="input" action="html_form_action.asp" method="get">
  <table bgcolor="#dddddd">
    <tr>
      <th colspan="2" align="center">Запрос документа</th>
    </tr>    
    <tr>
      <td align="right">Тип документа:</td> 
      <td align="left">
        <select name="do_type">
          <option value="mail">Письмо
          <option value="order">Приказ
          <option value="message">Служебная записка
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">Дата регистрации с</td> 
      <td align="left"><input type="text" name="date_begin" size="21" value="дд.мм.гггг"></td>
    </tr>
    <tr>
      <td align="right">по</td> 
      <td align="left"><input type="text" name="date_end" size="21" value="дд.мм.гггг"></td>
    </tr>
    <tr>
      <td align="right">Регистрационный номер:</td> 
      <td align="left"><input type="text" name="number" size="21"></td>
    </tr>
    <tr>
      <td colspan="2"><hr></td>
    </tr>
    <tr>
      <td align="right" valign="top">Ключевые слова:</td> 
      <td align="left">
        <textarea cols="17" rows="5">
        </textarea>
      </td>
    </tr>
    <tr>
      <td colspan="2"><hr></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="Отправить">
        <input type="reset">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

Пример выполнения данного HTML-кода

Это достаточно типовая форма, содержащая поля ввода текста, текстовую область и выпадающий список. Для пояснения формата ввода в полях даты регистрации по умолчанию показан образец заполнения. Но при этом необходимо отметить, что форма не проверяет корректность введенной информации.

Регистрация нового пользователя
<html>
<body>

<form name="input" action="html_form_action.asp" method="post">
  <table bgcolor="#dddddd">
    <tr>
      <th colspan="2" align="center">Регистрация нового пользователя</th>
    </tr>    
    <tr>
      <td colspan="2" align="center">Обязательные поля выделены красным цветом<br><br></td>
    </tr>  
    <tr>
      <td align="right"><font color="red">Ник (псевдоним):</td> 
      <td align="left"><input type="text" name="nick" size="27"></td>
    </tr>
    <tr>
      <td align="right"><font color="red">E-mail</td> 
      <td align="left"><input type="text" name="e_mail" size="27"></td>
    </tr>
    <tr>
      <td align="right"><font color="red">Пароль (не менее 6 сим.):</td> 
      <td align="left"><input type="password" name="password" size="27"></td>
    </tr>
    <tr>
      <td align="right"><font color="red">Подтвердите пароль:</td> 
      <td align="left"><input type="password" name="f_password" size="27"></td>
    </tr>
    <tr>
      <td colspan="2"><hr></td>
    </tr>
    <tr>
      <td align="right">Фамилия</td> 
      <td align="left"><input type="text" name="name_f" size="27"></td>
    </tr>
    <tr>
      <td align="right">Имя</td> 
      <td align="left"><input type="text" name="name_i" size="27"></td>
    </tr>
    <tr>
      <td align="right">Отчество</td> 
      <td align="left"><input type="text" name="name_o" size="27"></td>
    </tr>
    <tr>
      <td align="right">Дата рождения:</td> 
      <td align="left">
        <select name="day">
          <option>1
          <option>2
          <option>3
          <option>4
          <option>5
          <option>6
          <option>7
          <option>8
          <option>9
          <option>10
          <option>11
          <option>12
          <option>13
          <option>14
          <option>15
          <option>16
          <option>17
          <option>18
          <option>19
          <option>20
          <option>21
          <option>22
          <option>23
          <option>24
          <option>25
          <option>26
          <option>27
          <option>28
          <option>29
          <option>30
          <option>31
        </select>
        <select name="month">
          <option>января
          <option>февраля
          <option>марта
          <option>апреля
          <option>мая
          <option>июня
          <option>июля
          <option>августа
          <option>сентября
          <option>октября
          <option>ноября
          <option>декабря
        </select>
        <select name="year">
          <option>1980
          <option>1981
          <option>1982
          <option>1983
          <option>1984
          <option>1985
          <option>1986
          <option>1987
          <option>1988
          <option>1989
          <option>1990
        </select>
      </td>
    </tr>
    <tr>
      <td align="right">Пол:</td> 
      <td align="left">
        <input type="radio" name="sex" value="male">Мужской
        <input type="radio" name="sex" value="female">Женский
      </td>
    </tr>
    <tr>
      <td align="right">Город проживания:</td> 
      <td align="left"><input type="text" name="state" size="27"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Образование:</td> 
      <td align="left">
        <input type="radio" name="edu" value="h">Высшее<br>
        <input type="radio" name="edu" value="hh">Незаконченное высшее<br>
        <input type="radio" name="edu" value="ss">Среднее специальное<br>
        <input type="radio" name="edu" value="s">Среднее
      </td>
    </tr>
    <tr>
      <td colspan="2"><hr></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="submit" value="Зарегистрироваться">
        <input type="reset" value="Очистить форму">
      </td>
    </tr>
  </table>
</form>

</body>
</html>

Пример выполнения данного HTML-кода

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

Следует обратить внимание и на присутствие в форме двух групп переключателей, которые отвечают за ввод пола и образования пользователя.

Теги форм
Тег Описание
<form> Определяет форму для ввода пользователя
<input> Определяет поле ввода
<textarea> Определяет текстовую область (элемент управления для ввода многострочного текста)
<label> Определяет метку для элемента управления
<fieldset> Определяет набор полей
<legend> Определяет заглавие для набора полей
<select> Определяет список выбора (раскрывающееся поле)
<optgroup> Определяет группу вариантов выбора
<option> Определяет вариант в раскрывающемся поле
<button> Определяет кнопку
<isindex> Не рекомендуется. Используйте вместо этого <input>
Дальше >>
< Лекция 5 || Лекция 6: 123456 || Лекция 7 >

Вопросы и ответы

вопросов: 14
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

ответить
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

ответить

Студенты

всего: 883
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989
предложить дружбу
Галина Матрук
Галина Матрук
Молдова, Республика, Кишинев, UTM, 2010
предложить дружбу