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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。