How to create a label inside an input element

Question

I would like to insert a descriptive text inside an input element that disappers when the user click on it   I know it is a very common trick  but I do not know how to do that    What is the simplest better solution

User · Answer

When you start typing it will disappear If empty it will appear again            lt    f text field  user email  value  gt     placeholder   gt   Eg abc gmail com   gt    Simplest way

User · Answer

In my opinion  the best solution involves neither images nor using the input s default value  Rather  it looks something like David Dorward s solution   It s easy to implement and degrades nicely for screen readers and users with no javascript   Take a look at the two examples here  http   attardi org labels   I usually use the second method  labels2  on my forms

User · Answer

One hint about HTML property placeholder and the tag textarea  please make sure there is no any space between  lt textarea gt  and  lt  textarea gt   otherwise the placeholder doesn t work  for example    lt textarea id  inputJSON  spellcheck  false  placeholder  JSON response string  style  flex  1   gt   lt  textarea gt    This won t work  because there is a space between

User · Answer

I think its good to keep the Label and not to use placeholder as mentioned above  Its good for UX as explain here  https   www smashingmagazine com 2018 03 ux-contact-forms-essentials-conversions   Here example with Label inside Input fields   codepen io jdax pen mEBJNa

User · Answer

I ve put together solutions proposed by  Cory Walker with the extensions from  Rafael and the one form  Tex witch was a bit complicated for me and came up with a solution that is hopefully   error-proof with javascript and CSS disabled   It manipulates with the background-color of the form field to show hide the label    lt head gt    lt style type  text css  gt   lt  --     input  position relative background transparent    -- gt   lt  style gt    lt script gt      function labelPosition             document getElementById  name   style position  absolute                   label is moved behind the textfield using the script                  so it doesnt apply when javascript disabled        lt  script gt    lt  head gt   lt body onload  labelPosition    gt    lt form gt           lt label id  name  gt Your name lt  label gt           lt input type  text  onblur  if this value      this style background  transparent     onfocus  this style background  white   gt   lt  form gt    lt  body gt    View the script in action  http   mattr co uk work form label html

User · Answer

lt input name  searchbox  onfocus  if  this value   search   this value       onblur  if  this value      this value    search   type  text  value  search  gt    Add an onblur event too

User · Answer

Please use PlaceHolder JS its works in all browsers and very easy for non html5 compliant browsers  http   jamesallardice github io Placeholders js

User · Answer

The common approach is to use the default value as a label  and then remove it when the field gains the focus   I really dislike this approach as it has accessibility and usability implications   Instead  I would start by using a standard  element next to the field   Then  if JavaScript is active  set a class on an ancestor element which causes some new styles to apply that    Relatively position a div that contains the input and label Absolutely position the label Absolutely position the input on top of the label Remove the borders of the input and set its background-color to transparent   Then  and also whenever the input loses the focus  I test to see if the input has a value  If it does  ensure that an ancestor element has a class  e g   hide-label    otherwise ensure that it does not have that class   Whenever the input gains the focus  set that class   The stylesheet would use that classname in a selector to hide the label  using text-indent  -9999px  usually    This approach provides a decent experience for all users  including those with JS disabled and those using screen readers

User · Answer

lt input name  searchbox  onfocus  if  this value   search   this value       type  text  value  search  gt    A better example would be the SO search button  That s where I got this code from  Viewing page source is a valuable tool

User · Answer

Here is a simple example  all it does is overlay an image  with whatever wording you want    I saw this technique somewhere   I am using the prototype library so you would need to modify if using something else   With the image loading after window load it fails gracefully if javascript is disabled    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd   gt   lt html xmlns  http   www w3 org 1999 xhtml   gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset ISO-8859-1     gt       lt meta http-equiv  Expires  content  Fri  Jan 1 1981 08 00 00 GMT    gt       lt meta http-equiv  Pragma  content  no-cache    gt       lt meta http-equiv  Cache-Control  content  no-cache    gt       lt style type  text css   gt           input searcher                       background-image  url  images search back png               background-repeat  no-repeat              background-attachment  scroll              background-x-position  left              background-y-position  center                  lt  style gt        lt script type  text javascript  src   logist include scripts js prototype js   gt  lt  script gt   lt  head gt   lt body gt       lt input type  text  id  q  name  q  value      gt        lt script type  text javascript  language  JavaScript   gt           lt   CDATA          function f e                  q   removeClassName  searcher                       function b e               if    F  q                                            q   addClassName  searcher                                     Event observe   q    focus   f           Event observe   q    blur   b           Event observe  window   load   b               gt       lt  script gt   lt  body gt   lt  html gt

User · Answer

use this  style    lt style type  text css  gt       defaultLabel on   color  0F0         defaultLabel off   color  CCC     lt  style gt    html     javascript   function defaultLabelClean         inputs   document getElementsByTagName  input        for  var i   0  i  lt  inputs length  i               if  inputs i  value    inputs i  getAttribute  innerLabel                  inputs i  value                          function defaultLabelAttachEvents element  label        element setAttribute  innerLabel   label       element onfocus   function e            if  this value  label                this className    defaultLabel on               this value                           element onblur   function e            if  this value                    this className    defaultLabel off               this value   element getAttribute  innerLabel                         if  element value                element className    defaultLabel off           element value   element getAttribute  innerLabel              defaultLabelAttachEvents document getElementById  MYID     MYLABEL      Just remember to call defaultLabelClean   function before submit form   good work

User · Answer

You do not need a Javascript code for that     I think you mean the placeholder attribute  Here is the code    lt input type  text  placeholder  Your descriptive text goes here     gt      The default text will be grey-ish and when clicked  it will dissapear

User · Answer

If you re using HTML5  you can use the placeholder attribute    lt input type  text  name  user  placeholder  Username  gt

[html] How to create a label inside an <input> element?

Examples related to html

Examples related to forms

Examples related to label

Examples related to placeholder