type

The type attribute in HTML determines the kind of input or form control, defining its purpose and the type of data it can handle, such as text, number, or date.

type Attribute

The type attribute defines the type of an HTML element or its content.

<input>: Specifies the input type (e.g., text, password, checkbox).
<button>: Sets the button type (button, submit, reset).
<script>: Indicates the script type (text/javascript, module).
<link>: Specifies the relationship type (stylesheet, icon).

The type attribute customizes how the element behaves or is rendered.

Syntax

index.html

<element type="value">
<!-- Content -->
</element>

The type attribute provides the browser with essential details to correctly interpret and handle the element.

Example

::atter-type ::

index.html

<p>Press any key or click the mouse to get the event type.</p>
<p id="log"></p>

Button

Two button elements functioning as a submit button and a reset button within a form:

The button type attribute

index.html

<h1>The button type attribute</h1>
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="submit" value="Submit">Submit</button>
  <button type="reset" value="Reset">Reset</button>
</form>

Embed

An embedded Flash animation with a defined media type:

The embed type attribute

index.html

<h1>The embed type attribute</h1>
<embed type="image/jpg" src="pic_trulli.jpg">

Style

Utilize the type attribute to define the media type for the <style> tag:

This is a heading

This is a paragraph.

index.html

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Common Types

text: Input for a single line of text.
password: Concealed input for passwords.
email: Input designed for email addresses.
tel: Input intended for telephone numbers.
url: Input for website URLs.

Applicable to

The type attribute can be applied to the following elements:

Elements	Attribute
`<a>`	type
`<button>`	type
`<embed>`	type
`<input>`	type
`<link>`	type
`<menu>`	type
`<object>`	type
`<script>`	type
`<source>`	type
`<style>`	type

The type attribute in HTML specifies the behavior or functionality of an element, such as defining input formats or button actions. It is used with various elements like <input>, <button>, and <script> to enhance user interaction and element processing. Understanding the type attribute helps ensure proper element rendering and functionality.

translate

The translate attribute in HTML determines if the content of an element should be translated when the page is viewed in different languages. It accepts values of "yes" or "no."

value

The value attribute in HTML sets the default value for form elements, determining what is shown or sent when the page initially loads.