HTML - form 标签

HTML <form> 标签用于通过表单收集用户在网站上的输入。表单可以包含用户的姓名、地址和电话号码，etc. HTML表单可用于收集有关用户的数据或询问他们对特定产品的意见。

语法


<form>.....</form>

属性

HTML 表单标签支持 HTML 的全局属性和事件属性。也接受下面列出的一些特定属性：

属性	属性	描述
accept-charset	character_set	指定服务器接受的字符编码列表。默认值为“unknown”。
action	URL	指定将处理表单的后端脚本的 URI/URL。
autocomplete	on off	指定窗体是否应打开或关闭自动完成功能
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	用于对表单内容进行编码的 mime 类型。
name	text	定义窗体的唯一名称。
novalidate	novalidate	指定在提交时不应验证表单。
method	get post	指定提交表单时要使用的 HTTP 方法。可能的值
target	_blank _self _parent _top	提交表单后在何处显示响应。
rel	external help license next nofollow noopener noreferrer opener prev search	指定链接资源与当前文档之间的关系

<form> 标签示例

下面的示例将说明<form> 标签的用法，在哪里，何时以及如何使用它来创建表单，每个表单都是为某些特定目的而设计的，例如登录表单，注册表单，注册表单等。

创建表单

在下面的程序中，我们使用 HTML <form> 标签来创建用户输入的表单。此表单（用户登录表单）将有三个输入字段，类型为“text”、“password”和“button”。


<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML form tag</title>
</head>
<body>
   <!--create a html form-->
   <h3>User login form</h3>
   <form> Username : <input type="text">
      <br>
      <br> Password : <input type="password">
      <br>
      <input type="button" value='Login'>
   </form>
</body>
</html>

<form> 标签的样式

让我们看一下下面的例子，我们将使用<form> 标签并将CSS应用于输入字段。


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Form</title>
        <style>
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #f0f0f0;
            }

            form {
                width: 600px;
                background-color: #fff;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            fieldset {
                border: 1px solid black;
                padding: 10px;
                margin: 0;
            }

            legend {
                font-weight: bold;
                margin-bottom: 10px;
            }

            label {
                display: block;
                margin-bottom: 5px;
            }

            input[type="text"],
            input[type="email"],
            input[type="password"],
            textarea {
                width: calc(100% - 20px);
                padding: 8px;
                margin-bottom: 10px;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            input[type="submit"] {
                padding: 10px 20px;
                margin-left: 475px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #04af2f;
            }
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    Registration Form
                </legend>
                <label>First Name</label>
                <input type="text" name="FirstName" />
                <label>Last Name</label>
                <input type="text" name="LastName" />
                <label>Email id</label>
                <input type="email" name="email"/>
                <label>Enter your password</label>
                <input type="password" name="password"/>
                <label>Confirm your password</label>
                <input type="password"name="confirmPass"/>
                <label>Address</label>
                <textarea name="address"></textarea>
                <input type="submit" value="Submit"/>
            </fieldset>
        </form>
    </body>
</html>

支持的浏览器

浏览器
<form>	Yes	Yes	Yes	Yes	Yes

打印本页