1. Главная страница » Уроки HTML » HTML формы для сайта

HTML формы для сайта

Автор: | 22.05.2013

Здравствуйте друзья! Здесь я собрал все существующие на сегодняшний день формы для html.

Для чего нужны формы? Формы необходимы для передачи данных, вводимые пользователем, с одной страницы на другую или с определённого места страницы, обработки этих данных и вывода на этой же странице.

Итак, давайте перейдём к практике:

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

<form action=’#vivod_rezulitatamethod=’post>
<input type=’submit’ name=’otpraviti_dannie’ value=’Отправить’>
</form>

Выводит на экран:

За поле формы отвечает тэг <form>, а он в свою очередь имеет ряд обязательных атрибутов, таких как путь (куда отправлять данные) и метод (каким образом они будут переданы).

Action – (Путь) указывает, куда будут отправлены данные (вместе с нами) то есть после нажатие на кнопку нас перебросят по указанному адресу, в нашем примере мы отправим их на эту же страницу, а конкретней к «диву», в котором будем выводить результат обработки.

Method – (Метод) указываем метод передачи данных. Метод «GET» позволяет отправлять короткий текст в открытом виде (он виден в адресной строке браузера), метод «POST» отправляет большой объём данных в закрытом виде. Лично я всегда пользуюсь методом «POST».

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

Ниже, я приведу пример всех типов полей для ввода информации, а также код обработки полученных данных (обрабатываются с помощью php) и примеры кнопок для отправки данных веб-форм.

Типы полей для ввода данных:

<textarea> — Это поле для ввода многострочной текстовой информации:

<form action=’#vivod_rezulitata_1‘ method=’post’>
<textarea name=’text_1rows=’5style=’width=»99%»;>
текст
</textarea>
<input type=’submit’ name=’otpraviti_dannie_1‘ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<input type=’textname=’text_2style=’width=»99%»;>
<input type=’submit’ name=’otpraviti_dannie_2′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<input type=’passwordname=’paroli_3style=’width=»99%»;>
<input type=’submit’ name=’otpraviti_dannie_3′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<select name=’vibor_4style=’width=»99%»;>
<option value=’Строка 1′>Строка 1</option>
<option value=’Строка 2′>Строка 2</option>
<option value=’Строка 3′>Строка 3</option>
<option value=’Строка 4′>Строка 4</option>
<option value=’Строка 5′>Строка 5</option>
</select>
<input type=’submit’ name=’otpraviti_dannie_4′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<select multiple name=’vibor_5[]style=’width=»99%»;>
<option value=’Строка 1′>Строка 1</option>
<option value=’Строка 2′>Строка 2</option>
<option value=’Строка 3′>Строка 3</option>
<option value=’Строка 4′>Строка 4</option>
<option value=’Строка 5′>Строка 5</option>
</select>
<input type=’submit’ name=’otpraviti_dannie_5′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<label>
<input typecheckbox» valuehtml!» namevibor_1«> html
</label><br/>
<label>
<input typecheckbox» valuecss!» namevibor_2» checked> css
</label><br/>

<input typecheckbox» valuephp!» namevibor_3«> php <br/>

<label>
<input typecheckbox» valuejava!» namevibor_4«> java
</label><br/>
<input type=’submit’ name=’otpraviti_dannie_6′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<label>
<input typeradio» valuehtml!» namevibor«> html
</label><br/>
<label>
<input typeradio» valuecss!» namevibor» checked> css
</label><br/>

<input typeradio» valuephp!» namevibor«> php <br/>

<label>
<input typeradio» valuejava!» namevibor«> java
</label><br/>
<input type=’submit’ name=’otpraviti_dannie_7′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<input typefile» nameimage» enctypemultipart/form-data«>
<input type=’submit’ name=’otpraviti_dannie_8′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<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’>
<input typehidden» namepole» value12345«>
<input type=’submit’ name=’otpraviti_dannie_9′ value=’Отправить’>
</form>

Пхп скрипт обработчик и блок вывода результата:

<div id='vivod_rezulitata_9'>
<?php if (isset($_POST['otpraviti_dannie_9']) == "Отправить")
{$pole = $_POST['pole']; echo "Скрытое значение: $pole";}?>
</div>
Можно протестировать форму:

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

Примеры кнопок для отправки данных веб-форм:

button — Обычная кнопка:

<input typebutton» valueкнопка (button)» nameimya«>

submit — Кнопка для отправки данных формы на сервер (в скрипт обработчик):

<input typesubmit» valueкнопка (submit)» nameimya«>

reset — Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние:

<input typereset» valueкнопка (reset)» nameimya«>

image — Поле с изображением, при нажатии на которое, данные будут отправлены в скрипт обработчик:

<input typeimage» width100» height25» border0» srcimya.jpg» nameimya«>

Кнопка оформлена css стилем:

<input typesubmit» valueкнопка (submit) + style» nameimya«style
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
font-weight: bold;
line-height: 1;
color: white;
cursor:pointer;
text-shadow: 0 -1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
-o-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52A8E8), to(#377AD0));
background-image: -moz-linear-gradient(0% 100% 90deg, #377AD0, #52A8E8);
background-color: #52A8E8;
border: 1px solid #20559A;
«>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code