Creating the Form

The application is going to be made up of two parts. The first is a small form that will allow a user to enter a search term and then press a button to perform the search.

The second part will contain a repeating structure that will automatically take each photo element returned from the search, and uses it to create a reference to the actual image on the Flickr servers.

To create the search form, add the following to the body element:

  <body>
    <xf:group id="main-body">
      <xf:input ref="tags">
        <xf:label>Tags:</xf:label>
      </xf:input>
      <xf:submit>
        <xf:label>Find</xf:label>
      </xf:submit>
    </xf:group>
  </body>

This gives us a simple input control with a button next to it. We've placed the two controls inside a group mainly to make styling easier. Add the following style rules to your flickr.css file:

body
{
  font-family           : "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
  font-size             : 11px;
}

#main-body
{
  margin                : 0;
  background-color      : #eee;
  border                : 5px solid #333;
  padding               : 15px;
  display               : block;
}

Save both of your files and load flickr.html in the browser, and you should have something like this:

Screenshot of the Flickr search form