Recipe 7.6. Creating a Macintosh-Styled Search Field

Problem

You want to style a search field for the Safari browser.

Solution

Use proprietary HTML extensions that are only available to the Safari browser.

Place one input element in between form element. Then set the value for the type attribute to search, as shown in Figure 7-8:

<form method="get" action="/search.php"> <div> <label for="q">Search</label> <input type="search" placeholder="keywords"  autosave="com.domain.search" results="7" name="q" />  </div> </form>

Figure 7-8. The Safari search field

Discussion

The Safari browser developers from Apple created an extension to HTML forms to allow for a more robust user interface. A browser other than Safari will render the input field like a regular text input form field that is still usable as a typical search bar.

Search field attributes

The placeholder attribute allows web developers to set the text residing in the search field. This text appears in the same way that text set for the value attribute in a text input field appears, as you see in Figure 7-9:

<label for="fmwebsite">Web Site:</label> <input type="text" name="fmwebsite" value="http://" />

Figure 7-9. The input field in the Safari browser

The difference between the placeholder attribute and the standard value attribute is that users have to manually delete the text placed in form field through the value attribute.

It is not recommended to place both a value and placeholder attribute in the same search field. This technique results in the text for the value overriding the placeholder value for Safari users. Safari users will have to manually delete the text supplied through the value attribute and thus not get the intended functionality allowed in the placeholder attribute.

The autosave attribute is a marker that allows past searches to be stored on the user's local machine. The user will be able to click on the magnifying glass icon and see past searches.

The results attribute accepts a numerical value. This numerical value represents the number of searches that will be stored on the user's local computer (see Figure 7-10).

Figure 7-10. Saved searches appear below the search field

The saved searches can appear to be placed from one site to another. For example, if one site uses the same value for autosave as another site, the same saved searches will appear on both site's search fields. This technique can be used on a set of different domains that are in a common network. The user has access to their search history and thus autosave provides a better user experience.

Best practices

The search field does not require an input button, so only use the search field in a form that has just one input field. Forms with only one input form element will accept the pressing of an enter or return key as form submission. The adding of input elements means that the browser may need the addition of a Submit button that must be activated in order to process the form.