Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:30
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №8: создание формы в HTML

Создание формы в html

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

При работе с формами необходимо: во-первых создать HTML макет формы, во-вторых написать сценарий CGI, для обработки ответов посетителей, к сожалению HTML не умеет обрабатывать такую информацию. Позже обратимся для этого к языкам программирования javascript и php, а пока научимся создавать формы в HTML.

  • <form> - с помощью этого парного тега задается форма . В контейнере данного тега размещаются все остальные элементы формы. Тег <form> имеет следующие параметры:

  • action - задает URL-адрес, на который будет отправлена информация введенная посетителем сайта.
  • method - определяет способ передачи информации. В данном параметре рекомендуется использовать атрибут post.
  • name - задает имя формы. Если на странице имеется несколько форм, данный параметр необходимо обязательно указать.
  • target - задает имя окна, в котором будут находится результаты обработки отправленной формы.


Текстовые поля

  • <input> - тег используется для создания текстового поля. Текстовые поля - это пустые прямоугольники, в которые посетители смогут вводить текст. Данный тег имеет следующие параметры:

  • name - задает имя созданного элемента
  • type - указывает тип использующегося элемента
  • size - задает ширину текстового поля, в значении следует указывать количество символов
  • maxlength - задает максимальное количество символов, которое можно ввести в текстовое поле (по умолчанию - бесконечное количество символов)
  • value - задает текст, который будет написан в поле, который можно стереть и внести свой текст (по умолчанию - поля текстовые поля будут пустыми)
  • disabled - поле с таким параметром невозможно изменить
  • readonly - поле с таким параметром предназначено только для чтения

Создадим форму с несколькими текстовыми полями:
<form>
Фамилия                      <input name="name1" type="text" size="25"><br>
Имя                               <input name="name2" type="text" size="30" value="Василий" maxlength="7"><br>
Отчество                      <input name="name3" type="text" size="25"><br>
Неизменяемые поля    <input name="only read" type="text" size="20" value="Изменения запрещены" disabled> &
                                      <input name="only read2" type="text" size="20" value="Только для чтения" readonly>
</form>

Фамилия
Имя
Отчество
Неизменяемые поля &

Обратите внимание на строку с именем. Имя Василий можно стереть и написать другой текст, однако ваш текст ограничен всего 7-ми символами, в отличие от других полей.


Поля для ввода пароля

В отличие от предыдущих полей, в полях для паролей вводимый текст не отображается, вместо него появляются специальные маркеры, например кружочки или звездочки. Имеет все вышеперечисленные параметры. Однако в данном случае в параметре type необходимо указать значение password. Создадим поле для пароля
<input name="pass" type="password" size="25" maxlength="8">
Появится такое поле, если попробовать в него что-нибудь ввести, содержимое отобразится в виде одинаковых символов. Данный пароль ограничен 8-ю символами.


Переключатели

Чтобы предоставить посетителю веб-страницы возможность выбрать только один вариант из нескольких предлагаемых, применяются переключатели. Для создания переключателя необходимо написать тег <input> с параметром type, значение которого - radio. Все переключатели группы должны иметь одинаковое имя (задается параметром name). Также очень важно указать значение параметра value, именно это значение обрабатывает браузер, когда посетитель отправляет содержимое формы. Пример переключателя:
<b>Ваш пол:</b><br>
<input type="radio" name="Sex" value="Мужской">Мужской<br>
<input type="radio" name="Sex" value="Женский" checked="checked">Женский<br>

Ваш пол:
Мужской
Женский

Благодаря параметру checked изначально выбор стоит на "Женский", таким образом можно помечать наиболее вероятные ответы, что упростит пользователям процесс заполнения формы.


Флажки

В отличие от переключателей, флажки дают возможность пользователям выбирать несколько вариантов ответа. Создание флажков аналогично созданию переключателей, используются те же теги и параметры. Единственное что необходимо изменить это значение параметра type с radio на checkbox. Еще одним отличием от переключателей является то, что каждому флажку можно задать свое имя. Примеры флажков:
Какими языками вы владеете:
<b>Какими языками вы владеете?</b><br>
<input type="checkbox" name="RUS" value="RUS" checked>русский
<input type="checkbox" name="ENG" value="ENG" checked>английский
<input type="checkbox" name="GER" value="GER">немецкий
<input type="checkbox" name="JPN" value="JPN">японский

Какими языками вы владеете?
русский английский немецкий японский

Большие текстовые поля

Большие текстовые поля удобно использовать для почтовых сообщений или в пункте анкеты "О себе". Такие поля создаются с помощью парного тега <textarea>. Данный тег имеет следующие параметры:

  • name - задает имя большого текстового поля
  • cols - ширина поля, в значении указывается сколько символов влезет в поле
  • rows - задает количество строк текста, которые будут видны на экране
  • wrap - указывает, каким способом будут переносится слова в данном поле, имеет следующие значения:
    • off - перенос отключен, весь текст будет печататься на одной строке
    • virtual - перенос виртуально отображается, однако на сервер поступит неделимая строка
    • physical - перенос осуществляется, как на экране, так и после поступления на сервер
  • disabled - отключенное поле
  • readonly - поле предназначено только для чтения
Создадим два текстовых поля с различными параметрами:
<textarea cols="40" rows="3" wrap="off"></textarea>
<textarea cols="50" rows="5" wrap="physical"></textarea>

Если попробовать ввести в них текст, заметно что первое поле не переносит строку(только при нажатии клавиши "Enter"), а второе успешно переносит, как известно именно параметр warp позаботился об этом.


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

Использование таких списков позволяет экономить место в форме, а также красиво ее оформлять. Возможные значения поля списка не отображаются, пока посетитель страницы не кликнет по кнопке со стрелкой, направленной вниз. Каждому списку в форме, необходимо присваивать уникальное имя. Списки бывают с возможностью выбора одного пункта, а также с множественным выбором. Задаются списки с помощью парных тегов <select> и </select>, в которых располагаются элементы значений, которые задаются тегом <option>. Данные теги имеют следующие параметры:

  • <select>
  • name - задает имя списка. Каждый выбранный посетителем элемент списка при передаче на сервер будет иметь такой вид: name.value, где значение value берется из тега option.
  • size - задает количество видимых элементов списка: при значении 1 - создается простой раскрывающийся список, больше 1 - создается список с полосой прокрутки.
  • multiple - при указании этого значения, посетитель сможет выбрать в качестве ответа нескольких элементов списка.
  • <option>
  • selected - при этом значении выбор изначально будет стоять на наиболее вероятных ответах, если список позволяет выбрать несколько элементов, то можно пометить несколько пунктов(с помощью клавиши "ctrl").
  • value - значение, которое будет отправлено на сервер, если выбран данный пункт.

Создадим для примера три списка с разными параметрами:

Откуда вы?<br>

<select name="country" size="1">

     <option selected value="RUS">Россия

     <option value="UKR">Украина

     <option value="GER">Германия

     <option value="JPN">Япония

 </select><br><br>

Ваше образование:<br>

 <select name="time" size="6">

       <option selected value="doctor">Доктор наук

       <option value="Vo">Высшее образование

       <option value="Tech">Техническое образование

       <option value="Special">Среднее-специальное 

       <option value="Srednee">Полное среднее

       <option value="No">Отсутствует

  </select><br><br>

Для чего изучаете язык HTML?<br>

(выбирайте с нажатой клавишей ctrl)<br>

  <select name="Why html" size="5" multiple>

       <option selected value="Site">Создание сайта

       <option value="wisdom">Занимаюсь саморазвитием

       <option value="work">Для работы

       <option selected value="learn">Для учебного заведения

       <option value="free">Просто захотелось создать персональную страничку

   </select> 

Откуда вы?



Ваше образование:


Для чего изучаете язык HTML?
(выбирайте с нажатой клавишей ctrl)


Группировка пунктов списка

  • <optgroup> - этот парный тег, позволяет группировать пункты списка. У данного тега есть параметр label, который задает названия пунктов в списке. Получил широкое применение в каталогах сайтов, а также на биржах обширной тематики. При использовании этого тега необходимо также закрывать тег </option>

    Пример использования:
<select name="catalog" size="8">

    <optgroup label="Видеоигры">
         <option value="1">RPG</option>
         <option value="2">Action</option>
         <option value="3">Strategy</option>
   </optgroup>

   <optgroup label="Кинематограф">
         <option value="4">Ужасы</option>
         <option value="5">Триллеры</option>
         <option value="6">Комедии</option>
         <option value="7">Боевики</option>
   </optgroup>

   <optgroup label="Музыка">
         <option value="8">DnB</option>
         <option value="9">Trans</option>
         <option value="10">Rock</option>
   </optgroup>

  </select>

Мультимедийный каталог:

Кнопки

Различают пять типов кнопок. Задаются они с помощью тега <input> и его параметра type, в котором необходимо указать какую кнопку вы хотите создать. Также кнопки можно создать с помощью тега <button>, у которого больше возможностей. Вначале рассмотрим первый вариант. Ниже перечислены типы кнопок и их значения:

  1. Кнопка для отправки заполненной формы на сервер:
    • type="submit" - задает тип этой кнопки
    • name - задает название данной кнопки
    • value - задает надпись отображаемую на кнопке
  2. Графическая кнопка для отправки заполненной формы на сервер, необходимо заранее нарисовать или скачать файл такой кнопки
    • type="image" - задает тип этой кнопки
    • name - задает название данной кнопки
    • src - адрес для файла изображения данной кнопки
  3. Кнопка сброса. При ее нажатии вся заполненная формы вернется в исходное положение: содержимое всех полей исчезнет.
    • type="reset" - задает тип этой кнопки
    • name - задает название данной кнопки
    • value - задает надпись отображаемую на кнопке
  4. Произвольная кнопка, ее действия необходимо назначить, также можно использовать в качестве ссылки
    • type="button" - задает тип этой кнопки
    • name - задает название данной кнопки
    • value - задает надпись отображаемую на кнопке
    • onclick - задает действие при щелчке по кнопке.
  5. Кнопка для загрузки файлов
    • type="file" - задает тип этой кнопки
    • name - задает название данной кнопки
    • value - задает надпись отображаемую на кнопке
Создадим все перечисленные типы кнопок:
  <input type="submit" name="submit" value="Отправить">
  <input type="image" name="but_img" src="http://phantomx5.ucoz.ru/22.gif" border="0">
  <input type="reset" name="reset" value="Очистить">
  <input type="button" name="button" value="Отправить"><br>
  <input type="file" name="load" size="50">



Пример анкетированной формы регистрации

Для примера создадим простую формы регистрации с небольшой анкеткой, использую весь материал по созданию форм. Полный код анкеты:

<p align="left">Анкета пользователя</p>

<form>

     <p><b>Ответьте пожалуйста на вопросы:</b></p>

     <p>Фамилия<input name="surname" type="text" size="25"><br>

Имя                       <input name="name" type="text" size="30"><br>

Отчество              <input name="surname" type="text" size="25"><br><br>

Задайте пароль   <input name="pass" type="password" size="25" maxlength="8"></p>

<hr size="2" width="80%" align="left">

     <p><b>Ваш пол:</b><br>

           <input type="radio" name="Sex" value="Мужской" checked="checked"> Мужской<br>

           <input type="radio" name="Sex" value="Женский"> Женский<br></p>

<hr size="2" width="80%" align="left">

      <p><b>Семейное положение:</b><br>

           <input type="radio" name="family" value="-" checked="checked">Холост/Не замужем<br>

           <input type="radio" name="family" value="+">Женат/Замужем<br>

Количество детей:  <input type="text" size="20"></p>

<hr size="2" width="80%" align="left">

     <p><b>Место жительства</b>:<br>

Страна: <select>

     <option>Выберите страну</option>

     <option>Украина</option>

     <option>Россия</option>

     <option>Белоруссия</option>

     <option>Китай</option>

     <option>США</option></select><br><br>

Другая:  <input type="text" size="20"><br>

Индекс:  <input type="text" size="6"><br>

Город:     <input type="text" size="20"><br>

Улица:    <input type="text" size="20"><br>

Дом:         <input type="text" size="3"> Квартира: <input type="text" size="4"><br>

<hr size="2" width="80%" align="left">

     <b>Какими языками вы владеете?</b><br>

             <input type="checkbox" name="RUS" value="RUS" checked>русский

             <input type="checkbox" name="ENG" value="ENG" checked>английский

             <input type="checkbox" name="GER" value="GER">немецкий

             <input type="checkbox" name="JPN" value="JPN">японский

<hr size="2" width="80%" align="left">

     <b>Ваше образование</b><br>

  <select name="time" size="6">

       <option selected value="doctor">Доктор наук

       <option value="Vo">Высшее образование

       <option value="Tech">Техническое образование

       <option value="Special">Среднее-специальное 

       <option value="Srednee">Полное среднее

       <option value="No">Отсутствует

  </select><br>

     <b>Немного о себе</b><br>

         <textarea cols="50" rows="5" wrap="physical"></textarea>

<hr size="2" width="80%" align="left">

Электронный адрес: <input type="text" size="25"><br>

 <hr size="2" width="80%" align="left">

          <input type="submit" value="отправить данные"> <input type="reset" value="очистить поля">

</form>


В браузере получим форму со всеми изученными на этом уроке возможностями:

Анкета пользователя

Ответьте пожалуйста на вопросы:

Фамилия
Имя
Отчество

Задайте пароль


Ваш пол:
Мужской
Женский


Семейное положение:
Холост/Не замужем
Женат/Замужем
Количество детей:


Место жительства:
Страна:

Другая:
Индекс:
Город:
Улица:
Дом: Квартира:


Какими языками вы владеете?
русский английский немецкий японский

Ваше образование

Немного о себе

Электронный адрес:

Благодаря данному уроку вы сможете отредактировать любую форму под свой дизайн. Далее рассмотрим - использование фреймов в HTML.


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru