The attached patch adds the option "Inside" for labels of text fields. When a text field is inside, the label for the field is displayed inside the field (as "value=" attribute). When a user focuses such an input field, it is automatically cleared with JavaScript, when the user blurs if he hasn't inputted anything, the value of the field again shows the label.

My code has a deficiency: The validation should refuse such fields with the default value (label), but it is not done by me. I ask you for support about how to implement such validation.

CommentFileSizeAuthor
inside.patch10.11 KBporton

Comments

samerjh’s picture

samerjh commented
Title: Showing labels inside text fields » any update on this

Any update for this issue "The validation should refuse such fields with the default value (label), but it is not done by me. I ask you for support about how to implement such validation."

skyhawk669’s picture

skyhawk669 commented

porton,

Instead of using the value of the text fields to display the label, use the 'placeholder' attribute. This has a lot of functionality already baked in. It will automatically handle removing the text when on focus and display it again on blur; it also does not cause any issue during validation as the field value stays blank. There is one drawback, IE <= 9 do not support that, but if you can live with that then it would simplify things.

For example: 

  $component['extra']['attributes']['placeholder'] = $component['name'];

  $element = array(
    '#type' => 'webform_email',
    '#title' => $filter ? _webform_filter_xss($component['name']) : $component['name'],
    '#title_display' => $component['extra']['title_display'] ? $component['extra']['title_display'] : 'before',
    '#default_value' => $filter ? _webform_filter_values($component['value'], $node) : $component['value'],
    '#required' => $component['mandatory'],
    '#weight' => $component['weight'],
    '#description' => $filter ? _webform_filter_descriptions($component['extra']['description'], $node) : $component['extra']['description'],
    '#attributes' => $component['extra']['attributes'],
quicksketch’s picture

quicksketch
he/him
commented
Title: any update on this » Showing labels inside text fields
Status: Patch (to be ported) » Fixed

This has been added through the placeholder support: #1305826: Add support for HTML5 placeholder attribute

If you want to hide the label entirely, I would suggest using BOTH a label and placeholder, then set the "Title display" option to "None", which actually just hides the label on the page, it's still there for screen-readers and accessibility software to use.

escoles’s picture

escoles commented

Automated accessibility scanners will fail a page that contains a form if the form label is hidden. So that approach won't work for cases where accessibility needs to be certified via scan results (e.g., government agencies). (I can't say whether it will work for a screen-reader.)

EDIT:
run the test page against http://cynthiasays.com/ to see if it will bass a basic Section 508 or WCAG scan.

Note also that I'm just talking about the scanners; individual agencies may have more or less stringent interpretations of the checkpoints, and the checkpoints are in some cases not strongly correlated with the reality of how visually impaired folks use the web. This is an elegant approach; I'm just offering a caveat if you're hoping it will be accessible.

Status: Fixed » Closed (fixed)

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