Сделать кнопку неактивной jquery. JavaScript – Как делать активной и неактивной кнопку в зависимости от условий. Зачем нужно делать кнопки неактивными

Каждый HTML-документ в Интернете состоит из различных элементов. Многие из них достаточно распространены и встречаются почти на каждом сайте. Например, контент страницы обычно поделен на параграфы, в нем присутствуют заголовки, изображения и ссылки. Но, несмотря на то что эти элементы являются общими, их присутствие в коде необязательно. Нет технической необходимости в них на веб-странице. Тем не менее редко можно встретить сайт без этих тегов.

Назначение тега

Существуют элементы, которые обязательно должны присутствовать в коде. Технически есть только один тег, который должен присутствовать в верхней части всех документов, написанных на языке HTML - -тег. Он позволяет браузеру понять, где начинается и заканчивается страница. Между открывающим и закрывающим тегом помещается все содержимое HTML-страницы. Перед ним располагается только doctype. Большинство других технически важных элементов - внутри тега , который располагается внутри и находится в самом начале кода. Он и тег являются его потомками.

Что содержится в

Элемент является контейнером для других элементов. В нем содержатся общие сведения (метаданные) о документе, включая его название, ссылки на скрипты и таблицы стилей. Метаданные предоставляют о документе, такую как название, описание, ключевые слова. Там же, где тег , располагается , где помещается контент сайта. Метаданные скрыты от посетителей, но используются оптимизаторами для раскрутки страницы. Они и теги heading (-) очень полезны, поскольку передают информацию веб-браузеру, а также поисковым системам об этой странице.

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

Какие элементы могут присутствовать в

Следующие элементы могут находиться внутри этого тега: (этот элемент является обязательным для документ HTML), , , , , .

В теге можно:

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

Синтаксис и атрибуты

Тег - парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как . Что должны иметь большинство HTML-документов? Это тег в . Единственное исключение: если документ — это srcdoc, или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня. Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.

Тег и его особенности

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

Он отображает название сайта.

Используется как основное средство для каталогизации. Если веб-страница не имеет названия, где описывается ее содержимое, поисковые системы дают ей более низкий рейтинг.

Также содержимое отображается как текстовая ссылка на странице выдачи, известной как SERP.

Он отображается в верхней части окна браузера. Или на вкладке, описывающей страницу в браузере.

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

Если этот тег не используется, то на сайте будет отображаться "Untitled Document". Он является заголовком страницы по умолчанию. Такой заголовок используется на многих программных платформах веб-разработки.

Поскольку тег предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице. Считается, что оптимальное содержание этого тега не должно превышать 60 символов. Можно добавить больше, но поисковые системы будут отсекать содержимое, если оно превышает это число.

Метаданные в

Тег определяет раздел, в котором находится техническая информация HTML-документа. Метаданные содержат дополнительную информацию о веб-странице в браузере. В них можно включать информацию, такую как имя автора, программа, которая была использована для создания страницы, и ключевые слова. Наиболее важный мета-тег, который должен быть в коде страницы, — это кодировка. Мета-теги очень важны для получения хорошего рейтинга в поисковых системах. Поэтому важно создавать качественные заголовки и описания страниц.

Другие важные теги

В теге могут присутствовать и другие элементы. Например, используется для добавления внутренних стилей и изменения оформления документа. Однако рекомендуется в подключать внешние стили — это гораздо лучше, чтобы отделить контент от его оформления. Сделать это можно при помощи тега . Добавить внешнюю таблицу стилей можно при помощи следующего кода: . Для этого тега обязателен атрибут href, в котором указывается ссылка на файл со стилями CSS, а также rel, где прописывается, что это именно стили. Существуют и другие варианты использования тега , например, для создания фавикона — значка для веб-страницы, который отображается в поисковой выдаче. Атрибут rel также используется по-разному и часто применяется при создании мобильных приложений.

Если добавить несколько элементов и в документ, они будут применяться в порядке следования. Потому важно убедиться, что они следуют друг за другом в правильном порядке, чтобы избежать неожиданностей. В языке HTML -элемент используется для добавления в текущий документ внешнего ресурса и наиболее часто применяется для ссылки на стили. В теге также могут подключаться скрипты. Тег позволяет добавить JavaScript на сайт, но вставлять его рекомендуется незадолго до закрытия . Тогда сначала будет загружаться все содержимое, а затем обрабатываться JavaScript. Это поможет увеличить скорость загрузки страницы и исключит возможность просмотра пользователем пустого экрана, пока подключается скрипт.

Видно, что она состоит из трех основных секций.

• – корень любого HTML документа, в котором располагаются все остальные секции (данный тег должен быть в единственном экземпляре, и должен присутствовать на каждой странице).
• – заголовок в котором прописывается служебная информация и инструкции браузеру, по отображению контента.
• – основная секция в которой находится контент, то есть вся полезная информация (текст, картинки, видео). Помимо контента, в этой секции расположена сетка сайта, либо его макет – описано местоположения основных разделов сайта, таких как: шапка, подвал, главное меню, боковые колонки, и т.д.

Тег ничем особым не отличается, кроме того, что это есть корневой элемент – контейнер для всех остальных блоков. Поэтому приступим к более детальному рассмотрению секции .

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

Заголовок, будет выведен в строке заголовка браузера

Данный тег является единым обязательном тегом в секции .

Кроме тега , в этой секции можно размещать следующие теги: , , , .

Тег

Этот тег указывает браузеру где находятся некие внешние ресурсы, например, внешние стили (CSS). Также при помощи тега и указания соответствующего атрибута rel , можно указать адрес канала RSS, фавиконку для сайта, и другие внешние ресурсы.

Тег

Это универсальный тег, который описывает данные. Тег предоставляет метаданные о документе HTML браузеру. Метаданные, не отображаются, а только используются для служебных целей, либо движком браузера, либо поисковыми пауками. Мета элементы, как правило, используется для описания страницы (description ), указания ключевых слов (keywords ), указание автора документа (author ), указания типа контента и его кодировки, и другие метаданные.

Тег

С помощью данного тега, можно указать браузеру, где он должен искать внешние скрипты:

либо же, вставить скрипт прямо в данную секцию:

document.write("Hello World!")

Тег

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

h1 {color: red} p {color: blue}

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

) ставился вопрос о том, что было бы хорошо кнопкам формы, отправляемой на сервер, ставить свойство disabled = "disabled" .

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

Зачем нужно делать кнопки неактивными

Чтобы пользователю стало очевидным, что он уже нажал на кнопку, и что форма отправляется

Чтобы сервер не загружался лишними запросами, и чтобы уменьшить вероятность какой-либо ошибки

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

Понятно также, что лишние запросы можно предотвратить, повесив на форму какой-нибудь class="form_is_loading" , и при всяком сабмите проверять на наличие этого класса. Но зачем делать эти проверки, когда можно обойтись без них, просто сделав кнопку неактивной?

Как делать кнопки неактивными Этот предложенный в вышеупомянутых топиках простой вариант оказывается недостаточным и неработоспособным.

Почему недостаточно просто делать нажатую кнопку неактивной:

Submit формы может произойти и по нажатию на Enter. Поэтому обработку кнопок надо вешать на событие onsubmit самой формы. К тому же, у формы может быть несколько кнопок, и было бы логичным делать их все неактивными, а не только ту кнопку, которую нажали.

Если после сабмита формы вновь вернуться на страницу с формой (по кнопке «Назад» в браузере), то сработает кеширование: мы столкнемся с неактивными кнопками и не сможем отправить форму еще раз - без принудительной перезагрузки страницы с потерей всех заполненных ранее полей (Возврат к поисковой форме со страницы результатов поиска тут живейший пример).

Если у формы несколько кнопок (например, «Опубликовать» и «Отмена»), то мы не сможем передать серверу, какая именно кнопка была нажата: неактивная кнопка не передает свое имя и значение - даже если мы делаем ее неактивной по событию onsubmit

Итак, сценарий создания неактивных кнопок

Вкратце сценарий таков.

Кнопки делаем неактивными по событию onsubmit формы

Кнопки возвращаем в активное состояние до ухода со страницы по событию window.onunload

Каждая кнопка формы по событию onclick должна создавать одноименное hidden поле, через которое передаст свое значение серверу

А далее следует более развернутый сценарий с макетом кода.

//// html файл ////////////////////////////////////////////////////////////////////// formUploader.prepareForm(document.getElementById("the_form")); //// js файл //////////////////////////////////////////////////////////////////////// formUploader = { prepareForm: function(form){ // Каждая значимая кнопка формы при клике должна создать одноименное hidden поле, // чтобы на сервер передалась информация о том, какая кнопка была кликнута var allFormFields = form.getElementsByTagName("input"); for (var i=0; i