About design and nearby

Input Box with Text Inside

Posted: March 20th, 2011 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

HTML forms are used to pass data to a server and depending on the designer’s plan they may take one look and feel or another. Usually to create a text box (or input box) coders use the <input> tag and the type attribute – “text”:

  1. <input type="text">

The common usage of the input tag looks like

Your text: 

Sometimes you need to go another way – to implement some designer’s concepts or just because you have no enough spare space at all.. Or you can find that it’s necessary according to the last design’s trends ))

For me the solution was (sure, without inline styles):

  1. <input type="text" name="#" id="#" value="your text"  style="padding-left:5px;" maxlength="50" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

Or more cute variant –
HTML:

  1. <input type="hidden" name="#" value="#" />                    
  2. <input type="text" name="#" id="Text1" value="search" maxlength="50" class="one" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
  3. <input class="sec" type="submit" value="" />

Styles:

  1. .one { width: 193px; height: 16px; float:left; padding-left:5px;}
  2. .sec { background: transparent url('/images/search_button.png') no-repeat; width: 20px; height: 20px; border: none; cursor: pointer; margin-left:19px; margin-top: 3px; top:21px; position: relative;}

Result:




Pretty easy and why don’t ))

Share Button

Check Related Posts:


Leave a Reply


  • + six = 13

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now