Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:
Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139
Урок №8: создание формы в 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, именно это значение обрабатывает браузер, когда посетитель отправляет содержимое формы. Пример переключателя:
Благодаря параметру checked изначально выбор стоит на "Женский", таким образом можно помечать наиболее вероятные ответы, что упростит пользователям процесс заполнения формы.
Флажки
В отличие от переключателей, флажки дают возможность пользователям выбирать несколько вариантов ответа. Создание флажков аналогично созданию переключателей, используются те же теги и параметры. Единственное что необходимо изменить это значение параметра type с radio на checkbox. Еще одним отличием от переключателей является то, что каждому флажку можно задать свое имя. Примеры флажков:
Какими языками вы владеете?
русский
английский
немецкий
японский
Большие текстовые поля
Большие текстовые поля удобно использовать для почтовых сообщений или в пункте анкеты "О себе". Такие поля создаются с помощью парного тега <textarea>. Данный тег имеет следующие параметры:
name - задает имя большого текстового поля
cols - ширина поля, в значении указывается сколько символов влезет в поле
rows - задает количество строк текста, которые будут видны на экране
wrap - указывает, каким способом будут переносится слова в данном поле, имеет следующие значения:
off - перенос отключен, весь текст будет печататься на одной строке
virtual - перенос виртуально отображается, однако на сервер поступит неделимая строка
physical - перенос осуществляется, как на экране, так и после поступления на сервер
disabled - отключенное поле
readonly - поле предназначено только для чтения
Создадим два текстовых поля с различными параметрами:
Если попробовать ввести в них текст, заметно что первое поле не переносит строку(только при нажатии клавиши "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>, у которого больше возможностей. Вначале рассмотрим первый вариант. Ниже перечислены типы кнопок и их значения:
Кнопка для отправки заполненной формы на сервер:
type="submit" - задает тип этой кнопки
name - задает название данной кнопки
value - задает надпись отображаемую на кнопке
Графическая кнопка для отправки заполненной формы на сервер, необходимо заранее нарисовать или скачать файл такой кнопки
type="image" - задает тип этой кнопки
name - задает название данной кнопки
src - адрес для файла изображения данной кнопки
Кнопка сброса. При ее нажатии вся заполненная формы вернется в исходное положение: содержимое всех полей исчезнет.
type="reset" - задает тип этой кнопки
name - задает название данной кнопки
value - задает надпись отображаемую на кнопке
Произвольная кнопка, ее действия необходимо назначить, также можно использовать в качестве ссылки