Скрытое поле
Часто возникает ситуация, когда требуется передать в форме некоторые промежуточные данные, которые не должны изменяться пользователем. Более того, такие данные не должны показываться пользователю, поскольку носят технический характер и обычно служат для передачи некоторой информации от страницы к странице. Для этой цели применяется скрытое поле, оно не отображается на странице и прячет своё содержимое от пользователя. Посетитель не может в него ничего внести или напечатать.
Синтаксис создания скрытого поля.
Атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| name | Имя поля для его идентификации обработчиком формы. |
| value | Значение поля, определяющее, какая информация будет отправлена на сервер. |
Пример использования скрытых полей приведен в примере 1.
Пример 1. Использование скрытого поля
Напишите любимое слово и нажмите кнопку Отправить (никакие данные не будут передаваться на сервер!):
В данном примере показано создание двух скрытых полей, одно из них носит имя name и получает значение Vasya , а второе именуется password со значением pupkin . В результате отправки формы обработчику, указанному в атрибуте action , программа может легко прочитать эти данные и интерпретировать их по усмотрению разработчика.
make an input invisible but clickable through CSS?
As you see in the example, the radio is appearing on top. How can I make appear on the back and be clickable or even hide it while letting it be clickable?
invisible but clickable? you mean you are going to trigger click of one element which is invisible with some other element?
5 Answers 5
Adding opacity: 0 to the input might be a start. Not sure about browser support, but it seems to work on the newest versions of Firefox, Chrome and Safari.
.main < position: relative >.main > div < width: 200px; height: 200px; background: #f00; >input < width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; >input:checked + div
You can also hide the input and only show a label. I modified a couple of things from the fiddle to give you an example:
I have only copied the modified CSS blocks, the rest remain unchanged.
Won’t work because events are not fired on visibility:hidden elements. See this non-working demo: jsfiddle.net/t87k5k8u/14
Yes but! If you click on the label, the event is fired. Therefore, by changing your »
Opps, yeah you’re right. My Bad. Sorry. I’d remove my down-vote but the system wont let me unless you make an edit. (maybe you can make a tiny format change or something?)
Sure. You can make the input go invisible.
Use CSS Opacity. Make sure its too faint to be seen but not actually fully transparent so that the browser still renders it (for maximum x-browser compatibility):
opacity:0.02; /* not FULLY transparent */ filter: alpha(opacity=0); /* IE8 and lower */ zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ .main < position: relative >.main > div < width: 200px; height: 200px; background: #f00; >input < width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity:0.02; /* not FULLY transparent */ filter: alpha(opacity=100); /* IE8 and lower */ zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */ >input:checked + div
For this task I would use the for attribute in the label elements and, since you’re placing a div inside an inline element, I would slightly change and simplify the markup like so
fieldset div < position: relative; width: 100px; height: 100px; border: 0; margin: 10px 0; >label < position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; font: 0/0 a; cursor: pointer; >input + label < background: red; >input:checked + label
Each radio element becomes not visible due to the label element which is positioned in absolute . Instead of a div you could change the background colour of the label.
As a side note with this approach you don’t need to use an extra empty element, the semantic is improved and the use of label elements increases the accessibility of your form (without CSS enabled you would see all the checkboxes with theirs associated label aside)
Difference between input[type=hidden] and visibility=»hidden»
The first one is input element and the second is used for style in CSS2.
visibility: hidden; The visibility property specifies whether or not an element is visible.
input[type=hidden] :- HIDDEN is a TYPE attribute value to the INPUT element for FORMs. It indicates a form field that does not appear visibly in the document and that the user does not interact with. It can be used to transmit state information about the client or server.
I’m assuming you mean what is the difference between and with CSS
If that’s the case then the first one is a DOM type but still in the structure, the second is a style method to remove the item from the DOM structure.
input[type=hidden] is definitely a selector, which matches every input element which has type attribute value set to hidden .
I have no idea what visibility=»hidden» is. It could be CSS property, but incorrect one. It should be visibility: hidden; to be valid.
Hmm, it’s exactly what I’ve wrote about: it has to be visibility: hidden to be valid CSS. His text uses » s and = , and is not correct CSS.
This is a DOM selector (jQuery, CSS, etc.) for any input elements where the type attribute is «hidden» . It doesn’t have anything to do with actually displaying or hiding those elements, aside from the fact that browsers don’t render elements.
This is setting the CSS visibility property to the value «hidden» which would tell the browser to not render whatever element(s) to which you’re applying that attribute. This is entirely about display of HTML elements and doesn’t have anything to do with selectors or form elements as the other example does.
Как использовать input type hidden
С помощью input type hidden разработчики веб-форм могут хранить и отправлять информацию, скрытую от пользователей.
Скрытые поля можно использовать для сохранения текущего состояния многостраничных форм, собирать cookie-файлы для отправки вместе с формой, а также хранить данные, которые не вводятся пользователем.
Это может быть как неизменяемая информация, так и данные, генерируемые с помощью JavaScript , о которых пользователь может и не подозревать ( например, время загрузки формы ).
Примечание : Не забывайте, что скрытые поля нельзя назвать полностью скрытыми — они просто недоступны большинству пользователей, но легко просматриваются в исходном коде страницы. Поэтому никогда не храните в них пароли или другие конфиденциальные данные.
Пример использования input type hidden
Синтаксис использования input type hidden должен соответствовать строке, выделенной в коде, приведенном ниже в качестве примера:
Как видно из примера, мы сохраняем в скрытом поле значение страны “ US ”, поэтому, когда пользователь отправит форму, мы будем знать, что он из США. Разумеется, эти данные можно поменять на другие, изменив HTML-код .
Можно использовать input type hidden для хранения даты и времени ( в примере это сделано с помощью MySQL ):
В PHP можно воспользоваться следующим методом:
МК Михаил Кузнецов автор-переводчик статьи « How to Use the «hidden» HTML INPUT Tag »
Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!