In order to access this site you need to enable JavaScript!

You are here: Reference > HTML > tags > input:search

input:search element

Browser support:

Creates a search field. It contains a single-line text input control with a search history dropdown list.

All searches in this field are saved into the search history under the category specified by the autosave attribute. If the autosave attribute of two different search tags contain identical values, the searches belonging to these fields are saved under the same category of the history.

Use a unique category name (for example, the domain where the site is) to avoid the mixing of categories. If the autosave attribute is not defined, then the history dropdown list is invisible, and the searches are not saved into the history.

The results attribute specifies how many elements are visible in the dropdown list of the search history.

This control is one of the form controls.

The contents of the control can be submitted to a server if the following conditions are met:

A form element must contain the search control.
The action attribute of the container form must be set to the URL of the server.
The name attribute of the search control must be specified and non-empty.

When the container form is submitted, the name and the text content of the control are sent as a name/value pair.

If you want to see the HTML tags by categories, please visit this page.

This element cannot have a closing tag.

JavaScript page for this element: input:search.

Possible members:

Attributes

Events

Styles

Pseudos

accessKey

Sets an access key to an element.

autosave

Specifies the name of a category in the search history.

class

Sets the style class or classes that belong to the element.

contentEditable

Sets whether the contents of the object are editable.

dir

Sets the text direction as related to the lang attribute.

DISABLED

Sets the state of an object for user interaction.

Sets a unique identifier for the object.

INCREMENTAL

Specifies what type of user actions fire the onsearch event.

lang

Specifies the language of the element.

name

Sets the name of a form control that affects the contents of the message submitted to the server.

placeholder

Sets the initial value of the text field.

READONLY

Sets whether the contents of the element are changeable.

results

Specifies how many elements are visible in the dropdown list of the search history.

size

Specifies the width of a control, in characters.

style

Sets an inline style associated with an element.

tabIndex

Specifies the tabbing order for keyboard navigation using the TAB key.

title

Specifies a tooltip for an element.

type

Sets the type of the input element.

value

Specifies the initial value for a control element.

onBeforeCut

Occurs before the selection is cut from the document and provides a possibility to enable the Cut menu item.

onBeforePaste

Occurs before the contents of the clipboard are pasted into the document and provides a possibility to enable the Paste menu item.

onBlur

Occurs when an element loses focus.

onChange

Occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus.

onClick

Occurs when the user clicks on an element.

onContextMenu

Occurs when the right mouse button is clicked on an element and the context menu is shown.

onCopy

Occurs before the selection is copied to the clipboard.

onCut

Occurs before the selection is cut from the document and added to the clipboard.

onDblClick

Occurs when the user double clicks on an element.

onDrag

Occurs periodically on the source element during the drag operation.

onDragEnd

Occurs on the source element when the user has finished the drag operation.

onDragEnter

Occurs on an element when the user moves the mouse pointer into it during a drag operation.

onDragLeave

Occurs on an element when the user moves the mouse pointer out of it during a drag operation.

onDragOver

Occurs periodically on an element while the mouse pointer is over it during a drag operation.

onDragStart

Occurs on the source element when the user starts the drag operation.

onDrop

Occurs on a possible target element when the dragged data is dropped on it.

onFocus

Occurs when an element receives focus.

onInput

Occurs when the text content of an element is changed through the user interface.

onKeyDown

Occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.

onKeyPress

Occurs on an element that has the focus when a key is pressed down and occurs periodically until the key is released.

onKeyUp

Occurs on an element that has the focus when the user releases a key.

onMouseDown

Occurs when the user presses a mouse button over an element.

onMouseMove

Occurs when the user moves the mouse over the element.

onMouseOut

Occurs when the user moves the mouse pointer out of the element.

onMouseOver

Occurs when the user moves the mouse pointer into the element.

onMouseUp

Occurs when the user releases a mouse button over an element.

onMouseWheel

Occurs when the mouse wheel rolls.

onPaste

Occurs before the contents of the clipboard are pasted into the document.

onSearch

Occurs when the user presses the ENTER key or clicks the 'Erase search text' button (x) in an input:search field.

-webkit-appearance

Specifies theme rendering mode for an element. Allows you to make an element look like a standard user interface element.

-webkit-background-clip

Sets which part of background is visible.

-webkit-background-composite

Sets the compositing style for an element's background image and color.

-webkit-background-origin

Specifies how the background-position property is determined, ergo it defines the reference point that the background-image is relative to.

-webkit-background-size

Sets the size of the background image.

-webkit-border-bottom-left-radius

Sets the rounding of the lower left corner of the border.

-webkit-border-bottom-right-radius

Sets the rounding of the lower right corner of the border.

-webkit-border-horizontal-spacing

Specifies the amount of horizontal space between cells in a table.

-webkit-border-image

Specifies an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.

-webkit-border-radius

Sets the rounding of the corners of the border.

-webkit-border-top-left-radius

Sets the rounding of the upper left corner of the border.

-webkit-border-top-right-radius

Sets the rounding of the upper right corner of the border.

-webkit-border-vertical-spacing

Specifies the amount of vertical space between cells in a table.

-webkit-margin-bottom-collapse

Specifies whether the top and bottom margins can be shared between adjacent elements.

-webkit-margin-collapse

Specifies whether the top and bottom margins can be shared between adjacent elements.

-webkit-margin-start

Specifies the width of the left or the right margin, depends on the writing direction.

-webkit-margin-top-collapse

Specifies whether the top and bottom margins can be shared between adjacent elements.

-webkit-nbsp-mode

Specifies the behavior of non-breaking spaces within an element.

-webkit-padding-start

Specifies the space between an element's left or right border and its contents, depends on the writing direction.

-webkit-rtl-ordering

Specifies the default rendering mode of right-to-left and mixed left-to-right content.

-webkit-text-fill-color

Specifies the fill color of the text.

-webkit-text-security

Specifies the type of shape used to hide the letters in a password input field.

-webkit-text-stroke

Sets the color and width of the text outline.

-webkit-text-stroke-color

Sets the color of text's outline.

-webkit-text-stroke-width

Sets the width of text's outline.

-webkit-transform

Specifies the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the -moz-transform-origin property.

-webkit-transform-origin

Specifies the origin of the two-dimensional linear transformations specified with the -moz-transform property.

background

Specifies up to five separate background properties, in a shorthand form.

background-attachment

Specifies whether the background-image should scroll with the contents of the object or not.

background-color

Specifies the color to use for the background of the object.

background-image

Specifies the image to use as the background of the object.

background-position

Sets the position of the background-image within the element.

background-position-x

Specifies the horizontal coordinate of the background-image relative to the upper-left corner of the container object.

background-position-y

Specifies the vertical-coordinate of the background-image relative to the upper-left corner of the container object.

background-repeat

Specifies how to tile the background-image relative to the upper-left corner of the container object.

border

Sets up to three separate border properties, in a shorthand form.

border-bottom

Sets the color, style and width properties for the element's bottom border, in a shorthand form.

border-bottom-color

Specifies the color of the element's bottom border.

border-bottom-style

Specifies the style of the element's bottom border.

border-bottom-width

Specifies the width of the element's bottom border.

border-color

Specifies the color of the element's border.

border-left

Specifies the color, style and width properties for the element's left border, in a shorthand form.

border-left-color

Specifies the color of the element's left border.

border-left-style

Specifies the style of the element's left border.

border-left-width

Specifies the width of the element's left border.

border-right

Specifies the color, style and width properties for the element's right border, in a shorthand form.

border-right-color

Specifies the color of the element's right border.

border-right-style

Specifies the style of the element's right border.

border-right-width

Specifies the width of the element's right border.

border-style

Specifies the style of the element's border.

border-top

Specifies the color, style and width properties for the element's top border, in a shorthand form.

border-top-color

Specifies the color of the element's top border.

border-top-style

Specifies the style of the element's top border.

border-top-width

Specifies the width of the element's top border.

border-width

Specifies the width of the element's border.

bottom

Specifies the bottom coordinate of a positioned element.

clip

Specifies which part of a positioned element is visible.

color

Specifies the color of the element's text content.

cursor

Specifies the type of cursor to display for the pointing device (mouse).

direction

Specifies the text direction.

display

Specifies the element's display type.

float

Specifies the horizontal alignment of the object.

font

Specifies up to six separate font properties, in a shorthand form.

font-family

Specifies the font face for text.

font-size

Specifies the font size of the text.

font-style

Specifies whether the style of the font is normal, italic or oblique.

font-variant

Specifies a variation of the specified or default font-family.

font-weight

Specifies the font weight of the text.

height

Specifies the height of the visible area for an element.

left

Specifies the left coordinate of a positioned element.

letter-spacing

Specifies the amount of space between letters.

line-height

Specifies the distance between lines of text in a block-level element.

margin

Specifies a shorthand property for setting the top, right, bottom and left margins, in that order.

margin-bottom

Specifies the bottom margin of the object.

margin-left

Specifies the left margin of the object.

margin-right

Specifies the right margin of the object.

margin-top

Specifies the top margin of the object.

max-height

Specifies the maximum height for the visible area of an element.

max-width

Specifies the maximum width for the visible area of an element.

min-height

Specifies a minimum height for the visible area of an element.

min-width

Specifies the minimum width for the visible area of an element.

opacity

Sets the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.

outline

Specifies a shorthand form for all outline properties at once. Outline is a line around an element, but different from the border property.

outline-color

Specifies the color for the outline for an element.

outline-offset

Sets the amount of space between the outline and the border or the edge of the element.

outline-style

Specifies the style for an element's outline.

outline-width

Specifies the width for an element's outline.

overflow

Specifies what to do with content outside the element's rendering area.

overflow-x

Specifies what to do with content that exceeds the element's width.

overflow-y

Specifies what to do with content that exceeds the element's height.

padding

Specifies a shorthand property for setting the top, right, bottom and left spaces between an element's border and its contents, in that order.

padding-bottom

Specifies the space between an element's bottom border and its contents.

padding-left

Specifies the space between an element's left border and its contents.

padding-right

Specifies the space between an element's right border and its contents.

padding-top

Specifies the space between an element's top border and its contents.

page-break-after

Specifies whether a page break occurs after the object when printing.

page-break-before

Specifies whether a page break occurs before the object when printing.

position

Specifies what type of positioning method is used to render the current element.

resize

Specifies whether an element is resizable and if so, along which axis.

right

Specifies the right coordinate of a positioned element.

text-decoration

Specifies the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.

text-shadow

Specifies a comma-separated list of shadow effects to be applied to the text of the element.

text-transform

Specifies the case of the text.

top

Specifies the top coordinate of a positioned element.

unicode-bidi

Specifies whether the text should be overridden to support multiple languages in the same document. Use with the direction property.

visibility

Specifies whether the element is visible.

white-space

Specifies how spaces, tabs, and newline characters inside the element are handled.

width

Specifies the width of the visible area for an element.

word-spacing

Specifies the spacing between words.

word-wrap

Specifies whether the current line should break if the content exceeds the boundaries of its container.

z-index

Specifies the stack level of positioned objects.

zoom

Specifies the zoom level of the element's content.

Example HTML code 1:

This example illustrates the use of the search input element:

<form method="post" action="#URL#">
    Search for: <input type="search" name="search" autosave="www.dottoro.com" results="10" />
    <br /><br />
    <input type="submit" value="Search" />
</form>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

input:file
input:hidden
input:password
input:text
label
textArea

External links:

input type='search' element (Safari Reference Library)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

input:search element

Possible members:

Example HTML code 1:

Related pages:

External links:

Post Content