HTML DOM Input Email用法及代码示例

HTML DOM中的Input Email Object用于表示具有type =“ email”属性的HTML input元素。可以使用getElementById()方法访问具有type =“ email”属性的输入元素。

用法:

用于访问输入的电子邮件对象。
```
document.getElementById("id");
```
它用于创建输入元素。
```
document.createElement("input");
```

输入电子邮件对象属性：

属性	描述
type	此属性用于将表单元素的类型返回到电子邮件字段。
value	此属性用于设置或返回电子邮件字段的value属性的值。
autocomplete	此属性用于设置或返回电子邮件字段的自动完成属性的值。
autofocus	此属性用于设置或返回在页面加载时电子邮件字段是否应自动获得焦点。
defaultValue	此属性用于设置或返回电子邮件字段的默认值。
disabled	此属性用于设置或返回是否禁用电子邮件字段。
form	此属性用于返回对包含电子邮件字段的表单的引用。
list	此属性用于返回对包含电子邮件字段的数据列表的引用。
maxLength	此属性用于设置或返回电子邮件字段的maxlength属性值。
multiple	此属性用于设置或返回是否允许用户在电子邮件字段中输入多个电子邮件地址。
name	此属性用于设置或返回电子邮件字段的name属性的值。
pattern	此属性用于设置或返回电子邮件字段的pattern属性的值。
placeholder	此属性用于设置或返回电子邮件字段的占位符属性的值。
readOnly	此属性用于设置或返回电子邮件字段是否为只读。
required	此属性用于设置或返回在提交表单之前是否必须填写电子邮件字段。
size	此属性用于设置或返回电子邮件字段的size属性的值。

范例1：本示例使用getElementById()方法访问具有type =“ email”属性的<input>元素。

<!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>

输出：
在单击按钮之前：

单击按钮后：

范例2：本示例使用document.createElement()方法创建具有type =“ email”属性的<input>元素。

<!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>

输出：
在单击按钮之前：

单击按钮后：

相关用法

注：本文由纯净天空筛选整理自divyatagoel0709大神的英文原创作品 HTML | DOM Input Email Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。