10 полезных фишек HTML

10 полезных фишек HTML

Наши соц. сети: instagram, fb, tg

❮details❯

❮details❯ предоставляет пользователю подробную информацию по запросу. По умолчанию виджет закрыт, а в открытом положении он будет выводить полезную информацию или подсказку. ❮summary❯ часто используют с ❮details❯, чтобы указать видимый заголовок.

❮details❯
     ❮summary❯Click Here to get the user details❮/summary❯
         ❮table❯
                ❮tr❯
                    ❮th❯#❮/th❯
                    ❮th❯Name❮/th❯
                    ❮th❯Location❮/th❯
                    ❮th❯Job❮/th❯
                ❮/tr❯
                ❮tr❯
                    ❮td𘩗❮/td❯
                    ❮td❯Adam❮/td❯
                    ❮td❯Huston❮/td❯
                    ❮td❯UI/UX❮/td❯
                ❮/tr❯
          ❮/table❯
  ❮/details❯

как это выглядит

contenteditable

contenteditable - это атрибут, который можно установить для элемента, чтобы сделать его контент доступным для редактирования. Он работает с такими элементами, как div, p, ul и тд. Указать его можно вот так: ❮element contenteditable = "true | false"❯. С помощью contenteditable можно сделать span или div редактируемыми элементами.

Обратите внимание: если для элемента не установлен атрибут contenteditable, он будет унаследован от его родителя.

❮h2❯ Shoppping List(Content Editable) ❮/h2❯
 ❮ul class="content-editable" contenteditable="true"❯
     ❮li❯ 1. Milk ❮/li❯
     ❮li❯ 2. Bread ❮/li❯
     ❮li❯ 3. Honey ❮/li❯
❮/ul❯

как это выглядит

❮map❯

❮map❯ позволяет создать изображение с одной или несколькими интерактивными областями внутри. ❮map❯ сопровождается тегом ❮area❯ для определения интерактивных областей. Интерактивные области могут быть любой формы: прямоугольник, круг или многоугольник. Если вы не укажете форму, будет учитываться все изображение.

У ❮map❯ есть свои недостатки, но вы можете использовать его для визуальных презентаций.

❮div❯
    ❮img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap"❯

    ❮map name="circusmap"❯
        ❮area shape="rect" coords="67,114,207,254" href="elephant.htm"❯
        ❮area shape="rect" coords="222,141,318, 256" href="lion.htm"❯
        ❮area shape="rect" coords="343,111,455, 267" href="horse.htm"❯
        ❮area shape="rect" coords="35,328,143,500" href="clown.htm"❯
        ❮area shape="circle" coords="426,409,100" href="clown.htm"❯
    ❮/map❯
 ❮/div❯

как это выглядит

❮mark❯

❮mark❯ можно использовать для выделения любого текстового содержимого.

❮p❯ Did you know, you can ❮mark❯"Highlight something interesting"❮/mark❯ just with an HTML tag? ❮/p❯

Вы всегда можете изменить цвет выделения с помощью css:

mark {
  background-color: green;
  color: #FFFFFF;
}

как это выглядит

data-*

Атрибут data- * можно использовать для хранения пользовательских данных, приватных для страницы или приложения. Сохраненные данные можно использовать в коде JavaScript для дальнейшего взаимодействия с пользователем. У data- * есть два основных нюансов:

1. имя атрибута не должно содержать заглавных букв и должно состоять как минимум на один символ после префикса "data-"

2. значение атрибута может быть любой строкой

❮h2❯ Know data attribute ❮/h2❯
 ❮div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"❯ 
   I have a hidden secret!
  ❮/div❯

❮button onclick="reveal()"❯Reveal❮/button❯

JavaScript:

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `❮mark❯${value}❮/mark❯`;
}

Примечание: для чтения значений этих атрибутов в JavaScript вы можете использовать getAttribute () с их полным HTML-именем (например, data-custom-attr), но стандарт определяет более простой способ - использование свойства dataset.

как это выглядит

❮output❯

❮output❯ представляет результат вычисления. Обычно этот элемент определяет область, которая будет использоваться для отображения текста, выводимого в результате некоторых вычислений.

❮form oninput="x.value=parseInt(a.value) * parseInt(b.value)"❯
   ❮input type="number" id="a" value="0"❯
          * ❮input type="number" id="b" value="0"❯
                = ❮output name="x" for="a b"❯❮/output❯
❮/form❯

Если вы выполняете какие-либо вычисления в клиентском JavaScript и хотите, чтобы результат отражался на странице, используйте тег ❮output❯. Вам не придется выполнять дополнительные шаги по получению элемента с помощью getElementById ().

как это выглядит

❮datalist❯

❮datalist❯ определяет список предопределенных параметров и позволяет пользователю добавлять к нему дополнительные. Он предоставляет функцию автозаполнения, которая позволяет вам получить желаемые параметры с опережением ввода.

❮form action="" method="get"❯
    ❮label for="fruit"❯Choose your fruit from the list:❮/label❯
    ❮input list="fruits" name="fruit" id="fruit"❯
        ❮datalist id="fruits"❯
           ❮option value="Apple"❯
           ❮option value="Orange"❯
           ❮option value="Banana"❯
           ❮option value="Mango"❯
           ❮option value="Avacado"❯
        ❮/datalist❯
     ❮input type="submit"❯
 ❮/form❯ 

Чем он отличается от традиционного ❮select❯ ❮option❯? ❮select❯ ❮option❯ предназначен для выбора одного или нескольких элементов из вариантов, в которых вам нужно просмотреть список для выбора, а datalist - это расширенная функция с поддержкой автозаполнения.

как это выглядит

range

Атрибут range позволяет добавить ползунок селектора диапазона.

❮form method="post"❯
    ❮input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/❯
 ❮/form❯
 ❮div class="range"❯
      ❮output id="output" name="result"❯  ❮/output❯
 ❮/div❯

как это выглядит

❮input❯

Казалось бы, про тег ❮input❯ все всё и так давно знают. Однако и здесь есть несколько опций, о которых многие забывают:

required

Позволяет отметить обязательное поле.

❮input type="text" id="username1" name="username" required❯

autofocus

Обеспечит автоматический фокус на элементе ввода при перемещении на него курсора.

❮input type="text" id="username2" name="username" required autofocus❯

проверка с регулярным выражением

Позволяет указать шаблон, используя регулярное выражение для проверки ввода.

❮input type="password" 
            name="password" 
            id="password" 
            placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required❯

Приятного кодинга