Skip to:
Content
Pages
Categories
Search
Top
Bottom

using placeholder attribute instead of label


  • mmadden
    Participant

    @mmadden

    I’m using WordPress 3.9.2 with BuddyPress 2.0.2. I’m building a new theme and on the registration page I’d like to use the placeholder attribute instead of a label to guide users through the setup. It was easy enough to move the php into a new placeholder attribute for the input fields in the basic-details-section, but since the profile-details-section is different, there is no input field to add a placeholder attribute. How might I accomplish the same thing in the profile field (I only have the default one) that I did with the others?

Viewing 10 replies - 1 through 10 (of 10 total)

  • danbp
    Moderator

    @danbp

    Hi @mmadden,

    not sure i understand what you want to achieve. Are you creating a register page from scratch ?
    Anyway….
    Open the original BP register file (/buddypress/bp-templates/bp-legacy/buddypress/members/register.php). It contains many placeholders and conditionnals

    So, for the mandatory NAME xprofile group (the only one you use), you have line 65

    if ( bp_is_active( 'xprofile' ) ) : if ( bp_has_profile( array( 'profile_group_id' => 1, 'fetch_field_data' => false ) ) ) : while ( bp_profile_groups() ) : bp_the_profile_group();
    
    --- blah---

    Line 75 sit this placeholder do_action( 'bp_custom_profile_edit_fields_pre_visibility' ); where you can hook your additionnal information.

    Line 98 there’s another one: do_action( 'bp_custom_profile_edit_fields' ); just above this function:

    <p class="description"><?php bp_the_profile_field_description(); ?></p>

    In register.php, the section you speak about goes from line 50 to 112
    From /***** Extra Profile Details ******/ to </div><!-- #profile-details-section -->

    Of course, you can also add your own placeholder to your register template.

    Sorry if i’m wrong.


    mmadden
    Participant

    @mmadden

    Thanks for your reply! I’m not sure I explained myself very well… When I refer to “placeholder”, I mean the text that is already in the input field when the page loads. This will be a responsive them and the end goal here is to save as much space as possible on the registration form by removing the labels altogether. I need to be able to output some default text into the field that will then disappear when the user begins typing in that field.


    danbp
    Moderator

    @danbp

    Do you mean such kind of text ?

    Name (required)

    --------------------------
    |                        |
    --------------------------

    This field can be seen by: Everyone


    mmadden
    Participant

    @mmadden

    That’s the right area, but no… I mean doing something like this:

    <input type="text" placeholder="<?php _e('Username', 'buddypress'); ?> <?php _e( '(required)', 'buddypress' ); ?>" name="signup_username" id="signup_username" value="<?php bp_signup_username_value(); ?>" />

    Instead of something like this:

    <label for="signup_username"><?php _e( 'Username', 'buddypress' ); ?> <?php _e( '(required)', 'buddypress' ); ?></label>

    …only for the profile field.


    danbp
    Moderator

    @danbp

    This is actually hardcoded in the register.php, so i would be very simple to modify i guess.

    Make a copy of the original file
    /buddypress/bp-templates/bp-legacy/buddypress/members/register.php

    Add it to your child theme
    /your_child_theme/buddypress/members/register.php

    Change the HTML to your need.

    Theme Compatibility & Template Files

    >removing the labels altogether.

    Please don’t remove labels altogether, responsive design does not mean writing malformed markup contrary to the specifications, nor for that matter do the new html5 atts. placeholder text is nice but does not replace the proper use of label/control pairs.


    http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

    >The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.

    WP has a convention for hiding label text using a class something like ‘screen-reader-text’ or ‘assistive-text’ can’t recall which and adding a ruleset to position the label element off screen(not! displayed none).

    As for adding html5 atts to the additional profile field elements the only way will be if they have a filter, but think this is going to be tricky to implement.


    mmadden
    Participant

    @mmadden

    Yes, I’ve already edited the input fields within the basic-details-section div. I want to edit the input field in the profile-details-section div to match, but there is no input field in the register.php for that section. Instead there’s this:

    <div class="register-section" id="profile-details-section">
    
    					<h4><?php _e( 'Profile Details', 'buddypress' ); ?></h4>
    
    					<?php /* Use the profile field loop to render input fields for the 'base' profile field group */ ?>
    					<?php if ( bp_is_active( 'xprofile' ) ) : if ( bp_has_profile( array( 'profile_group_id' => 1, 'fetch_field_data' => false ) ) ) : while ( bp_profile_groups() ) : bp_the_profile_group(); ?>

    Is there any way to get at the input tag that gets output to the profile-details-section?


    mmadden
    Participant

    @mmadden

    That makes sense Hugo. I’ll look for a javascript/css solution. Support is pretty good for the placeholder attribute already though. I’d be willing to accept what I might lose. It would be nice to have the choice in all input fields.

    Certainly using JS is probably the easiest/sensible option here, if you know your controls should be simple enough to add the placeholder attr to them.


    mmadden
    Participant

    @mmadden

    While attempting another solution, I found a new problem. I got rid of the placeholder attribute and went back to using the label as you suggested. I positioned the label beneath the input and gave the input a transparent background. I was using the :focus and :valid states to hide and re-position the labels and inputs as needed. This worked fine on the inputs in the basic-details-section div, but the input in the profile-details-section doesn’t seem to be responding to the :focus or :valid states. I can apply regular styles, but nothing more. Can you think of any reason why that may be?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘using placeholder attribute instead of label’ is closed to new replies.
Skip to toolbar