Страницы с размещенными на них HTML-формами

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Реферат

Название дисциплины: Web-дизайн

Тема: «Страницы с размещенными на них HTML-формами»

HTML-формы

HTML (HyperText Markup Language) - в переводе означает Язык Разметки ГиперТекста.

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

Тег <form> определяет форму в HTML документе.

Элемент <form> - является контейнером, внутри которого могут размещаются надписи, элементы управления и типы входных элементов, флажки, радио-кнопки, кнопки отправки и прочие HTML элементы.

Задача формы - принять от пользователя входящую информацию и передать её для дальнейшей обработки на стороне сервера.

Элемент имеет следующий синтаксис<form>

элементы формы</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации.

Создание простой формы

Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

(checkbox) Флажок

Флажки checkbox имеет ряд вариантов, можно выбрать нескольких из них. Обычно выглядит как квадратик, в который ставится галочка.

<input type="checkbox" />я принимаю лицензионное соглашение

(radio) Переключатель

Переключатели radio имеет ряд вариантов, нужно выбрать только один из них.

<input type="radio" />я принимаю лицензионное соглашение

<input type="radio" />я не принимаю лицензионное соглашение

(Reset) Кнопка сброса формы

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Пример:

<input type="reset" name="Reset" value="Очистить форму">

(select) Выпадающий список

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Список начинается с парных тегов <select></select>. Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

<select name="Имя списка" size = “Размер” multiple>

<option value=”Значение”>Отображаемый текст в списке</option>

</select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN

(text) Текстовое поле

Позволяет пользователям вводить различную информацию.

<input type="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов">

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Пример:

<input type="text" name="txtName" size="10" maxlength="5" value="Текст по умолчанию">

(password)Поле для ввода пароля

Полностью аналогичен текстовому полю, за исключением того что символы, набираемые пользователем, не будут отображаться на экране.

Пример: <input type="password" name="txtName" size="10" maxlength="5">

(textarea) Многострочное поле ввода текста

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

<textarea name="Имя поля" cols="Ширина поля " rows="Число строк">Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea>. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

Пример:

<textarea name="txtArea" cols="15" rows="10" readonly> Текст, который

изначально будет отображен в многострочном поле ввода и который

нельзя изменять, т.к. указан атрибут readonly </textarea>

Скрытое текстовое поле

Позволяет передавать сценарию определенную служебную информацию, не отображая её на странице.

<input name="Имя" type="Тип" value="Значение">

Скрытое поле начинается с тега <input>, атрибуты которого являются name, type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут valueзадает значение поля.

Пример:

<input name="email" type="hidden" value="spam@nospam.ru">

(submit)Кнопка отправки формы

Служит для отправки формы сценарию.

<input type="Тип" name="Имя кнопки" value="Текст кнопки">

При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit” и value=”Текст кнопки”. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

(browse) Кнопка для загрузки файлов

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов <form></form>. Начинающий тэг <form> содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла - “file”.

<form enctype="multipart/form-data" action="upload.php" method="post">

Загрузить файл: <input name="my_file" type="file">

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

</form>

(fieldset)Рамка

Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend></legend>. Основное назначение объекта - задавание различных стилей оформления.

Пример:

<fieldset>

<legend>Программное обеспечение(заголовок рамки)</legend>

Текст, который будет помещен внутри рамки.</fieldset>

html форма web дизайн

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Пример использования элементов управления внутри формы:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<form>

Имя: <input type = "text" name = "firstname" value = "Введите имя"> <br> <br>

Фамилия: <input type = "text" name = "lastname" value = "Введите фамилию"> <br> <br>

Мужчина <input type = "radio" name = "sex" value = "male" checked>

Женщина <input type = "radio" name = "sex" value = "female"> <br> <br>

О себе: <br>

<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>

<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>

<input type = "checkbox" name = "type3" value = "high">Больше 35<br>

<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>

<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>

<br>

<input type = "submit" name = "submit" value = "отправить">

</form>

</body>

</html>

Что сделали

- Разместили два однострочных текстовых поля (<input type = "text">) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом valueустановили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).

- Разместили две радиокнопки (<input type = "radio">) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.

Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = "checkbox"> и <input type = "radio">, в противном случае он игнорируется.

- Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.

-Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = "submit">). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name) и значение (атрибут value).

Результат нашего примера в браузере:

Список использованных ресурсов

1 Викиверситет

2 Информационный портал

«SoftTime-INFO» http://www.softtime.ru/info/articlephp.php?id_article=96

3 HTML учебник https://basicweb.ru/html/formi.php

Размещено на Allbest.ru