Как создать сайт

Как добавить форму на сайт

Здравствуйте! В этом уроке поговорим о формах и о том как добавить форму на сайт. Формы предназначены для ввода информации пользователями. Это и формы регистрации и различные тесты, опросы и прочие формы.

Для всего этого и предназначены HTML-формы. И сейчас мы рассмотрим как создать форму и  из каких полей состоят HTML-формы. Также следует отметить что HTML позволяет только создать форму а вот обрабатывать данные  формы язык HTML  не умеет для этого используются такие языки как JavaScript( про него читайте здесь), php и др.

как добавить форму на сайт

Для того чтобы создать форму  используется теги <form></form> а все остальные элементы размещаются между этими тегами.

У тега <form>  имеются несколько атрибутов:

  • name —  это имя формы. Необходимо, чтобы найти форму в скрипте
  • action — определяет файл, который будет обрабатывать данные формы
  • method —  собственно отвечает каким методом будут отправлены данные
  • target —  позволяет указать где будут отображаться  обработанные данные  формы.

Пока можно не очень вникать во все эти атрибуты они больше понадобятся на этапе обработки данных формы.

<form name=»forma»> </form>

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

Текстовое поле нужно для ввода различной информации.  Задается  с помощью тега <input>

 <form name="forma">
<input name="text" size="10" maxlength="40" value="Введите текст" type="text" />
</form>

Результат:

Атрибуты:

  • name —  это имя элемента,
  • type —  представляет из  себя тип элемента (в данном случае — text),
  • size —  размер текстового поля в символах, которые будут видны
  • maxlength —  максимальное количество символов, которые можно будет ввести в поле
  • value —  текст, который будет отображаться в поле сразу после загрузки формы.

Возможны еще два параметра:

  • disabled —  заблокирует поле отлюбых изменений
  • readonly —  делает поле только для  чтения, то есть туда нельзя будет ввести информацию.

Пример:

<form name="forma"> 
<input type="text" name="text1" size="20" maxlength="50" value="неактивное поле" disabled> 
<input type="text" name="text2" size="30" maxlength="40" value="только для чтения" readonly> 
</form>

Результат:

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

Это тоже поле, но разница в том, что  при вводе  информации в это поле символы отображаются в виде звездочек и параметр type=password

Пример:

<form name="forma"> Введите пароль:<br> 
<input type="password" name="text" size="10" maxlength="40"> 
</form>

Результат:

Введите пароль:

Введите в это поле что-нибудь

Чекбоксы

Флажки они же чекбоксы предназначены для выбора опций или вариантов в тестах.

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

Чекбокс задается тегом <input>, причем один тег  задаст  один флажок.  То есть если вам нужно 4 чекбокса то потребуется  соответственно 4 inputa.

Пример:

<form name="forma"> Какими языками вы владеете:<br> 
<input type="checkbox" name="lan1" value="english" checked>английский 
<input type="checkbox" name="lan2" value="german"> румынский 
<input type="checkbox" name="lan3" value="spanish"> испанский 
<input type="checkbox" name="lan4" value="french"> французский 
</form>

Рассмотрим его параметры:

  • type —  задает тип элемента,
  • name —  позволяет указть имя флажка нужно для скрипта, который будет заниматься обработкой формы,
  • value —  нужно для скрипта-обработчика формы, чтобы знать какое поле было выбрано пользователем
  • checked —  указывает выбран чекбокс или нет

Radiobutton.

В отличие от чекбоксов  позволяют выбрать только один элемент при этом у всех элементов должен быть одинаковый атрибут name.

Пример:

<form name="forma"> Укажите ваш пол:<br>
<input type="radio" name="sex" value="male" checked>
мужской <input type="radio" name="sex" value="female"> женский
</form>

Результат:

Выберите  ваш пол:
мужской женский

Кнопки

Используются  4 вида кнопок:

  • submit — кнопка  которая отправляет данные на сервер:
    • type=»submit» — тип кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • image —  кнопка в виде картинки.
    • type=»image» — тип графической кнопки,
    • name — имя кнопки,
    • src — адрес картинки для кнопки.
  • reset — кнопка которая обнуляет данные в форме.
    • type=»reset» — тип кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • button — обычная кнопка, которая сам по себе ничего не делает, для этого надо  ее использовать в скрипте обработчике.
    • type=»button» — тип кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
    • onclick — задает функцию, которая будет выполняться при щелчке на кнопке.

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

Пример кода:

<form name="forma1">
<input type="submit" name="submit" value="Отправить"> <input type="image" name="but_img" src="but.gif">

<input type=»reset» name=»reset» value=»Очистить»> <input type=»button» name=»button» value=»Отправить»>

</form>

 

 

Результат:

Также кнопки можно задавать и при помощи тегов <button> </button>.

  • type — тип кнопки:
    • reset — кнопка сброса данных формы
    • submit — кнопка передачи данных на сервер,
    • button —  простая кнопка
  • name — имя кнопки,
  • value — надпись на кнопке.

Пример:

<form name="forma1"> <input type="submit"> Отправить </button> </form>

Результат:

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

Используется для отправки файлов на сервер. При этом  появляется кнопка «Обзор» по нажатию на которую открывается стандартное окно выбора файла.

Пример:

<form name="forma"> <input type="file" name="loadfile" size="50"> </form>

Результат:

Многострочное текстовое поле

Используется для ввода большого текста. Применяется тег textarea он в отличие от того же inputa имеет закрывающий тег.

  • name — имя поля,
  • cols — ширина поля в символах,
  • rows — количество строк текста, видимых на экране,
  • wrap — способ переноса слов:
    • off — переноса не происходит,
    • virtual — перенос отображается, но на сервер поступает неделимая строка,
    • physical — перенос и на экране и при поступлении на сервер.
  • disabled — неактивное поле,
  • readonly — разрешено только чтение.

Пример:

<form name="forma1"> <textarea cols="20" rows="3" 
wrap="off"></textarea><br> <textarea cols="35" rows="5" 
wrap="virtual"></textarea><br> <textarea cols="50" rows="7" 
wrap="physical"></textarea> </form>

Результат:



Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap.

Выпадающие списки

Выпадающие списки задаются с помощью тега <select> а  пункты списка задаются с помощью тега <option>.  Давайте рассмотрим  различные параметры выпадающего списка:

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

Пример:

<form name="forma1"> Какой язык вы хотите изучать: <select name="language" size="1"> 
<option selected value="html">html <option value="php">php <option value="java">javascript </select><br>
<br> Какое время вы готовы на это потратить:<br> <select name="time" size="3"> <option selected value="1">1 месяц 
<option value="2">2 месяца <option value="3">3 месяца </select><br><br> Какие дни недели для занятий вас устроят:
<br> (выбирайте с нажатой клавишей ctrl)<br> <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>

Результат:

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

Обобщающий пример

<html> 
<head> 
<title>Форма регистрации</title> 
</head> 
<body> 
<form name="forma"> 
<table border="0" cellspacing="5" cellpadding="5"> 
<caption>Форма регистрации</caption> 
<tr> 
<td align="right" valign="top">Ваше имя</td> 
<td><input type="text" name="name" size="25"></td> 
</tr> 
<tr> 
<td align="right" valign="top">Ваш e-mail</td> 
<td><input type="text" name="e-mail" size="25"></td> 
</tr> 
<tr> 
<td align="right" valign="top" >Пароль</td> 
<td> <input type="password" name="password" size="25"> </td> 
</tr> 
<tr> 
<td align="right" valign="top" >Повторите пароля</td> 
<td> <input type="password" name="password2" size="25"> </td> 
</tr> 
<tr> 
<td align="right" valign="top" >Укажите свой пол</td> 
<td> <input type="radio" name="sex" value="man" checked> мужской <input type="radio" name="sex" value="woman"> женский </td> 
</tr> 
<tr> 
<td align="right" valign="top">Ваши Хобби</td> 
<td><select name="hobby" size="7" multiple> 
<option selected value="1">компы </option>
<option value="2">футбол</option>
<option value="3">рыбки</option>
<option value="4">покемоны</option>
<option value="5">мотоциклы</option>
<option value="6">цветы</option>
<option value="7">женщины</option>
</select> </td> 
</tr> 
<tr> 
<td align="right" valign="top">Ваши предложения</td> 
<td> <textarea cols="30" rows="3" wrap="physical"> </textarea> </td> 
</tr> 
<tr> 
<td align="right" colspan="2"> <input type="submit" name="submit" value="Отправить"> <input type="reset" name="reset" value="Очистить"> </td> 
</tr> 
</table> 
</form> 
</body> 
</html>

Результат:

Форма регистрации
Имя
e-mail
Пароль
Повтор пароля
Пол мужской женский
Увлечения
Ваши пожелания

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

70 + = 71

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: