HTML DOM Input Email Object

HTMLWeb DevelopmentFront 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 −

AttributesDescription
autocompleteIt provides suggestions based on previously typed text, if set to ‘ON’
autofocusIf set to true the email field is focused upon initial page load.
defaultValueIt sets/returns the default value of an email field
disabledIt defines if an email field is disabled/enabled
formIt returns a reference of enclosing form that contains the email field
maxLengthIt returns/sets the value of maxLength attribute of an email field
multipleIt returns/sets if an email field is allowed to accept more than one email Id
nameIt defines the value of name attribute of an email field
patternIt returns/sets the value of pattern attribute of an email field
placeholderIt sets/returns a string generally used to give hints to user of what the input text will look like.
readOnlyIt defines if the email field is changeable or not
requiredIt defines if the email field is compulsory to be filled in order to submit the form
sizeIt defines the value of the size attribute of email field
typeIt returns the type of form element of an email field
valueIt 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="jkl@qwerty.com">
</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>

Output

This will produce the following output −

Before clicking ‘Confirm Email’ button −

After checking ‘Confirm Email’ button −

raja
Published on 24-Jul-2019 15:01:58
Advertisements