Only use <label> for providing a name / title to a form element [#1534602]

Went through a quick W3C validation and got an error because a label was used for markup & not to associate with a form element.

I tried to track down the space where this is inserted into the form block, but it was taking too much time:
<label for="edit-mailchimp-lists-mailchimp-1-title">My Newsletter </label>

That really should be something like:
<h3>My Newsletter</h3>

or even:
<strong>My Newsletter</strong>

This should be a simple thing to clean up to ensure that the markup is semantically correct.

Comment	File	Size	Author
#4	remove-label.patch	749 bytes	Everett Zufelt
#4

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

mgifford

he/him

English

CreditAttribution: mgifford commented 13 May 2012 at 17:37

Just ran my site through - http://validator.w3.org/nu/

And of course it complained as this isn't valid markup.

Comment #2

Everett Zufelt CreditAttribution: Everett Zufelt commented 13 May 2012 at 22:41

Title:

Labels need to be used with forms not for markup

» Only use <label> for providing a name / title to a form element

I took a look in 7.x-2.x, the string 'My Newsletter', does not exist. Can you please provide more context about where this is displayed? Are you using the mailchimp_lists sub-module? This is the only place that I find the string 'Newsletter'.

Comment #3

mgifford

he/him

English

CreditAttribution: mgifford commented 13 May 2012 at 23:57

Good example is on our home page & the subscription block - http://openconcept.ca/

I've pasted in more than is required, but the OC Newsletter label points to the div "edit-mailchimp-lists-mailchimp-1-title" which is just wrong.

<section id="block-mailchimp_lists-1" class="block block-mailchimp-lists block-even block-sidebar-second block-count-6">
  <div class="block-inner">

              <h2 class="block-title">Subscribe to OC Newsletter</h2>
        
    <div class="block-content">
      <form action="/" method="post" id="mailchimp-lists-user-subscribe-form-1" accept-charset="UTF-8"><div><div id="mailchimp-newsletter-1" class="mailchimp-newsletter-wrapper"><div id="edit-mailchimp-lists-mailchimp-1-title" class="form-item form-type-item">
  <label for="edit-mailchimp-lists-mailchimp-1-title">OC Newsletter </label>
 
<div class="description">Want to hear more from us? Sign up and we'll send you occasional notices.</div>

Comment #4

Everett Zufelt CreditAttribution: Everett Zufelt commented 14 May 2012 at 11:12

Status:

Active

» Needs review

File	Size
remove-label.patch	749 bytes

Attached patch removes the label an a couple of unnecessary t() calls. I haven't tested this code, but it should work fine.

Comment #5

mgifford

he/him

English

CreditAttribution: mgifford commented 14 May 2012 at 12:49

This works, but think that '#description' => check_plain($list->description), should be bold. It should have some markup which differentiates it from plain text (just as the label tag did).

I can confirm that this works though to remove the label and I've applied it to the site above.