HTML form用法及代碼示例

HTML中的<form>標記用於創建用戶輸入的表單。表單標簽中使用了許多元素。例如：<輸入>，<文本區域>，<按鈕>，<選擇>，<選項>，<選擇組>，<字段集>，<標簽>。

用法:

<form> Form Content... </form>

屬性：有許多與<form>標記關聯的屬性。下麵列出了其中一些：

input:用於為用戶指定輸入字段。
textarea:用於為用戶指定multi-line文本輸入字段。
button:它用於由用戶執行某種形式的操作。
label:它用於給標簽添加標簽，例如按鈕，輸入等。

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>form tag</title> 
        <style> 
            body { 
                text-align:center; 
            } 
            h1 { 
                color:green; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2><form> Tag</h2> 
        <form action="#"> 
            First name:  
            <input type="text" placeholder = "First Name"
            value=""> 
            <br><br> 
            Last name:  
            <input type="text" placeholder = "Last Name"
            value=""> 
            <br><br> 
            <input type="submit" value="Submit"> 
        </form> 
    </body> 
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>form tag</title> 
        <style> 
            input { 
                width:95%; 
                height:30px; 
            } 
            button { 
                background-color:green; 
                color:white; 
                border:none; 
                border-radius:5px; 
                font-size:14px; 
                padding:5px; 
                    
            } 
            h1 { 
                color:green; 
            } 
            h1, h2 { 
                text-align:center; 
            } 
            body { 
                width:60%; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2><form> Tag</h2> 
        <form action="#"> 
        <div class="container"> 
            <h2>Sign Up Form</h2> 
            <b>Email</b><br> 
            <input type="text" placeholder="Enter Email" 
                                  name="email" required> 
            <br><b>Username</b><br> 
            <input type="text" placeholder="Username" 
                                   name="uid" required> 
              
            <br><b>Password</b><br> 
            <input type="password" placeholder="Enter Password" 
                                            name="psw" required> 
            <br><br> 
            <button type="submit" class="registerbtn"> 
                                              Register</button> 
        </div> 
        <div class="container signin"> 
            <p>Already have an account? 
             <a href="#">Sign in.</a></p> 
        </div> 
        </form> 
    </body> 
</html>

輸出：

支持的瀏覽器：<form>標記支持的瀏覽器如下：

穀歌瀏覽器
IE瀏覽器
Firefox
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自Vishal_Khoda大神的英文原創作品 HTML | form Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。