Здравствуйте друзья! Здесь я собрал все существующие на сегодняшний день формы для html.
Для чего нужны формы? Формы необходимы для передачи данных, вводимые пользователем, с одной страницы на другую или с определённого места страницы, обработки этих данных и вывода на этой же странице.
Итак, давайте перейдём к практике:
В первую очередь необходимо обозначить поле (контейнер), в котором будем принимать данные от пользователя и по нажатию кнопки отправлять в указанное место.
| <form action=’#vivod_rezulitata‘ method=’post‘> <input type=’submit’ name=’otpraviti_dannie’ value=’Отправить’> </form> |
Выводит на экран:
За поле формы отвечает тэг <form>, а он в свою очередь имеет ряд обязательных атрибутов, таких как путь (куда отправлять данные) и метод (каким образом они будут переданы).
Action – (Путь) указывает, куда будут отправлены данные (вместе с нами) то есть после нажатие на кнопку нас перебросят по указанному адресу, в нашем примере мы отправим их на эту же страницу, а конкретней к «диву», в котором будем выводить результат обработки.
Method – (Метод) указываем метод передачи данных. Метод «GET» позволяет отправлять короткий текст в открытом виде (он виден в адресной строке браузера), метод «POST» отправляет большой объём данных в закрытом виде. Лично я всегда пользуюсь методом «POST».
В эту форму также необходимо вставить кнопку, по нажатию которой все данные вводимые пользователем отправятся в скрипт обработчик или напрямую в блок вывода на странице.
Ниже, я приведу пример всех типов полей для ввода информации, а также код обработки полученных данных (обрабатываются с помощью php) и примеры кнопок для отправки данных веб-форм.
Содержание
Типы полей для ввода данных:
| <textarea> — Это поле для ввода многострочной текстовой информации: <form action=’#vivod_rezulitata_1‘ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_1'>
<?php if (isset($_POST['otpraviti_dannie_1']) == "Отправить")
{$text1 = $_POST['text_1']; echo "Вы ввели: $text1";} ?>
</div> |
| Можно протестировать форму: |
| Это однострочное поле для ввода небольшого текста: <form action=’#vivod_rezulitata_2′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_2'>
<?php if (isset($_POST['otpraviti_dannie_2']) == "Отправить")
{$text2 = $_POST['text_2']; echo "Вы ввели: $text2";} ?>
</div> |
| Можно протестировать форму: |
| Это однострочное текстовое поле, в котором вводимые символы закрываются чёрными точками: <form action=’#vivod_rezulitata_3′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_3'>
<?php if (isset($_POST['otpraviti_dannie_3']) == "Отправить")
{$paroli_3 = $_POST['paroli_3'];echo "Вы ввели: $paroli_3";}?>
</div> |
| Можно протестировать форму: |
| <select> — Это поле, с выпадающим списком, из которого можно выбрать лишь один пункт: <form action=’#vivod_rezulitata_4′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_4'>
<?php if (isset($_POST['otpraviti_dannie_4']) == "Отправить")
{$vibor_4 = $_POST['vibor_4'];echo "Вы выбрали: $vibor_4";}?>
</div> |
| Можно протестировать форму: |
| <select multiple> — Это поле, со списком, из которого можно выбрать несколько пунктов используя клавиши Ctrl или Shift: <form action=’#vivod_rezulitata_5′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_5'>
<?php if (isset($_POST['otpraviti_dannie_5']) == "Отправить")
{$vibor_5 = $_POST['vibor_5'];
foreach($vibor_5 as $v1=>$z1){echo "Вы выбрали: $v1. $z1";}}?>
</div> |
| Можно протестировать форму: |
| checkbox — Это флажки, которые используют, когда необходимо выбрать больше одного варианта из предложенных: <form action=’#vivod_rezulitata_6′ method=’post’> <input type=»checkbox» value=»php!» name=»vibor_3«> php <br/> <label> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_6'>
<?php if (isset($_POST['otpraviti_dannie_6']) == "Отправить")
{$vibor_1 = $_POST['vibor_1'];$vibor_2 = $_POST['vibor_2'];
$vibor_3 = $_POST['vibor_3'];$vibor_4 = $_POST['vibor_4'];
{echo "Вы выбрали: $vibor_1; $vibor_2; $vibor_3; $vibor_4";}
}?>
</div> |
| Можно протестировать форму: |
| radio — Это переключатели, которые используют, когда следует выбрать один вариант из нескольких предложенных: <form action=’#vivod_rezulitata_7′ method=’post’> <input type=»radio» value=»php!» name=»vibor«> php <br/> <label> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_7'>
<?php if (isset($_POST['otpraviti_dannie_7']) == "Отправить")
{$vibor = $_POST['vibor']; echo "Вы выбрали: $vibor";}?>
</div> |
| Можно протестировать форму: |
| file — Это поле для выбора и отправки файлов: <form action=’#vivod_rezulitata_8′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_8'>
<?php if (isset($_POST['otpraviti_dannie_8']) == "Отправить")
{if( !empty( $_FILES['image']['name'] ) ) {
echo "Получен файл: ".$_FILES['image']['name'];}}?>
</div> |
| Можно протестировать форму: |
| hidden — Это скрытое поле, которое содержит введённое вами значение: <form action=’#vivod_rezulitata_9′ method=’post’> Пхп скрипт обработчик и блок вывода результата: <div id='vivod_rezulitata_9'>
<?php if (isset($_POST['otpraviti_dannie_9']) == "Отправить")
{$pole = $_POST['pole']; echo "Скрытое значение: $pole";}?>
</div> |
| Можно протестировать форму: |
В одну форму можно вставить любое количество полей для ввода данных. Главное помнить, что имена у них должны быть уникальными (разные).
Примеры кнопок для отправки данных веб-форм:
| button — Обычная кнопка: <input type=»button» value=»кнопка (button)» name=»imya«> |
| submit — Кнопка для отправки данных формы на сервер (в скрипт обработчик): <input type=»submit» value=»кнопка (submit)» name=»imya«> |
| reset — Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние: <input type=»reset» value=»кнопка (reset)» name=»imya«> |
| image — Поле с изображением, при нажатии на которое, данные будут отправлены в скрипт обработчик: <input type=»image» width=»100» height=»25» border=»0» src=»imya.jpg» name=»imya«> |
| Кнопка оформлена css стилем: <input type=»submit» value=»кнопка (submit) + style» name=»imya«style=» |
