Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
В этом сезоне среди программистов популярны красные рубашки под цвет глаз.

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Определение программиста:
живой организм, превращающий кофеин и пиццу в программное обеспечение.

  Моя группа в контакте:



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

Здравствуйте друзья! Здесь я собрал все существующие на сегодняшний день формы для 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'>
<textarea name='text_1' rows='5' style='width:400px;'>
текст
</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='text' name='text_2' style='width:250px;'>
<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='password' name='paroli_3' style='width:250px;'>
<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_4' style='width:250px;'>
<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:250px;'>
<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 type="checkbox" value="html!" name="vibor_1"> html
</label><br/>
<label>
<input type="checkbox" value="css!" name="vibor_2" checked> css
</label><br/>

<input type="checkbox" value="php!" name="vibor_3"> php <br/>

<label>
<input type="checkbox" value="java!" name="vibor_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>
Можно протестировать форму:


php

radio - Это переключатели, которые используют, когда следует выбрать один вариант из нескольких предложенных:

<form action='#vivod_rezulitata_7' method='post'>
<label>
<input type="radio" value="html!" name="vibor"> html
</label><br/>
<label>
<input type="radio" value="css!" name="vibor" checked> css
</label><br/>

<input type="radio" value="php!" name="vibor"> php <br/>

<label>
<input type="radio" value="java!" name="vibor"> 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>
Можно протестировать форму:


php

file - Это поле для выбора и отправки файлов:

<form action='#vivod_rezulitata_8' method='post'>
<input type="file" name="image" enctype="multipart/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 type="hidden" name="pole" value="12345">
<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 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="
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;
">

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь