The HTML type attribute specifies the type of content or behavior of an HTML element.
Definition and Usage
➔ The type attribute can be used with the following HTML elements:
For <input> type value can be one of this type:
- text (default),
- password,
- checkbox,
- radio,
- file,
- date,
- email,
- number,
- range,
- search,
- tel,
- url,
- color,
- submit,
- reset,
- button
For External Resources and MIME types:
- type="text/javascript" for JavaScript in <script>
- type="text/css" for stylesheets in <link>
- type="text/css" for stylesheets in <style type="text/css">
- type="audio/mpeg" for MIME in <source type="video/mp4">
- type="image/jpg" for MIME in <embed type="image/jpg">
Syntax
//In HTML
<form action="/#" method="post">
Name:<input type="text" id="name" name="name"><br><br>
Email:<input type="text" id="email" name="email"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
//In Javascript
//let element = document.querySelector("#email");
//element.type = "email";
//element.setAttribute('type ', 'text');
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML type attribute Example</title>
</head>
<body>
<h3>HTML type attribute Example</h3>
<p>The type attribute specifies the type of content or behavior of an HTML element.</p>
<form action="/#" method="post">
Name:<input type="text" id="name" name="name"><br><br>
Email:<input type="text" id="email" name="email"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
<script>
//let element = document.querySelector("#email");
//element.type = "email";
//element.setAttribute('type ', 'text');
</script>
</html>
Click on the "Try it Now" button to see how it works.