Javascript Reference - HTML DOM Input Email Object

The Input Email object represents an HTML <input> element with type="email".

Input Email Object Properties

Property	Description
autocomplete	Sets or gets the autocomplete attribute of an email field
autofocus	Sets or gets whether an email field can automatically get focus when the page loads
defaultValue	Sets or gets the default value of an email field
disabled	Disable or enable an email field
form	Get the form that contains the email field
list	Get the datalist that contains the email field
maxLength	Sets or gets the maxlength attribute of an email field
multiple	Sets or gets whether more than one email address can be entered in the email field
name	Sets or gets the name attribute of an email field
pattern	Sets or gets the pattern attribute of an email field
placeholder	Sets or gets the placeholder attribute of an email field
readOnly	Sets or gets whether the email field is read-only
required	Sets or gets whether the email field must be filled before submitting a form
size	Sets or gets the size attribute of the email field
type	Get the type of the email field
value	Sets or gets the value attribute of an email field

Standard Properties and Events

The Input Email object supports the standard properties and events.

Example

We can access an <input> element with type="email" by using getElementById().


<!DOCTYPE html>
<html>
<body>
E-mail: <input type="email" id="myEmail" value="abc@example.com">
<button onclick="myFunction()">test</button>
<!--  w w w.  j a  va 2 s  .  c  om-->
<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myEmail").value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create an <input> element with type="email" by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<!--from  ww  w.  j  ava  2 s  .  co m-->

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "email");
    x.setAttribute("value", "abc@example.com");
    document.body.appendChild(x);
}
</script>

</body>
</html>

The code above is rendered as follows: