Уроки HTML - Формы в HTML

Пятница, 03 Декабря 2010 г. 11:16 + в цитатник

HTML теги, определяющие HTML формы

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

Пример HTML формы | Вход в систему

Пример HTML формы | Комментарии на сайте

Пример HTML формы | Выпадающий список

Пример HTML формы | Список с полосой прокрутки

Пример HTML формы | Переключатели, кнопки

Пример HTML формы | Радиобутоны, прикрепить файл

Пример HTML формы | fieldset

Пример HTML формы | Вход в систему

Код:

                  <title>Один из возможных вариантов HTML формы</title>


            </head>


            <body>


            <form  name="f1" method="get" action="enter_data.php">


            <input name="link" type="hidden" value="index.php" />


            Логин: <br />


            <input name="login" type="text" size="25" maxlength="30" value="vasya" /> <br />


            Пароль: <br />


            <input name="pd" type="password" size="25" maxlength="30" value="" /> <br />


            <input name="remember" type="checkbox" value="yes" />     Запомнить <br />


            <input type="submit" name="enter" value="Вход" />


            </form>


            </body>


            </html>

Теги, атрибуты и значения

<form> </form> – определяют форму.

name="" – определяет имя формы.

method="" – определяет способ отправки данных из формы. Значения: "get" (по умолчанию) и "post". Чаше используется метод "post", так как позволяет передавать большие объемы данных.

action="" – определяет url по которому данные отправляются на обработку. В нашем случае – enter_data.php. Также может быть обозначен адрес электронной почты, например, action="mailto:ab-w.net".

<input /> – определяют такие элементы формы как кнопки, переключатели, текстовые поля для ввода данных.

type="text" – определяет текстовое поле для ввода данных.

type="password" – определяет поле для ввода пароля, при этом текст отображается в виде звездочек или кружочков.

type="checkbox" – определяет переключатель.

type="submit" – определяет кнопку.

type="hidden" – определяет скрытый элемент формы – используется для передачи дополнительной информации на сервер.

size="25" – длина текстового поля в символах.

maxlength="30" – максимально допустимое количество вводимых символов.

value="" – определяет значение, которое будет отправлено на обработку если относится к радиобутонам или переключателям. Значение данного атрибута в составе текстового поля или кнопки будет показано как, например, vasya или Вход в примере выше.

Пример HTML формы | Комментарии на сайте

Код:

                 <title>Пример HTML формы</title>


            </head>


            <body>


            <form action="http://ab-w.net/comments.php" method="post" name="commentform" id="commentform">


            <p><input type="text" name="author" id="author" value="" size="25" />


            <small> Имя</small>


            </p>


            <p><input type="text" name="email" id="email" value="" size="25"  />


            <small> Mail</small>


            </p>


            <p><textarea name="comment" id="comment" cols="48" rows="8"> </textarea>


            </p>


            <p><input name="submit" type="submit" id="submit"  value="Отправить" />


            </p>


            </form>


            </body>


            </html>

Теги, атрибуты и значения

action="http://ab-w.net/comments.php" – определяет url по которому будут отправлены данные из формы.

id="" – определяет имя, идентификатор элемента формы.

name="" – определяет имя элемента формы.

<textarea> </textarea> – определяют текстовое поле в составе формы.

cols="" – определяет количество колонок текстового поля формы.

rows="" – определяет количество рядов текстового поля формы.

Если между <textarea> </textarea> поместить текст, он будет показан внутри поля как пример, который легко удалить.

Пример HTML формы | Выпадающий список

Код:

                   <title>HTML формы</title>


            </head>


            <body>


            <form action="http://ab-w.net/info.php" method="post" name="drop_down_box">


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


            <option value="first">Первая позиция</option>


            <option selected="selected" value="second">Вторая позиция</option>


            <option value="third">Третья позиция</option>


            <option value="fourth">Четвертая позиция</option>


            </select>


            </form>

Теги, атрибуты и значения

<select> </select> – определяют список с позициями для выбора.

size="" – определяeт количество видимых позиций списка. Если значение равно 1, мы имеем дело с выпадающим списком.

<option> </option> – определяют позиции (пункты) списка.

value="" – содержит значение, которое будет отправлено формой по указанному url на обработку.

selected="selected" – выделяет позицию списка в качестве примера.

Пример HTML формы | Список с полосой прокрутки

Увеличив значение атрибута size="", мы получим список с полосой прокрутки:

Код:

                   <title>HTML формы</title>


            </head>


            <body>


            <form action="http://ab-w.net/info.php" method="post" name="drop_down_box">


            <select name="menu"    size="3" multiple="multiple">


            <option value="first">Первая позиция</option>


            <option selected="selected" value="second">Вторая позиция</option>


            <option value="third">Третья позиция</option>


            <option value="fourth">Четвертая позиция</option>


            </select>


            </form>

Для этого варианта применим флажок multiple="multiple", который делает возможным выбор нескольких позиций. Его отсутствие разрешает выбрать только один пункт.

Пример HTML формы | Переключатели, кнопки

Код:

                   <title>HTML формы</title>


            </head>


            <body>


            <form name="travel" action="http://ab-w.net/info.php" method="get">


            <input type="checkbox" name="transport" value="airplane" checked="checked" /> Самолет<br /> 


            <input type="checkbox" name="transport" value="train" /> Поезд<br /> 


            <input type="checkbox" name="transport" value="car" /> Автомобиль<br /> 


            <input type="checkbox" name="transport" value="bus" /> Автобус<br /> 


            <input type="submit" value="OK" />


            <input type="reset" value="Reset" />


            </form>

Атрибуты и значения

value="" – определяет значение, которо будет отправлено формой по указанному url.

checked="checked" – определяет в качестве примера одно из возможных значений.

type="submit" – определяет кнопку.

type="reset" – определяет кнопку сброса.

value="" – определяет надпись на кнопке.

Смотрите дополнительно: тег <input />.

Пример HTML формы | Радиобутоны, прикрепить файл

Код:

                   <title>HTML формы</title>


            </head>


            <body>


            <form name="male_female" action="" method="post">


            Пол:<br />


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


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


            Прикрепить файл:<br />


            <input name="send_f" type="file" size="30" maxlength="60" /> 


            </form>

Пример HTML формы | fieldset

Код:

                  <title>HTML формы</title>


            </head>


            <body>


            <form action="">


            <fieldset>


            <legend>


            Коротко о себе:


            </legend>


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


            <small>Молодой человек</small><br />


            <input type="radio" name="Sex" value="Женский" /> <small>Девушка</small><br />


            <input type="text" size="20" /> <small>Дата рождения</small><br />


            <input type="text" size="20" /> <small>Семейное положение</small><br />


            <input type="text" size="20" /> <small>Социальный статус</small><br />


            <input type="text" size="20" /> <small>Местожительство</small><br />


            <input type="submit" value="Отправить" />


            </fieldset>


            </form>

Чтобы научиться создавать полноценные web-сайты с работающими формами, необходимы знания в области программирования на PHP.

Дополнительно смотрите: обработка HTML формы на PHP

Источник: ab-w.net

Рубрики:

Полезное
Уроки HTML

Метки: html уроки html

Процитировано 1 раз

<a href="https://www.liveinternet.ru/users/mserg112/post142675717/">РЈСЂРѕРєРё HTML - Р¤РѕСЂРјС‹ РІ HTML</a><br/>
HTML С‚РµРіРё, РѕРїСЂРµРґРµР»СЏСЋС‰РёРµ HTML С„РѕСЂРјС‹
HTML   С„РѕСЂРјС‹ РёСЃРїРѕР»СЊР·СѓСЋС‚СЃСЏ РґР»СЏ СЂРµРіРёСЃС‚СЂР°С†РёРё  РїРѕСЃРµС‚РёС‚РµР»РµР№ РЅР° СЃР°Р№С‚Рµ, РґР»СЏ  РёРЅС‚РµСЂР°РєС‚РёРІРЅС‹С… РѕРїСЂРѕСЃРѕРІ Рё РіРѕР»РѕСЃРѕРІР°РЅРёР№,  РїРѕР·РІРѕР»СЏСЋС‚ РѕС‚РїСЂР°РІР»СЏС‚СЊ СЃРѕРѕР±С‰РµРЅРёСЏ, СЃРѕРІРµСЂС€Р°С‚СЊ РїРѕРєСѓРїРєРё Рё С‚Р°Рє РґР°Р»РµРµ.    HTML  Р¤РѕСЂРјР° СЃРѕР·РґР°РµС‚СЃСЏ СЃ РѕРґРЅРѕР№ С†РµР»СЊСЋ: СЃР±РѕСЂ Рё  РїРѕСЃР»РµРґСѓСЋС‰Р°СЏ РїРµСЂРµРґР°С‡Р° РёРЅС„РѕСЂРјР°С†РёРё РЅР° РѕР±СЂР°Р±РѕС‚РєСѓ РїСЂРѕРіСЂР°РјРјРЅРѕРјСѓ СЃС†РµРЅР°СЂРёСЋ РёР»Рё  РїРѕ СЌР»РµРєС‚СЂРѕРЅРЅРѕР№ РїРѕС‡С‚Рµ.
&nbsp;

РџСЂРёРјРµСЂ HTML С„РѕСЂРјС‹ | Р’С…РѕРґ РІ СЃРёСЃС‚РµРјСѓ
    РџСЂРёРјРµСЂ HTML С„РѕСЂРјС‹ | РљРѕРјРјРµРЅС‚Р°СЂРёРё РЅР° СЃР°Р№С‚Рµ
    РџСЂРёРјРµСЂ HTML С„РѕСЂРјС‹ | Р’С‹РїР°РґР°СЋС‰РёР№ СЃРїРёСЃРѕРє
    РџСЂРёРјРµСЂ HTML С„РѕСЂРјС‹ | РЎРїРёСЃРѕРє СЃ РїРѕР»РѕСЃРѕР№ РїСЂРѕРєСЂСѓС‚РєРё
    РџСЂРёРјРµСЂ HTML С„РѕСЂРјС‹ | РџРµСЂРµРєР»СЋС‡Р°С‚РµР»Рё, РєРЅРѕРїРєРё
    РџСЂРёРјРµСЂ... <a href="https://www.liveinternet.ru/users/mserg112/post142675717/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>