Search Forms in Safari

Written by , Published On 9th September 2007.
Filed in Articles, CSS, HTML.

Search fields in SafariIt is remarkably simple to put this design feature in place on your site, and it can improve functionality greatly for those using a Mac. Whether Firefox and Internet Explorer will integrate this feature into their browsers in the future is unknown – although it is fairly unlikely.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

1
2
3
4
5

<form action="form.php" method="post">
<input type="search" name="search"
autosave="mysite-autosave" results="10" /> 
<input type="submit" value="Search" />
</form>

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

Discussion

  1. tuncgulec says:
    August 8, 2008 at 5:50 am

    its good. thanks

  2. Umer Farooq says:
    January 12, 2009 at 11:27 am

    Hello

    I have a question. I added a text box in a form for search. I added a custom rounded corner graphic as its background to make it more appealing. but when I open it in safar, it gives a blue border around the original text box in a rectangle shape. how can i avoid that?

    Thanks

    form using textbo

  3. Roy34 says:
    October 10, 2009 at 3:23 pm

    Jett Loe files this reaction to the films of Satyajit Ray. ,

Leave Your Reply