Как спрятать кнопку?

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

Инструкция

Используйте свойство display языка описания стилей CSS (Cascading Style Sheets - «каскадные таблицы стилей») для выключения или включения отображения нужных элементов страницы. Этому свойству, согласно международным стандартам, можно присвоить больше полутора десятка значений, задающих разные способы отображения. Однако кроссбраузерными (т.е. работающими во всех основных браузерах) являются только четыре. Среди этой четверки есть и нужное вам значение none, которое позволяет скрыть нужный элемент страницы.

Составьте необходимый набор CSS-инструкций. В самом простом виде он может выглядеть так:button {display: none;}В таком варианте в странице не будут отображаться все кнопки, использующие тег ....

Добавьте в инструкции указание на имя класса, если надо скрыть только одну кнопку либо определенную группу кнопок. Например, назовите такой класс HideBtns и добавьте это имя в CSS-инструкцию:button.HideBtns {display: none;}Нужной кнопке в HTML-коде страницы тоже следует добавить атрибут class и присвоить ему значение HideBtns:скрытая кнопка

Примените свойство display со значением none к родительскому элементу, если надо, например, скрыть не только кнопку, но и остальные элементы веб-формы. Форма считается «родителем» по отношению ко всем элементом, помещенным между тегами и . Например:

Здесь внутрь формы помещено текстовое поле и кнопка отправки введенного значения. Форма приписана к классу с именем HideForm, поэтому чтобы скрыть и поле ввода и кнопку, надо изменить CSS-инструкцию так:form.HideForm {display: none;}

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

button.HideBtns {display: none;}

Оцените статью!