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

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

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

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

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

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

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

Усовершенствование форм

Неактивное состояние

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

Фокусировка на первом элементе формы

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

Секрет заключается в фокусировке, являющейся не просто событием, на которое код JavaScript может отреагировать, но и командой, которую мы можем отдать, чтобы поместить текстовый курсор в текстовое поле. Мы просто выбираем текстовое поле, после чего выполняем функцию focus(). Предположим, мы хотим, чтобы при загрузке страницы текстовый курсор был помещен в поле ввода имени. Если мы посмотрим на НТМL-код этой формы , то увидим, что это поле имеет идентификатор username. Чтобы с помощью кoдa javaScript поместить текстовый курсор в это поле, напишим следующее:

$(document).ready(function(){    
$("#username").focus(function(e) {
    
});
});

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

$(document).ready(function(){    
$(":text:first").focus(function(e) {
    
});
});

Добавляя к селектору фрагмент кода :first, мы можем выбрать первый экземпляр данного элемента, так что селектор jQuery $(":text:first") выбирает первое текстовое поле на странице. Добавление части .focus () устанавливает текстовый курсор в данное поле, которое терпеливо ожидает ввода данных со стороны посетителя.

Если на веб-странице не одна форма, то код примет следующий вид:

$(document).ready(function(){    
$("#signup :text:first").focus(function(e) {
    
});
});

Отключение и включение элементов формы

Чтобы "Отключить" элемент формы, не предназначенный для заполнения, мы можем деактивировать его с помощью кoдa JavaScript. Деактивация означает, что возле пункта не может быть установлен флажок или переключатель, в текстовые поля нельзя ввести текст, в раскрывающемся списке - выбрать пункт, нельзя также нажать кнопку подтверждения.

Чтобы отключить элемент формы, зададим для атрибута disabled значение true. Например, для отключения всех полей ввода формы можно использовать следующий код:

$(":input").prop("disabled", true);

Разумеется, отключая элемент формы, мы можем в дальнейшем захотеть вновь включить его. Для этого присвоим атрибуту disabled значение false. Например, для активации всех элементов формы используйте код:

$(":input").prop("disabled", false);

Предотвращение многократной отправки формы

Зачастую имеет место задержка по времени от момента, когда посетитель нажал кнопку отправки до появления сообщения "Ваша информация получена". Иногда такая задержка бывает достаточно долгой, чтобы нетерпеливые веб-серферы нажали кнопку отправки еще (и еще, и еще) раз, решив, что в первый раз система не сработала.

Это приводит к тому, что одна и та же информация может быть от­правлена несколько раз. А в случае с онлайновыми продажами это означает, что вы несколько раз расплатитесь с помощью своей кредитной карты! К счастью, язык JavaScript предоставляет легкий способ деактивировать кнопку подтверждения, как только начался процесс отправки. С помощью атрибута disabled вы можете сделать так, чтобы эта кнопка больше не нажималась.

Исходя из того что форма имеет идентификатор formID, а кнопка передачи - идентификатор submit, сначала добавьте в форму функцию submit(), а затем внутри функции отключите кнопку передачи:

$("#formID").submit(function(e) {
  $("#submit").prop("disabled", true);
})

Если на странице присутствует только одна форма, то вам даже не нужно использовать идентификаторы для элементов:

$("form").submit(function(e) {
  $("input[type=submit]").prop("disabled", true);
})

Кроме того, разрешается изменять сообщение на кнопке передачи. Например, сначала кнопка называется «Передать», а после начала передачи она же гласит "Информация отправляется". Сделать это можно следующим образом:


$(document).ready(function(){
$("#formID").submit(function(e) {
var subButton = $(this).find(':submit');
subButton.prop("disabled", true);
subButton.val("Информация отправляется");
});
})
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#formID").submit(function(e) {
var subButton = $(this).find(':submit');
subButton.prop("disabled", true);
subButton.val("Информация отправляется");
});
});
</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="formID" id="formID">
<fieldset class="w3-card-4">
<legend class="w3-card-2 w3-large" style="padding:0 5px">Форма для ввода учетных данных</legend>
<label for="username">Имя</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>
</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>