ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Улучшение веб-форм. Структура форм

Формы

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

Структура форм

Язык HTML предлагает разнообразные НТМL-элементы для по­строения веб-форм. Наиболее важен элемент fоrm, определяющий начало (открывающий тег <form>) и конец (закрывающий тег </ form>) формы. Он также указывает на метод, который форма использует для передачи данных ( отправка (post) или получение (get)), и определяет, в какое место должны быть отправлены данные формы.

Вы создаете элементы формы - кнопки, текстовые поля и раскрывающиеся списки - с помощью элементов input, textarea и select, со­ответственно. Большинство элементов форм используют НТМL-элемент input. Например, текстовые поля, поля для ввода пароля, переключатели, флажки и кнопки подтверждения используют один и тот же элемент input. Вы указываете, к какому элементу формы относится input, используя атрибут type. Например, вы создаете текстовое поле с помощью элемента input и присваиваете атрибуту type значение text:

<input name="user" type="text">

Код самой формы представлен ниже:

        <form action="#" method="post" name="signup"  id="signup">
<fieldset class="w3-card-4">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Форма для ввода учетных данных</legend>
<label for="user name">Имя</label><br>
<input name="name" type="text" id="username"/><br>
<label for="surname">Фамилия</label><br>
<input name="surname" type="text" id="surname" /><br><br>
<label for="trade">Специальность</label><br>
<select name="trade" id="trade">
<option>Веб-программист</option>
<option>Веб-дизайтер</option>
<option>IT-специалист</option>
<option>Хакер</option>
</select><br><br>
<div><span>Хобби:</span>
<label for="tourism">Туризм</label>
<input type="checkbox" id="tourism" value="tourism">
<label for="chess">Шахматы</label>
<input type="checkbox" id="chess" value="chess">
<label for="heliskiing">Горные лыжи</label>
<input type="checkbox" id="heliskiing" value="heliskiing">
</div>
<label for="his">
<input type="radio" name="loc" id="his" value="yes"> Я использую свой компьютер
</label><br />
<label for="overall">
<input type="radio" name="loc" id="overall" checked="checked" >
Я использую общий компьютер
</label><br /><br />
<input type="submit" name="submit" id="submit" value="Отправить" ><br><br>
</fieldset>
</form>

Выбор элементов формы

Прежде чем начать работу с элементами страницы, следует сначала их выбрать. Например, для определения значения, хранящегося в элементе формы, вы должны выбрать его. Подобным образом, если вы хотите скрыть или показать элементы формы, вы должны использовать кoд JavaScript для идентификации данных элементов.

Как вы знаете, библиотека jQuery может использовать практически любой селектор CSS для выбора элементов страницы. Простейшим способом выбора элемента формы является присвоение ему идентификатора:

<input narne="user" type="text" id-"user">

Затем использовать функцию выбора jQuery:

var userField = $('#user');

Выбрав элемент формы, мы можем его использовать. Например, вы хотите определить значение, введенное посетителем в элемент формы. Если он имеет идентификатор user, вы можете использовать jQuery для доступа к значению элемента формы:

var fieldValue = $('#user') .val();

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

Мы могли бы использовать селектор атрибута CSS следующим образом:

$('input[type="radio"]')

Однако библиотека jQuery предусматривает более простой способ выбора конкретных типов элементов формы. Используя один из селекторов jQuery, мы легко можем идентифицировать все элементы определенного типа и работать с ними. Например, после заполнения посетителем формы вам нужно проверить, во все ли поля введено значение. Вам необходимо выбрать все текстовые поля, а затем проверить каждое на наличие значения. Библиотека jQuery позволяет выполнить данное действие таким образом:

$(":text");

Затем мы просто прорабатываем результаты с помощью функции .each().

Мы можем комбинировать селекторы формы с другими селекторами. Например, у нас на странице есть две формы, и мы хотим выбрать текстовые поля только в одной из них.

Исходя из того что форма с полями, которые нам нужны, имеет идентификатор signuр, вы можете выбрать поля только данной формы следующим образом:

$("signup :text");

Кроме того, библиотека jQuery предлагает весьма полезные фильтры, которые отбирают элементы формы, соответствующие определенному состоянию.

  1. :checked выбирает все отмеченные или установленные элементы формы, то есть флажки и переключатели. Например, если вам нуж­но найти все элементы такого рода, используйте следующий код:
  2. Этот фильтр можно применять для выяснения того, какой переклчатель внутри группы был отмечен. Например, у вас есть группа пере­ключателей ("Выберите способ доставки") с различными значениями (например, "Почта", "Курьер" и "Самовывоз"), и мы хотим найти значение переключателя, которое выбрал ваш посетитель. Данная группа использует один и тот же НТМL-атрибут name; допустим, ваша группа переключателей использует для этого атрибута имя shipping. Применение селектора атрибутаjQuеrу в сочетании с фильтром : checked позволяет найти значение отмеченного переключателя:

    var checkedValue = $('input[name="shipping"]:checked') .val();

    Селектор $('input [name="shipping"]') выбирает все элементы ввода с именем shipping, но после добавления части : checked - $('input [name=" shipping"]:checked') - только отмеченные элементы. Функция val() возвращает значение, хранящееся в отмеченном элементе, например "Почта".

  3. :selected выбирает все отмеченные элементы option внутри списка или меню, позволяя нам узнать, какой выбор сделал посетитель (элемент select). Например, у нас есть элемент select с идентификатором region, в котором перечислены все области России. Для выяснения того, какую область выбрал наш посетитель, напишим следующее: var selectedRegion=$('#region :selected') .val();

В отличие от примера с фильтром :checked, между идентификатором и фильтром есть пробел ('#region : selected'). Это объясняется тем, что этот фильтр выбирает элементы option, а не select. Говоря проще, данный выбор jQuery означает: "Найди все вы­бранные варианты, находящиеся внутри элемента select и имеющие идентификатор region". Пробел уподобляет работу данного метода действию дочернего селектора CSS: сначала он находит элемент с нужным идентификатором, а затем внутри него ищет все выбранные элементы.

Получение и установка значений элементов формы

Иногда возникает необходимость проверить значение элемента формы. Например, мы хотим убедиться, что электронный адрес посетителя введен в соответствующее поле. Или вам нужно знать значение поля для подсчета общей стоимости заказа. С другой стороны, вам может понадобиться задать значение элемента формы. Скажем, у вас есть форма, запрашивающая информацию как по платежу, так и по доставке заказа. Было бы полезно с помощью флажка "Аналогично информации по платежу" предоставить вашим клиентам возможность заполнять элементы формы для сведений о доставке автоматически на основе данных, взятых из элементов, содержащих платежную информацию.

Библиотека jQuery предлагает простую функцию для выполнения обеих задач. Функция vа1() может как задавать, так и считывать значения элементов формы. Если вы вызываете ее без передачи аргументов, она будет считывать значения; при передаче функции значения она введет его в элемент формы. Например, у вас есть поле для ввода электронного адреса клиента с идентификатором email. Его значение можно выяснить, введя следующий код:

var fieldValue = $('#email').val();

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


$(document).ready(function(e) {
$("#signup").submit(function(event) {
var initCost = 12.3;
var amount = $("#quantity").val();
var total = amount*initCost;
total = total.toFixed(2);
$("#total").val(total);
});
});
<!DOCTYPE html>
<html>
<title>Получение и установка значений элементов формы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link href="../../css/w3.css" rel="stylesheet" type="text/css">
<style>
input[type="text"]{width:60px; clear:left; float:left; margin:-20px 0 0 100px}
label{ clear:left; margin-top:20px}
#submit{margin:30px 0 0 -50px; float:left}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$("#signup").submit(function(event) {
var initCost = 12.3;
var amount = $("#quantity").val();
var total = amount*initCost;
total = total.toFixed(2);
$("#total").val(total);
});
});
</script>
<body class="w3-light-grey">
<div class="w3-content w3-layout-container" >
<div class="w3-twothird w3-col s10" style="margin:0 10%">
<div class="w3-container w3-card-2 w3-white w3-margin-bottom" style="height:550px" >
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-indent fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Расчет стоимости заказа</h2>

<form action="#" method="post" name="signup" id="signup" class="w3-form">
<fieldset class=" w3-card-4" style="min-height:300px">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Расчет стоимости заказа</legend>
<label for="quantity" class="w3-left">Количество:</label>
<input type="text" name="quantity" id="quantity" >
<label for="price" class="w3-left">Цена:</label>
<input type="text" value="12.30" id="price" >
<label for="total" class="w3-left">Итого:</label>
<input type="text" name="total" id="total" value="<?php echo $_POST['total'];?> ">
<input type="submit" name="submit" id="submit" value="Отправить" >
</fieldset>
</form>
</div>
<div style=" clear:both"></div>
<footer class="w3-container w3-teal w3-center w3-margin-top " style="height:80px; padding-top:20px;">
<i class="fa fa-facebook-official w3-hover-text-indigo w3-large"></i>
<i class="fa fa-instagram w3-hover-text-purple w3-large"></i>
<i class="fa fa-snapchat w3-hover-text-yellow w3-large"></i>
<i class="fa fa-pinterest-p w3-hover-text-red w3-large"></i>
<i class="fa fa-twitter w3-hover-text-light-blue w3-large"></i>
<i class="fa fa-linkedin w3-hover-text-indigo w3-large"></i>
</footer>
</div>
</body>
</html>

Строка

var initCost = 12.3;
создает переменную, которая хранит значение цены товара. Строка
var amount = $("#quantity").val();
создает еще одну переменную и извлекает значение, введенное посетителем в поле с идентификатором quantity, соответствующее количеству заказанного товара. Строка
var total = amount*initCost;
определяет общую стоимость, полученную путем умножения цены на количество, а строка
total = total.toFixed(2);
форматирует результат, включая в него два знака после запятой .Наконец, строка
$("#total").val(total);
вводит итоговое значение в поле с идентификатором total.

Метод toFixed(x) преобразует число путем добавления или удаления желаемого количества знаков после запятой. Где x - является не обязательным параметром. Целое число обозначающее количество знаков после запятой. По умолчанию имеет значение 0 т.е. нет знаков после запятой.