HTML DOM Input Text Type Property



The HTML DOM Input Text type property returns/sets type of Input Text.

Syntax

Following is the syntax −

  • Returning string value
inputTextObject.type
  • Setting type to string value
inputTextObject.type = stringValue

String Values

Here, “stringValue” can be the following −

stringValue Details
email It defines that input type is email
text It defines that input type is text
radio It defines that input type is radio
tel It defines that input type is tel and a number keypad is shown for input

Example

Let us see an example of Input Text type property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Text type</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Text-type</legend>
<label for="TextSelect"></label>
<input type="text" id="TextSelect" >
<input type="button" onclick="getTypeOfInput()" value="What to enter?">
</fieldset>
</form>
<script>
   var labelSelect = document.querySelector("label");
   var inputText = document.getElementById("TextSelect");
   function getTypeOfInput() {
      labelSelect.innerHTML = ' Plain '+inputText.type+': ';
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘What to enter?’ button −

After clicking ‘What to enter?’ button −

Updated on: 2019-07-30T22:30:26+05:30

149 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements