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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。