Placeholders

We can use the HTML placeholder attribute on our form elements if need be. By default, our form element titles (labels) will be rendered like this:

Normal Element Title

But if we set the element's title to be a placeholder, it will be rendered like this:

Placeholder Element Title

As you can see, this saves precious real estate and can be more UX friendly in certain cases.

How It's Done

By using hook_form_alter() we can change a form element to use a placeholder instead of a label:

/**
 * Implements hook_form_alter().
 */
function my_module_form_alter(form, form_state, form_id) {
  try {
    if (form_id == 'node_edit') {
      form.elements['title'].title_placeholder = true;
    }
  }
  catch (error) { console.log('my_module_form_alter - ' + error); }
}