Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm sure you've all come across this pattern, does anyone know whether there is any documentation that can provide information on how this pattern can be used with other form elements for example a select-box and not just text input elements?

Further information about this pattern: http://bradfrostweb.com/blog/post/float-label-pattern/

enter image description here

share|improve this question
2  
It's a bit gimmicky. Call me old-fashioned by why not design the form so that there is enough room for the full-size label to sit about the fields at all time instead? –  JonW Dec 16 '13 at 13:29
1  
i understand where your coming from and maybe the old fashioned way might be best but taking into consideration this pattern i was interested in finding out more about how it can be applied to other form elements. –  Kyle McBride Dec 16 '13 at 13:32
6  
Personally I really like it, from a UX standpoint. Large, obvious prompts for input then keeping the title in place once an entry is type, unlike traditional watermarks, the users knows what the form field is for. –  DarrylGodden Dec 16 '13 at 13:38
1  
this only works if hint and label have the same text. under some circumstances this might not be the case. –  L. Möller Dec 16 '13 at 13:40
    
@DarrylGodden: The trouble is that it already looks like the fields have been filled in before anything has been written. That's one of the problems with placeholder text, so the same issue is present here with these weird floating labels. –  JonW Dec 16 '13 at 15:40
show 5 more comments

3 Answers

I have modified the Float Pattern Demo to work on a select box.

First things first, I added a State wrapper, label, and box to the HTML form with all the states in there as options. I included a default item with the text State and an empty string for its value. This way I could easily tell if it was selected vs an actual state option.

Next, I modified the CSS by putting in 2 styles. option { color: black; } and .watermark { color: #aaa }. The first one defaults the select options to black. The second one is used to change the option color to a gray, just like the watermarks on the other input elements, based on the default item being selected or not.

The last thing I had to do was modify the jQuery to hook up the select box. So the way this originally worked was that it bound a function called checkval that would toggle the visibility of the floating label and attached listeners to the keyup, focus, and blur events for all input elements.

I needed a way to hook in the select, so what I did was modify the selector to include select, so it becomes $("input, select"). The next thing I had to do was attach a specific listener for the select change event, as that's the one that gets fired when a selection has been made. Then all I had to do was write some code that would toggle off and on the watermark class I made earlier based on whether or not the currently selected item's value had a value or not. After that, it simply makes a call to the checkval function to toggle visibility on the select box's floating label.

I haven't tested it in all browsers, but seems to me that it's identical to the other floating labels and keeps the user experience consistent and clean.

Enjoy!

See working CopePen demo


HTML

<div class="field-wrapper">
  <label for="fname">First Name</label>
  <input name="fname" placeholder="First Name" />
</div>

<div class="field-wrapper">
  <label for="lname">Last Name</label>
  <input name="lname" placeholder="Last Name" />
</div>

<div class="field-wrapper">
  <label for="city">City</label>
  <input name="city" placeholder="City" />
</div>

<div class="field-wrapper">
  <label for="state">State</label>
  <select name="State" placeholder="State"> 
    <option value="" selected="selected">State</option> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option> 
    <option value="CA">California</option> 
    <option value="CO">Colorado</option> 
    <option value="CT">Connecticut</option> 
    <option value="DE">Delaware</option> 
    <option value="DC">District Of Columbia</option> 
    <option value="FL">Florida</option> 
    <option value="GA">Georgia</option> 
    <option value="HI">Hawaii</option> 
    <option value="ID">Idaho</option> 
    <option value="IL">Illinois</option> 
    <option value="IN">Indiana</option> 
    <option value="IA">Iowa</option> 
    <option value="KS">Kansas</option> 
    <option value="KY">Kentucky</option> 
    <option value="LA">Louisiana</option> 
    <option value="ME">Maine</option> 
    <option value="MD">Maryland</option> 
    <option value="MA">Massachusetts</option> 
    <option value="MI">Michigan</option> 
    <option value="MN">Minnesota</option> 
    <option value="MS">Mississippi</option> 
    <option value="MO">Missouri</option> 
    <option value="MT">Montana</option> 
    <option value="NE">Nebraska</option> 
    <option value="NV">Nevada</option> 
    <option value="NH">New Hampshire</option> 
    <option value="NJ">New Jersey</option> 
    <option value="NM">New Mexico</option> 
    <option value="NY">New York</option> 
    <option value="NC">North Carolina</option> 
    <option value="ND">North Dakota</option> 
    <option value="OH">Ohio</option> 
    <option value="OK">Oklahoma</option> 
    <option value="OR">Oregon</option> 
    <option value="PA">Pennsylvania</option> 
    <option value="RI">Rhode Island</option> 
    <option value="SC">South Carolina</option> 
    <option value="SD">South Dakota</option> 
    <option value="TN">Tennessee</option> 
    <option value="TX">Texas</option> 
    <option value="UT">Utah</option> 
    <option value="VT">Vermont</option> 
    <option value="VA">Virginia</option> 
    <option value="WA">Washington</option> 
    <option value="WV">West Virginia</option> 
    <option value="WI">Wisconsin</option> 
    <option value="WY">Wyoming</option>
  </select>
</div>



CSS

.field-wrapper 
{
  position: relative;
  margin-bottom: 20px;
}
label 
{
  position: absolute;
  top: -13px;
  left: 0;
  font-size: 11px;
  color: #aaa;
  transition: all 0.1s linear;
  opacity: 0;
  font-weight:b old;
}
label.on 
{
  color: #4481C4;
}
label.show 
{
  top: -15px;
  opacity: 1;
}
option
{
  color: black;
}
.watermark
{
  color: #aaa;
}
body 
{
  padding: 20px;
    /* the following line fixes a blink in chrome https://code.google.com/p/chromium/issues/detail?id=108025 */
  -webkit-backface-visibility: hidden;
}



JQUERY

$(function () 
{
  var onClass = "on";
  var showClass = "show";

  $("input, select")
    .bind("checkval", function () 
    {
      var label = $(this).prev("label");

      if (this.value !== "")
        label.addClass(showClass);

      else
        label.removeClass(showClass);
    })
    .on("keyup", function () 
    {
      $(this).trigger("checkval");
    })
    .on("focus", function () 
    {
      $(this).prev("label").addClass(onClass);
    })
    .on("blur", function () 
    {
        $(this).prev("label").removeClass(onClass);
    })
    .trigger("checkval");

  $("select")
    .on("change", function ()
    {
      var $this = $(this);

      if ($this.val() == "")
        $this.addClass("watermark");

      else
        $this.removeClass("watermark");

      $this.trigger("checkval");
    })
    .change();
});
share|improve this answer
1  
This is how to do it in code but doesn't discuss any of the user experience benefits / negatives of the approach, nor does it cover off how such an approach works with select boxes (the main aspect of this question). –  JonW Jan 15 at 23:47
    
@JonW - This is a direct answer to his question of how to make the pattern work with elements other than inputs, such as selects. If you view the demo, it's very easy to see the user experience, as a user yourself. That's why I linked it. I definitely can put in a description of what I did though for sure. –  Code Maverick Jan 16 at 0:37
1  
@JonW - Description has been added =D –  Code Maverick Jan 16 at 1:01
add comment

The "floating" is not the important part of the style - what you have here are two style elements:

  1. Field title only shows after field is filled

  2. Blue highlight for current field

I'm not sure how much this style actually makes the form better, but for a multiple choice field you would do the same - drop-down which has the title until an option is picked, and a small title above it which highlights in blue when the drop-down is open.

share|improve this answer
add comment

For active input elements you can have a "halo burst" appear when the select box gets focus, or, in the case of check-boxes, gets activated, etc.

share|improve this answer
    
"Halo Burst?" - could you provide some examples please –  Kyle McBride Dec 17 '13 at 9:41
    
@KyleMcBride - Most modern browsers do that on their own. Take a look in Safari, Firefox, or Chrome. If you want to handle it yourself, use box-shadow. –  Code Maverick Jan 15 at 19:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.