Як заховати кнопку

Як заховати кнопку

Іноді при верстці веб-сторінки буває потрібно приховати будь-якої з розміщених в ній елементів. Наприклад, якщо необхідно, щоб відвідувач не бачив кнопки відправки форми до того, як всі обов’язкові поля не будуть заповнені. Або якщо кнопка взагалі не призначена для використання відвідувачем, а «натискати» її повинен розміщений в цій сторінці скрипт.

Інструкція

  1. Використовуйте властивість display мови опису стилів CSS (Cascading Style Sheets — «каскадні таблиці стилів») для виключення або включення відображення потрібних елементів сторінки. Цій властивості, згідно з міжнародними стандартами, можна привласнити більше півтора десятка значень, які задають різні способи відображення. Однак кросбраузерність (тобто працюють у всіх основних браузерах) є тільки чотири. Серед цієї четвірки є й потрібне вам значення none, яке дозволяє приховати потрібний елемент сторінки.
  2. Складіть необхідний набір CSS-інструкцій. У найпростішому вигляді він може виглядати так:

    button {display: none;}

    У такому варіанті в сторінці не відображатимуться всі кнопки, які використовують тег <button> …</ button>.
  3. Додайте в інструкції вказівку на ім’я класу, якщо треба сховати тільки одну кнопку або певну групу кнопок. Наприклад, назвіть такий клас HideBtns і додайте це ім’я в CSS-інструкцію:

    button.HideBtns {display: none;}

    Потрібної кнопці в HTML-коді сторінки теж слід додати атрибут class і привласнити йому значення HideBtns:

    <button class=»HideBtns»> прихована кнопка </ button>
  4. Застосуйте властивість display із значенням none до батьківського елементу, якщо треба, наприклад, приховати не тільки кнопку, а й інші елементи веб-форми. Форма вважається «батьком» по відношенню до всіх елементом, поміщеним між тегами <form> і </ form>. Наприклад:

    <form class=»HideForm»>

     <input name=»search» type=»text» value=»поле ввода» />

     <input type=»submit» value=»скритая кнопка» />

    </ Form>

    Тут всередину форми поміщено текстове поле і кнопка відправки введеного значення. Форма приписана до класу з ім’ям HideForm, тому щоб приховати і поле введення і кнопку, треба змінити CSS-посібник так:

    form.HideForm {display: none;}
  5. Помістіть підготовлений за зразком, наведеним вище, код в заголовну частину веб-документа (між тегами <head> і </ head>). Щоб повідомити браузеру відвідувача, що це CSS-код, його треба укласти між відкриває і закриває HTML-тегами style:

    <style type=»text/css»>

     button.HideBtns {display: none;}

    </ Style>