HTML5 Placeholder Support for ASP.NET WebForm TextBox

background:

in my last post “html5 input types support in asp.net webform” , we looked at the html5 input types support from the asp.net webform textbox control. one of the other cool features of html5 specification for a input controls is the placeholder attribute. currently there is no support for placeholders in asp.net webform textbox control. in the blog post we will see how we can achieve this by creating a custom control.

what is a placeholder:

according to the html5 living standard, the placeholder attribute is defined as follows:

the placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. a hint could be a sample value or a brief description of the expected format. the attribute if specified, must have a value that contains no line feed or carriage return characters.

here is the link to the living standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute

supporting placeholder attribute in a textbox – the idea:

if we talk from a plain html perspective, in order to support the placeholder attribute, all we need to do is to add a attribute named “placeholder” and provide a value to that attribute on a input control of type text. so here is how the html will look like:

<input  type="text" name="txtfirstname" id="txtfirstname" 
placeholder="enter first name" />

now, we know that the asp.net webform textbox control does not contain any property to support this. and all we have to do is to add an extra attribute on the input type control. so the idea to achieve this is as follows:

• create a custom web control which inherits from textbox class
• add a public property of string type and name it “placeholder”
• add attribute called placeholder during rendering of the control

we will look at the above steps one by one:

creating custom web control:

open  visual studio and create a new project of type asp.net server control. i am selecting c# as the language.

by default, the project will contain a servercontrol1 class when the project is created. we will use the same class and modify the class name to suit to our needs. first, rename the class to lets say “html5textbox”. currently the class inherits from webcontrol. instead we will inherit the class from textbox. this is because, we just want to subclass the textbox and add an attribute just before rendering the user control. by doing this we get to use all the plumbing the textbox control already provides in the control rendering. so now we have a html5textbix control which inherits from textbox. the code will look like below:

%minifyhtml38fd6b343119f51ea17a858296dc0bb23%
[defaultproperty("text")]
[toolboxdata("<{0}:html5textbox runat=server></{0}:html5textbox>")]
public class html5textbox : textbox
{
  
}

remove all other contents of the textbox for now. lets get on with the next step which is creating a placeholder attribute.

placeholder public property on the control:

now that we have the class created, we will now expose a public property to set the placeholder text. this property will be set with a value in the page where this control will be consumed. if no placeholder value is set, the control will have a default value to set. here is the property definition:

string _placeholder = "enter value";

[bindable(true)]
[category("appearance")]
[defaultvalue("enter value")]
[localizable(true)]
public string placeholder
{
  get
    {
      return _placeholder;
    }

  set
    {
      _placeholder = value;
    }
}

as you can see, we have created a backing field and a public property to expose the placeholder attribute. next we will see how to add the attribute to the textbox rendering.

add placeholder attribute while rendering textbox control:

now we have pretty much set up all the infrastructure needed to finish this. one thing we need to understand now is the rendering mechanism of a custom control. i suggest you read the following msdn article to understand this: http://msdn.microsoft.com/en-us/library/aa338806(v=vs.71).aspx . so i will not be digging deep in to the rendering mechanism as that is out of this blog post scope.

as said in the idea section, we just want to include a custom attribute during the controls output rendering. the custom control infrastructure provides us with a hook for this. it is known as addattributestorender method. here is the official definition of this method:

the addattributestorender() method gets a htmltextwriter and all we need to do is to use the addattribute() method on the writer to insert our custom attributes. here is the code to perform this action:

protected override void addattributestorender(htmltextwriter writer)
{
  writer.addattribute("placeholder", _placeholder);
  base.addattributestorender(writer);
}

as you can see we use the addattribute(string key, string value) overload to insert our custom attribute. the attribute name is “placeholder” and the value is what has been set in a page where the control is consumed.

here is the complete code of the control:

[defaultproperty("text")]
    [toolboxdata("<{0}:html5textbox runat=server></{0}:html5textbox>")]
    public class html5textbox : textbox
    {
        string _placeholder = "enter value";

        [bindable(true)]
        [category("appearance")]
        [defaultvalue("enter value")]
        [localizable(true)]
        public string placeholder
        {
            get
            {
                return _placeholder;
            }
 
            set
            {
                _placeholder = value;
            }
        }

        protected override void addattributestorender(htmltextwriter writer)
        {
            writer.addattribute("placeholder", _placeholder);
            base.addattributestorender(writer);
        } 
    }

consuming the custom control:

in any asp.net webform project, add reference to the custom web control library. then in any webform i.e. lets say in default.aspx, use the register tag to register the control first. here is the register tag code:

<%@ register  assembly="html5webformscustomcontrollibrary" 
              namespace="html5webformscustomcontrollibrary" 
              tagprefix="kashyapa" %>

next, just create the textbox control as usual. here is the code to consume the custom control we just created:

<kashyapa:html5textbox  id="txtname" 
                        runat="server" 
                        textmode="singleline" 
                        width="300px" 
                        placeholder="enter your name">
</kashyapa:html5textbox>

<kashyapa:html5textbox  id="txtemailaddress" 
                        runat="server" 
                        width="300px" 
                        textmode="email" 
                        placeholder="enter your email address">
</kashyapa:html5textbox>

and here is the output of how the control will behave when rendered:

you can see that we now have the html5 placeholder as part of asp.net webform textbox control. similarly any other attributes which is not supported currently can be customized as we did for placeholder attribute.

summary:

being a stable platform, asp.net webform technology has a lot of hooks to quickly customize the controls according to our needs. we just saw how easy it is to customize a textbox to add a html5 attribute named placeholder. in this way, even being in asp.net webform platform, we can start making our code html5 compliant.

ps: if anybody from microsoft asp.net does come across this article, i would request them to see if the html5 attributes can be pushed into the textbox control itself. that would void the above effort to support just an attribute and the textbox will be able to support out of the box the html5 attributes. we will wait and watch .