The Input Email Object in HTML DOM is used to represent the HTML input element with type="email" attribute. The input element with type="email" attribute can be accessed by using getElementById() method.
Syntax:
- It is used to access input email object.
document.getElementById("id");- It is used to create input element.
document.createElement("input");
Input Email Object Properties:
| Property | Description |
|---|---|
| type | This property is used to return the type of form element to the email field. |
| value | This property is used to set or return the value of the value attribute of an email field. |
| autocomplete | This property is used to set or return the value of the autocomplete attribute of an email field. |
| autofocus | This property is used to set or return whether an email field should automatically get focus when the page loads. |
| defaultValue | This property is used to set or return the default value of an email field. |
| disabled | This property is used to set or return whether an email field is disabled or not. |
| form | This property is used to return reference to the form that contains the email field. |
| list | This property is used to return a reference to the datalist that contains the email field. |
| maxLength | This property is used to set or return the value of the maxlength attribute of an email field. |
| multiple | This property is used to set or return whether a user is allowed to enter more than one email address in the email field. |
| name | This property is used to set or return the value of the name attribute of an email field. |
| pattern | This property is used to set or return the value of the pattern attribute of an email field. |
| placeholder | This property is used to set or return the value of the placeholder attribute of an email field. |
| readOnly | This property is used to set or return whether the email field is read-only or not. |
| required | This property is used to set or return whether the email field must be filled out before submitting a form. |
| size | This property is used to set or return the value of the size attribute of the email field. |
Methods
- select () : It is used to select the content of a Input Email text field.
Example 1: This example uses getElementById() method to access <input> element with type="email" attribute.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Email Object
</title>
</head>
<body>
<h1> GeeksforGeeks</h1>
<h2>DOM Input Email Object</h2>
E-mail: <input type="email" id="email"
value="careers@geeksforgeeks.org">
<button onclick="myGeeks()">
Click Here!
</button>
<p id="GFG"></p>
<!-- Script to access input element with
type email attribute -->
<script>
function myGeeks() {
var em = document.getElementById("email").value;
document.getElementById("GFG").innerHTML = em;
}
</script>
</body>
</html>
Output:
Before click on the button:
After click on the button:
Example 2: This example uses document.createElement() method to create <input> element with type="email" attribute.
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Input Email Object
</title>
</head>
<body>
<h1> GeeksforGeeks</h1>
<h2>DOM Input Email Object</h2>
<button onclick="myGeeks()">
Click Here!
</button>
<!-- script to create input element of
type email attribute -->
<script>
function myGeeks() {
/* Create an input element */
var x = document.createElement("INPUT");
/* Set the type attribute */
x.setAttribute("type", "email");
/* Set the value to type attribute */
x.setAttribute("value", " careers@geeksforgeeks.org");
/* Append the element to body tag */
document.body.appendChild(x);
}
</script>
</body>
</html>
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome 5
- Edge 12
- Firefox
- Opera 11
- Safari