Малоизвестные, но крутые атрибуты в HTML



    Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.

    * — нет, это не настоящий пинг. Но так даже лучше.

    Продвинутый выбор даты


    В стандарте для input type="date" поддерживаются атрибуты min, max и step, благодаря которым можно частично ограничить выбор даты прямо в HTML, без дополнительной валидации. Конечно, для сложных календарей для выбора курсов или заказа билетов такая уличная магия не сработает, но простые кейсы ей вполне по зубам:

      <form>
        <div>
          <label for="party">Укажите предпочтительную дату вечеринки:</label>
          <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30">
        </div>
      </form>
    


    Мы ограничили выбор даты одним месяцем, не бог весть какой рокетсайенс:



    Теперь оставим только субботы, потому что проводить вечеринку на буднях идея так себе:

      <form>
        <div>
          <label for="party">Укажите предпочтительную дату вечеринки:</label>
          <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30" step="7">
        </div>
      </form>
    




    Как поссорить форму саму с собой


    Если игры с выбором даты давно освоены, не огорчайтесь! Вот пачка действительно необычных атрибутов для тега button:

    • formaction
    • formenctype
    • formmethod
    • formnovalidate


    Из имён понятно, что они используются для управления поведением формы, причём схема, указанная в button, будет переопределять родительскую (из тега form):

      <form action="/some-endpoint" method="post">
        <label>
          Your name
          <input name="full-name" type="text" required>
        </label>
        <button 
          formaction="/some-other-endpoint"
          formmethod="get"
          formnovalidate>Submit</button>
      </form>
    


    Несмотря на указанную в родителе отправку данных на some-endpoint, кнопка Submit, как и нажатие enter в инпутах, отправит GET-запрос на some-other-endpoint! Ну и валидация полей также отключается. Играясь с такими кнопками можно запилить форму с условным поведением, круто.

    Несколько email-ов в одном поле


    Это вообще нишевый трюк, но где-то может и пригодиться. В input type="email" можно указать атрибут multiple, и поле начнёт принимать список адресов, перечисленных через запятую:

      <input type="email" inputmode="text" multiple />
    


    Опциональный атрибут inputmode="text" Bramus Van Damme предлагает использовать для удобства пользователей на iOS, у которых нет запятой на клавиатуре для ввода почты.



    Цветовые схемы вне CSS


    Если вы по-настоящему глубоко изучили все аспекты применения тёмной темы, то наверняка знаете про возможность сообщить браузеру о поддержке цветовых схем. Это нужно для покрытия мелких назойливых элементов с дефолтными браузерными стилями (для светлой темы), которые иначе задолбаешься переопределять в CSS. Так выглядит классическое определение тем:

      :root {
        --background: #fff;
        --text-color: #000;
      }
    
      @media (prefers-color-scheme: dark) {
        :root {
          --background: #1b1b1b;
          --text-color: #eaeaea;
        }
      }
    
      /* это всё прекрасно, но всегда лучше перестраховаться */
    


    А так работают профессионалы:

      <meta name="color-scheme" content="dark light">
    


      :root {
        color-scheme: dark light;
      }
    


    Первой указывается предпочтительная тема (prefers-color-scheme в CSS всё равно переопределит её), то есть при dark light браузер покажёт тёмную тему, если не получит других инструкций, а при light dark — наоборот.

    NB: в мозилле поддержку ещё не завезли:



    Собираем метрики прямо из ссылок


    Вот мы и подошли к самому вкусному. Сразу стоит оговориться, что это молодая фича, и она также пока официально не поддерживается в Firefox (точнее, спрятана за флагом browser.send_pings, то есть, скоро появится и в обычном доступе). Итак, встречайте офигенный атрибут ping для любых элементов со ссылками!

    <a href="https://habr.com/ru/top/" 
      ping="https://habr.com/tracking/">Все потоки</a>
    


    Лёгким движением руки обычная ссылка превращается в стукача, который при переходе по URL отправляет POST-запрос с текстом PING на эндпойнт для сбора аналитики. В запросе используется Content-Type: text/ping, а также заголовки Ping-From и Ping-To.Также передаются все стандартные заголовки, включая юзер-агент, просто полный улёт.

    Заключение


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



    На правах рекламы


    Серверы для размещения сайтов — это про наши эпичные! Все серверы «из коробки» защищены от DDoS-атак, скорость интернет-канала 500 Мегабит, автоматическая установка удобной панели управления VestaCP для размещения сайтов. Лучше один раз попробовать ;)

    VDSina.ru
    Серверы в Москве и Амстердаме

    Комментарии 15

      0
      обычная ссылка превращается в стукача, который при переходе по URL отправляет POST-запрос с текстом PING на эндпойнт для сбора аналитики

      Umatrix`у на некоторых компах придется нелегко скоро…
      Вроде и ничего страшного, когда запросишь страницу все равно все эти данные о пользователе будут на сервере. А с другой начнется повальное использование где надо и не надо…
        0
        Это если пинг стоит на тот же хост, а не гугловский, например. К счастью, у нас есть опция browser.send_pings со значением false Предсказуемо, эта опция сегодня есть только в Огнелисе, тогда как из Хромоножки и Сафари ее выпилили.
        –3
        Если юзер скопирует ссылку и откроет в новой вкладке через ctrl-v, ping сработает?
        0

        Интересно, спасибо! А в чем принципиальное преимущество перед настройкой Google Analytics/Google Tag Manager? Простота и кастомизация?

          0

          Если это про , то рискну предположить, что:
          1) JS не нужен
          2) не сильно в курсе, как работет GA/GTM, но есть вероятность, что страница будет какое-то время ждать ответа от их серверов, прежде чем перейти на отслеживаемый URL. В случае нативной реализации браузером запрос точно можно отправить в фоне и ничего и никого не ждать.
          3) собственную систему сбора статистики легко интегрировать (вы это имели в виду под кастомизацией?)

          Простоту никто не отменял, конечно)) Что может быть проще, чем атрибут прописать?

          +1

          Теги интересные, но не все представляю как применить в практике)


          1. По продвинутому выбору даты не указано, что в Safari не поддерживается. + выбор только конкретно месяца и дня не отменяет необходимость валидации перед отправкой, так как в любом случае теги очень легко убираются из html. Я редко пользуюсь встроенными возможностями (не только конкретно про этот пример) именно по причине того, что все равно буду также делать валидацию в js. Интересный тег, который тоже подходит в тематику валидации: pattern (покрытие 96.88% на caniuse)
          2. По поводу тегов на форме вообще сложно представить, что это может заинтересовать, почти все формы сейчас проходят через доп. обработку данных, валидацию, отлов ошибок при запросе, что одними тегами конечно сделать сложно
          3. По метрикам выше указывали, что гугл аналитика конечно чаще используется (также яндекс метрика, фейсбук), там подобные клики можно вообще настроить внутри системы не заходя в код (но с SPA я предпочитаю сама управлять частью особо важных событий, чтобы быть уверенной, что ререндер не повлияет на работу метрики). И выбор конкретных метрик зависит от маркетологов, а не от разработчиков, поэтому увы, но влияния у нас не так много)

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

            0
            Есть случаи, когда вам нужно просто следить за кликом по элементу, чтобы проверить насколько востребована та или иная фича. В таком случае обычно просто отправляют json на google-analytic, в принципе. Так что пинг будет полезен, т.к меньше js, можно просто гет параметрами обойтись, наверное
              0

              Мы не сами отправляем запрос, аналитика сама это делает, мы же просто вызываем функцию (в случае фб или яндекса) или пушим в массив (аналитика добавляет dataLayer).

                0
                но код то, который вызывает функцию должен быть написан) обработчик клика там или еще что
                  0

                  Так там же не запрос) поэтому ping все равно не подойдёт наверное. Обычно просто можно написать onclick

                    0
                    Там настолько мало кода, по сравнению с другим кодом, причем мертвым.
                    За примером можно сходить в чат jivosite.

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

              Эммм, я что-то не так понимаю, или...?


              A4-BBBD35-1-A8-C-48-D6-8-C4-B-97-AECB3741-AA
                0
                У этого поля inputmode="text" прописан
                0

                ping полезен в случае, если он указывает на отдельный аналитический сервер.
                А если он указывает на тот же сервер, на который ведёт href, то аналитику без применения аттрибута ping может собрать и тот сервер, на который href ведёт, т.к. он же и получит запрос из href.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое