HTML - <form> 标签

HTML <form> 标签用于通过表单收集网站上的用户输入。表单可以包含用户的姓名、地址和电话号码等信息。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	指定链接资源与当前文档之间的关系

HTML 表单标签示例

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

创建表单

在以下程序中，我们使用 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>

表单样式

让我们看看下面的示例，我们将使用表单标签并将 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	是	是	是	是	是

html_tags_reference.htm

打印页面