HTML DOM Input Email Object

HTML Web Development Front End Technology

The HTML DOM Input Email Object represents an input HTML element with type email.

Syntax

Following is the syntax −

Creating an <input> with type email

var emailObject = document.createElement(“input”);
emailObject.type = “email”;

Attributes

Here, “emailObject” can have the following attributes −

Attributes	Description
autocomplete	It provides suggestions based on previously typed text, if set to ‘ON’
autofocus	If set to true the email field is focused upon initial page load.
defaultValue	It sets/returns the default value of an email field
disabled	It defines if an email field is disabled/enabled
form	It returns a reference of enclosing form that contains the email field
maxLength	It returns/sets the value of maxLength attribute of an email field
multiple	It returns/sets if an email field is allowed to accept more than one email Id
name	It defines the value of name attribute of an email field
pattern	It returns/sets the value of pattern attribute of an email field
placeholder	It sets/returns a string generally used to give hints to user of what the input text will look like.
readOnly	It defines if the email field is changeable or not
required	It defines if the email field is compulsory to be filled in order to submit the form
size	It defines the value of the size attribute of email field
type	It returns the type of form element of an email field
value	It defines the value of the value attribute of an email field

Example

Let us see an example of Input Email multiple property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Email multiple</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>Email-multiple</legend>
<label for="EmailSelect">Employee Email :
<input type="email" id="EmailSelect" placeholder="[email protected]">
</label>
<input type="button" onclick="changeToMultiple()" value="Enable Multiple Emails">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
   function changeToMultiple() {
      inputEmail.multiple = true;
      divDisplay.textContent = 'Multiple Emails Allowed: '+inputEmail.multiple;
   }
</script>
</body>
</html>