← PreviousNext →

HTML Buttons

Learn to create interactive buttons with the <button> and <input> tags.

Buttons in HTML

Buttons are fundamental for creating interactive web pages. Let's learn how to create and use them effectively.

The <button> Element

The <button> tag is the standard and most flexible way to create a button. It can contain text and other HTML elements, making it highly customizable.

The <input type='button'> Element

The <input type="button"> tag also creates a clickable button. Its text is defined by the value attribute, and it cannot contain other HTML elements.

Purpose and Actions

Buttons are used to trigger actions, such as submitting forms, resetting fields, or executing JavaScript code via the onclick attribute.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<button type="button" onclick="alert('Hello')">Click here</button>
<input type="button" value="Click here" onclick="alert('Hello')">

Completa el código:

______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<button type="button" >'Click Me'</button>
<input type="button"  onclick="alert('Hi!')">

Practice Example: Code Editor

Create a standard button that shows an alert with the text "Hello World".

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<button type="button" onclick="alert('Hello World')">Click here</button>

Knowledge Check

Which attribute is used to specify the type of an HTML button?


← PreviousNext →

HTML Elements Reference

Intro HTML

HTML Text Formating and Tags

HTML Document Structure

HTML Headings and Title

HTML Lists

HTML Tables

HTML Forms and Input Elements

HTML Meta and SEO

HTML Media Elements

HTML Multimedia Attributes

HTML Other Elements