APIs for the Internet of Things

Max Katz

Subscribe to Max Katz: eMailAlertsEmail Alerts
Get Max Katz via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Blog Feed Post

Creating input fields with HTML5 placeholder feature

(Cross-posted from the Tiggr Blog)

HTML5 introduces a handy new feature for input elements. Using placeholder attribute, you can place a slightly greyed out label inside an input field. When you click on the field and enter text, the label clears. If you delete the input, the placeholder labels appears again. Here is an example (assuming you are using HTML5 complaint browser):

HTML5 code looks like this:

<input type="text" placeholder="Enter something..."/>

You can do the same thing in Tiggr Prototype Builder or Mobile Apps Builder. Now, it involves a little trick but we will make it much simpler in the near future. Let’s say we start with a screen like this (editor view):

  1. Click the screen outside the phone area, switch to Events view
  2. Click Add Event and select Load
  3. Click the + sign to add an action and select Set HTML Attribute
  4. Component name: find the first input component. Its name should be set to something like ‘mobileinputtextX’ (unless you renamted it)
  5. Property name: placeholder
  6. Value: enter any text you want to see in inside the input
  7. Click OK
  8. Repeat the same for the second input component.
  9. Click Web Preview to view the app in Web browser
  10. To view on your phone, select Web Preview > Configure and select Anybody can view this project on the Web. The open the URL shown on your phone.

Try out this app or via QR code below:

Yes, it’s too many steps to add such functionality. It’s really just a workaround for now. We will make it possible to set any attributes from Properties view, without needing to add event and action.

Here is how it looks in a Web browser:

Read the original blog entry...

More Stories By Max Katz

Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), DZone MVB (Most Valuable Blogger), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: http://maxkatz.org and Twitter: @maxkatz.