Как скрыть инпут

Как скрыть инпут

Примечание: События input и change не применимы для скрытых полей ввода. Их нельзя взять в фокус даже с помощью JavaScript (например, используя hiddenInput.focus() ).

Значение

Для скрытых атрибут value хранит непосредственно скрытые данные, которые затем можно отправить на сервер вместе с формой.

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

Дополнительные атрибуты

В дополнение к атрибутам, общим для всех input , скрытые поля ввода позволяют иначе использовать следующий атрибут.

name

Скрытые input , чьи атрибуты name установлены в _charset_ , не должны иметь атрибут value . При отправке формы он автоматически будет содержать значение с кодировкой символов, используемых в отправленной форме.

Использование скрытых input

Как упоминалось ранее, скрытые input можно использовать для хранение данных, которые пользователи не смогут увидеть или изменить через свой интерфейс. Посмотрим на примеры такого применения.

Отслеживание отредактированного контента

Одним из наиболее распространенных способов применения скрытых полей ввода является отслеживание того, какая именно запись базы данных должна быть обновлена после отправки формы. Типичный процесс редактирования выглядит так:

1. Пользователь решает отредактировать контент, например, запись в своём блоге или какое-то описание товара. Он начинает с нажатия на кнопку «Редактировать».
2. Контент для редактирования запрашивается из базы данных и подгружается в HTML форму, чтобы пользователь мог внести изменения.
3. После правок, пользователь отправляет форму, и обновлённые данные отправляются обратно на сервер для обновления базы данных.

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

Вы можете посмотреть пример такой логики в секции Примеры ниже.

Улучшение безопасности веб-сайта

Скрытые input также используются для хранения и отправки токенов безопасности. Основная идея заключается в том, что если пользователь заполняет некую конфиденциальную форму, например, в своём банковском аккаунте для перевода денег на другой счёт, ему будет выдан токен безопасности. Этот токен докажет, что отправитель действительно тот, за кого себя выдаёт, и что он использует нужную форму для отправки своего перевода.

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

Примечание: Хранение токенов безопасности в скрытых input не означает их сохранность, дополнительно портребуется, например, шифрование. Смысл скрытого input заключается лишь в хранении токена безопасности, связанного с данными, и его автоматической отправке вместе с формой на сервер.

Валидация

Скрытые input не участвуют в валидации.

Примеры

Посмотрим, как мы могли бы реализовать простую версию формы со скрытым input для хранения идентификатора редактируемой записи:

form> div> label for="title">Заголовок поста:label> input type="text" id="title" name="title" value="Мой замечательный пост" /> div> div> label for="content">Контент:label> textarea id="content" name="content" cols="60" rows="5"> Некий контент внутри поста. textarea> div> div> button type="submit">Обновить постbutton> div> input type="hidden" id="postId" name="postId" value="34657" /> form> 

Также добавим немного простого CSS:

html  font-family: sans-serif; > form  width: 500px; > div  display: flex; margin-bottom: 10px; > label  flex: 2; line-height: 2; text-align: right; padding-right: 20px; > input, textarea  flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; > textarea  height: 60px; > 

Сервер свяжет ID » postId » скрытого input с ID записи блога, чтобы знать, какую часть базы данных следует обновить. Никакого дополнительного клиентского кода для этого не потребуется.

Примечание: Вы также можете найти данный пример на GitHub (смотрите исходный код, а так же рабочее демо).

При отправке на сервер данные формы будут выглядеть примерно так:

Даже несмотря на то, что скрытый input не виден для пользователей при отправке формы, он содержит данные и они всё равно передаются на сервер.

Техническая сводка

Спецификации

Specification
HTML Standard # hidden-state-(type=hidden)

Совместимость браузеров

BCD tables only load in the browser

Смотрите также

• Руководство по HTML-формам
• и интерфейс HTMLInputElement (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Скрытое поле

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

Синтаксис создания скрытого поля.

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты скрытого поля

Атрибут	Описание
name	Имя поля для его идентификации обработчиком формы.
value	Значение поля, определяющее, какая информация будет отправлена на сервер.

Пример использования скрытых полей приведен в примере 1.

Пример 1. Использование скрытого поля

HTML5 IE Cr Op Sa Fx

       
Напишите любимое слово и нажмите кнопку Отправить (никакие данные не будут передаваться на сервер!):
 

В данном примере показано создание двух скрытых полей, одно из них носит имя name и получает значение Vasya , а второе именуется password со значением pupkin . В результате отправки формы обработчику, указанному в атрибуте action , программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.

Как скрыть инпут

Есть несколько разных способов разной степени костыльности пробросить атрибут, но я спросил потому, что скорее всего исходная задача в принципе должна решаться по-другому. Как минимум потому, что конкретный input и так изначально скрыт 😉

Если не хочется отправлять данные на сервер — подойдет модификатор disabled . Чтобы при этом визуально исчезал айтем группы, можно на этот модификатор добавить display: none .

8 years ago

ОК. исходная задача — кастомизация Checkbox и Radio http://habrahabr.ru/post/144104/

Вов, дай мне хотябы один способ пробросить атрибут, я не додумался сам, и в документации не нашёл, поэтому и спрашиваю..

8 years ago

Нативный контрол в bem-components скрывается с помощью css без установки аттрибута hidden . Для кастомизации представления используется элемент checkbox__box и модификаторы самого блока.

8 years ago

@Guria все правильно написал. Нет причин использовать hidden , чтобы как угодно стилизовать и том числе скрывать чекбоксы внутри группы.

Но если чисто из любви к искусству, могу предложить два плохих способа:

1. Плохой и простой способ — это полностью перекрыть моду content на своем уровне копипастом из https://github.com/bem/bem-components/blob/v2/common.blocks/checkbox-group/checkbox-group.bemhtml#L8-L36 и тупо пробросить нужное поле.
2. Плохой и сложный способ, зато без копипаста — доопределить моду контент. В ней исходные знания про все айтемы будут доступны в this.ctx.options и перебором массива можно будет найти индексы hidden-полей. А applyNext() вернет массив массивов, содержащий BEMJSON с чекбоксами и
   . Так что перебором этого массива и с поправкой на
   можно будет добавить знание про hidden нужным айтемам. А потом написать шаблон на checkbox , в котором пробросить это знание в this , тогда оно будет доступно из элемента control .

PS: Использовать любой из способов на реальном проекте ни в коем случае не нужно.

8 years ago

ОК, а как добавить свой атрибут в option (select), например, data-какой-нибудь, в bemjson / bemhtml / bh? Чтобы было нечто:.

8 years ago

Здесь нужно сначала уточнить, чего хочется добиться в результате, т.к. в select на самом деле используется один , в значение которого выставляется текущее выбранное значение селекта (так сделано потому что браузеры кэшируют состояние нативного и это вызывает кучу проблем).

8 years ago

нужно установить свой кастомный атрибут для дальнейшей обработки выбранной опции селекта. Например: такое поведение https://89b748288a516d1649acbafa0abff0c719364023.googledrive.com/host/0BwpgJqxcuprwWG5aRUZYcEYwTEE/index.html

известно, что на прочих узлах атрибут можно вставить так: (bemjson) attrs: (bh) ctx.attr(‘role’, ‘button’); . а как произвольный атрибут добавить в option ?

8 years ago

Если я правильно понял задачу, то достаточно связать значение селекта и тип фильтра. Что-то типа:

Select.on(this.elem('filter'), 'change', function(e) < var select = e.target, val2filterType = < title: 'stringMatch', category: 'stringMatch', binder: 'numberRange', release: 'dateRange', viewed: 'boolean' >, val = select.getVal(), filterType = val2filterType[val]; >); 

PS: Если необходима возможность сбрасывать селект в пустое значение — стоит использовать select_mode_radio-check.

8 years ago

нет, Вов, проще.. было бы хорошо иметь возможность, видеть в документции (специализированные поля блока select) способ добавления кастомных атрибутов в поле options наряду с прочими (val, text, checkedText . др.)

8 years ago

Способ добавления кастомных атрибутов куда? Вот пример HTML блока select , где должны оказаться атрибуты и что это даст?

  
 
 
Доклад
 
Мастер-класс
 
Круглый стол
 
 
 
 

8 years ago

я понял, т.е. если атрибут окажется в menu-item, это ничего не даст.

изменяется только value в input type=»hidden»

выходит с атрибутами в option не поиграешься 🙁

7 years ago

При передачи данных в форму отправки данных, необходимо передавать некоторые значения для идентификации — формы, текущей страницы, время и дата отправки и т.д. Для идентификации формы используется значение атрибута value=»» . Это значение переменное, меняется в зависимости от вида формы.

block('input').mod('type', 'hidden').elem('control').attrs()(function() < var ctx = this.ctx, attrs = < type : 'hidden', name : 'vid_zaprosa' >; ctx.target && (attrs.target = ctx.target); return this.extend(applyNext(), attrs); >); 

Хотелось бы указывать значение value=»» в bemjson, и чтобы атрибут пробросился к контролу:

< block : 'input', mods : < type : 'hidden' >, /*attrs : < value : 'consultacia' >*/ > 

Как это сделать?

В дальнейшем планируется сделать:

1. jquery.serialize()
2. Отправку данных ajax через форму php

Или вообще может есть более оптимальное решение по сбору информации с формы?

7 years ago

Более оптимальное решение для использовать чистый BEMJSON вида:

Как скрыть часть текста в input?

Фактически конечно можно решить эту задачу без JS но придется немного видоизменить разметку, так для обнаружения мыши можно использовать спобоности ссылок — :hover ,а для :after какой-нибудь контейнер, в данном случае хорошо подходит span

Что касается задачи, то я ее не знаю, и вероятно сам бы предпочел делать подобные вещи средствами JS, тем более что для идеального решения только средствами CSS потребуется еще дорабатывать стили, в частности стили выделенного текста, и делать чуть больший охват вокруг input чтобы не было излишнего мерцания.

a:hover span:after < display:none; >a span:after

Отслеживать
ответ дан 23 янв 2022 в 0:52
Daniil Loban Daniil Loban
11k 2 2 золотых знака 8 8 серебряных знаков 18 18 бронзовых знаков

На css (на css думаю не лучший вариант такое делать и надо подстраивать под каждый случай)

.inputRow < position:relative; display:inline-block; font-size:18px; >.inputRow input < height:24px; >.inputRow span < position: absolute; left: 0; right: 0; overflow: hidden; margin: auto; top: 0; bottom: 0; background: #fff; height: 22px; display: inline-table; font-size: 18px; pointer-events: none; line-height: 22px; >.inputRow input:focus + span, .inputRow input:active + span

На js

let ak = document.querySelector('input[name=api-key]'), oldVal = document.querySelector('input[name=api-key]').value, counStar = Math.floor(ak.value.length/100*80), start = Math.floor(ak.value.length/100*15), starText = ak.value.slice(start,counStar), newText = "*".repeat(counStar), newVal = ak.value.replace(starText, newText); ak.value = newVal; ak.onfocus = function() < ak.value = oldVal; >; ak.onblur = function() < ak.value = newVal; >;