Motivation

A new FAPI attribute was added for HTML5's placeholder attribute in #1174694: Allow FAPI usage of the placeholder attribute. Documentation needs to be added to the FAPI doc page for Drupal 8.

Remaining tasks

  • Add row to the Form Controls table
  • Add to the properties list for each element it is enabled for
  • Add a listing in properties
CommentFileSizeAuthor
#6 1312016-fapi-placeholder-6.patch5.95 KBlinclark
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Anonymous’s picture

Assigned: Unassigned » linclark

I will work on creating the HTML that needs to be added to the page, then someone with privileges to update the FAPI page can just add it.

Anonymous’s picture

Row for form controls table:

#type checkbox checkboxes date fieldset file machine_name managed_file password password_confirm radio radios select tableselect text_format textarea textfield vertical_tabs weight
#placeholder - - - - - - - X - - - - - - X X - - #placeholder
    <tr>
      <th scope="row"><a href="#placeholder">#placeholder</a></th>
<!-- checkbox --> <td class="x">-</td>
<!-- checkboxes --> <td class="x">-</td>
<!-- date -->  <td class="x">-</td>
<!-- fieldset --><td class="x">-</td>
<!-- file --> <td class="x">-</td>
<!-- machine_name --> <td class="x">-</td>
<!-- managed_file --> <td class="x">-</td>
<!-- password --><td class="x"><strong>X</strong></td>
<!-- password_confirm --> <td class="x">-</td>
<!-- radio --> <td class="x">-</td>
<!-- radios --> <td class="x">-</td>
<!-- select --> <td class="x">-</td>
<!-- tableselect --> <td class="x">-</td>
<!-- text_format --> <td class="x">-</td>
<!-- textarea --> <td class="x"><strong>X</strong></td>
<!-- textfield --> <td class="x"><strong>X</strong></td>
<!-- vertical_tabs --> <td class="x">-</td>
<!-- weight --> <td class="x">-</td>
      <th scope="row"><a href="#placeholder">#placeholder</a></th></th>
    </tr>
Anonymous’s picture

Issue summary: View changes

Removed Special Elements task.

Anonymous’s picture

Elements

Add the #placeholder element to the list of properties for each element.

#password:

Properties: #access, #after_build, #ajax, #attributes, #description, #disabled, #element_validate, #field_prefix, #field_suffix, #maxlength (default: 128), #parents, #placeholder, #post_render, #prefix, #pre_render, #process, #required, #size (default: 60), #states, #suffix, #theme, #theme_wrappers, #title, #title_display, #tree, #type, #weight

<p><strong>Properties</strong>: <a href="#access">#access</a>, <a href="#after_build">#after_build</a>, <a href="#ajax">#ajax</a>, <a href="#attributes">#attributes</a>, <a href="#description">#description</a>, <a href="#disabled">#disabled</a>, <a href="#element_validate">#element_validate</a>, <a href="#field_prefix">#field_prefix</a>, <a href="#field_suffix">#field_suffix</a>, <a href="#maxlength"><strong>#maxlength</strong></a> (default: 128), <a href="#parents">#parents</a>, <a href="#placeholder">#placeholder</a>, <a href="#post_render">#post_render</a>, <a href="#prefix">#prefix</a>, <a href="#pre_render">#pre_render</a>, <a href="#process">#process</a>, <a href="#required">#required</a>, <a href="#size"><strong>#size</strong></a> (default: 60), <a href="#states">#states</a>, <a href="#suffix">#suffix</a>, <a href="#theme">#theme</a>, <a href="#theme_wrappers">#theme_wrappers</a>, <a href="#title"><strong>#title</strong></a>, <a href="#title_display">#title_display</a>, <a href="#tree">#tree</a>, <a href="#type"><strong>#type</strong></a>, <a href="#weightval">#weight</a></p>

#textarea

Properties: #access, #after_build, #ajax, #attributes, #cols (default: 60), #default_value, #description, #disabled, #element_validate, #field_prefix, #field_suffix, #parents, #placeholder, #post_render, #prefix, #pre_render, #process, #required, #resizable (default: TRUE), #rows (default: 5), #states, #suffix, #theme, #theme_wrappers, #title, #title_display, #tree, #type, #weight

<p><strong>Properties</strong>: <a href="#access">#access</a>, <a href="#after_build">#after_build</a>, <a href="#ajax">#ajax</a>, <a href="#attributes">#attributes</a>, <a href="#cols"><strong>#cols</strong></a> (default: 60), <a href="#default_value" <strong>#default_value</strong></a>, <a href="#description">#description</a>, <a href="#disabled">#disabled</a>, <a href="#element_validate">#element_validate</a>, <a href="#field_prefix">#field_prefix</a>, <a href="#field_suffix">#field_suffix</a>, <a href="#parents">#parents</a>, <a href="#placeholder">#placeholder</a>, <a href="#post_render">#post_render</a>, <a href="#prefix">#prefix</a>, <a href="#pre_render">#pre_render</a>, <a href="#process">#process</a>, <a href="#required">#required</a>, <a href="#resizable">#resizable</a> (default: TRUE), <a href="#rows"><strong>#rows</strong></a> (default: 5), <a href="#states">#states</a>, <a href="#suffix">#suffix</a>, <a href="#theme">#theme</a>, <a href="#theme_wrappers">#theme_wrappers</a>, <a href="#title"><strong>#title</strong></a>, <a href="#title_display">#title_display</a>, <a href="#tree">#tree</a>, <a href="#type"><strong>#type</strong></a>, <a href="#weightval">#weight</a></p>

#textfield

Properties: #access, #after_build, #ajax, #attributes, #autocomplete_path (default: FALSE), #default_value, #description, #disabled, #element_validate, #field_prefix, #field_suffix, #maxlength (default: 128), #parents, #placeholder, #post_render, #prefix, #pre_render, #process, #required, #size (default: 60), #states, #suffix, #text_format, #theme, #theme_wrappers, #title, #title_display, #tree, #type, #weight

<p><strong>Properties</strong>: <a href="#access">#access</a>, <a href="#after_build">#after_build</a>, <a href="#ajax">#ajax</a>, <a href="#attributes">#attributes</a>, <a href="#autocomplete_path">#autocomplete_path</a> (default: FALSE), <a href="#default_value"><strong>#default_value</strong></a>, <a href="#description">#description</a>, <a href="#disabled">#disabled</a>, <a href="#element_validate">#element_validate</a>, <a href="#field_prefix">#field_prefix</a>, <a href="#field_suffix">#field_suffix</a>, <a href="#maxlength"><strong>#maxlength</strong></a> (default: 128), <a href="#parents">#parents</a>, <a href="#placeholder">#placeholder</a>, <a href="#post_render">#post_render</a>, <a href="#prefix">#prefix</a>, <a href="#pre_render">#pre_render</a>, <a href="#process">#process</a>, <a href="#required">#required</a>, <a href="#size"><strong>#size</strong></a> (default: 60), <a href="#states">#states</a>, <a href="#suffix">#suffix</a>, <a href="#text_format">#text_format</a>, <a href="#theme">#theme</a>, <a href="#theme_wrappers">#theme_wrappers</a>, <a href="#title"><strong>#title</strong></a>, <a href="#title_display">#title_display</a>, <a href="#tree">#tree</a>, <a href="#type"><strong>#type</strong></a>, <a href="#weightval">#weight</a></p>

Anonymous’s picture

#placeholder

Used by: password, textarea, textfield

Description: Defines a short prompt or example text to be displayed in an input field using HTML5's placeholder attribute.

Values: Text, enclosed in the t() translation function.

Usage example:

        <?php
          $form['password'] = array(
            '#type' => 'password',
            '#title' => t('Password'),
            '#placeholder' => t('Enter password'),
          );
        ?>
  

Make sure to replace the &lt; in the code tag when placing the html below.

<h3><a name="placeholder" id="placeholder">#placeholder</a></h3>

<p><strong>Used by</strong>:  <a href="#password">password</a>, <a href="#textarea">textarea</a>, <a href="#textfield">textfield</a></p>

<p><strong>Description</strong>: Defines a short prompt or example text to be displayed in an input field using HTML5's placeholder attribute.</p>

<p><strong>Values</strong>: Text, enclosed in the t() translation function.</p>

<p><strong>Usage example</strong>:</p>
<div class="codeblock"> 
  <code>
        <?php
          $form['password'] = array(
            '#type' => 'password',
            '#title' => t('Password'),
            '#placeholder' => t('Enter password'),
          );
        ?>
  &lt;/code>
</div>
Anonymous’s picture

Status: Active » Needs review

These are ready to be placed in the FAPI documentation.

  • Comment #2 takes care of 1) Add row to the Form Controls table
  • Comment #3 takes care of 2) Add to the properties list for each element it is enabled for
  • Comment #4 takes care of 3) Add a listing in properties
Anonymous’s picture

Issue summary: View changes

Added properties task.

Anonymous’s picture

Issue tags: +FAPI reference
FileSize
5.95 KB

Ok, someone pointed me to the fact that we can actually write patches for FAPI, so here we go :)

jn2’s picture

Status: Needs review » Fixed

Patch is applied. Thanks for the patch, linclark. Makes it much easier to update.

I expect there to be a lot more of these. One thing to look out for if you do another one is the td tag's class="x" in the table. It only applies to cells with the X, and in your patch, it was in every cell. I deleted the unnecessary ones. Not sure it really affects how it looks with the current CSS, but it might in the future.

jn2’s picture

Status: Fixed » Needs work

The last patch had some HTML errors, and now there's a gray background on the whole page that shouldn't be there. Trying to fix.

jn2’s picture

Status: Needs work » Fixed

That fixed it.

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary: View changes

Added version.