ProblemYou want to style a search field for the Safari browser. SolutionUse 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![]() DiscussionThe 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 attributesThe 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.
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 practicesThe 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. See AlsoThe Surfin' Safari blog on the search field extension at http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890. |