Clickable Button Elements

Configuring buttons for forms and generic script behaviors.

Clickable buttons in HTML are defined with the <button> tag.

Unlike visual-only inputs, <button> tags can hold complex nested HTML content (like images, SVGs, or bolded text groups) directly inside their tags.

Button Properties

type: Defaults to submit when placed within <form>. Other options: button (scripted trigger) and reset (clears fields).
disabled: Boolean attribute indicating that the user cannot interact with the button.

Example

html

<button>
Click Me
</button>

Interview questions

What is a common bug associated with omitting the 'type' attribute on a <button> inside a form?

Because the default type is `submit`, clicking a bare button inside a form will automatically attempt to submit the form and refresh the page. To trigger custom JavaScript click handlers instead, developers must explicitly write `type='button'`.

Practice

Write a button containing a search icon SVG and the word 'Search' that is disabled.

Hint: Set <button type='button' disabled> ... </button>.