HTML | DOM Input Email Object
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.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Email Object </ title > </ head > < body > < h1 > w3wiki</ h1 > < h2 >DOM Input Email Object</ h2 > E-mail: < input type = "email" id = "email" value = "careers@w3wiki.net" > < button onclick = "myBeginner()" > Click Here! </ button > < p id = "GFG" ></ p > <!-- Script to access input element with type email attribute --> < script > function myBeginner() { 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.
html
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Email Object </ title > </ head > < body > < h1 > w3wiki</ h1 > < h2 >DOM Input Email Object</ h2 > < button onclick = "myBeginner()" > Click Here! </ button > <!-- script to create input element of type email attribute --> < script > function myBeginner() { /* 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@w3wiki.net"); /* 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