HTML 表单

提示

1. HTML表单基础：HTML表单通过<form>元素创建，用于收集用户输入并将其发送到服务器。
2. 表单元素类型：表单包括多种用户交互元素，如文本输入框、单选按钮、下拉菜单、复选框等，用于获取不同类型的用户输入。
3. 表单属性：<form>元素具有多个属性，包括action（定义提交操作的URL）、method（定义提交方法，如GET或POST）、target（响应显示位置）等，控制表单数据的提交和处理。

HTML 表单是文档的一部分，用于收集用户输入。用户的输入通常被发送到服务器（Web 服务器、邮件客户端等）。我们使用 HTML 的 <form> 元素在 HTML 中创建表单。

示例：HTML 表单

HTML 的 <form> 元素用于创建 HTML 表单。例如，

<form>
  <label for="firstname">名字： </label>
  <input type="text" name="firstname" required />
  <br />
  <label for="lastname">姓氏： </label>
  <input type="text" name="lastname" required />
  <br />
  <label for="email">电子邮件： </label>
  <input type="email" name="email" required />
  <br />
  <label for="password">密码： </label>
  <input type="password" name="password" required />
  <br />
  <input type="submit" value="登录！" />
</form>

浏览器输出

HTML 表单元素

表单包含用户用来发送输入的特殊交互元素。它们包括文本输入、文本区域字段、复选框、下拉菜单等。例如，

<form>
  <label for="name">姓名：</label>
  <input type="text" name="name" /><br /><br />
  <label for="sex">性别：</label>
  <input type="radio" name="sex" id="male" value="male" />
  <label for="male">男</label>
  <input type="radio" name="sex" id="female" value="female" />
  <label for="female">女</label> <br /><br />
  <label for="country">国家： </label>
  <select name="country" id="country">
    <option>选择一个选项</option>
    <option value="nepal">尼泊尔</option>
    <option value="usa">美国</option>
    <option value="australia">澳大利亚</option></select
  ><br /><br />
  <label for="message">留言：</label><br />
  <textarea name="message" id="message" cols="30" rows="4"></textarea
  ><br /><br />
  <input type="checkbox" name="newsletter" id="newsletter" />
  <label for="newsletter">订阅？</label><br /><br />
  <input type="submit" value="提交" />
</form>

浏览器输出

要了解更多关于各种表单控件的信息，请访问 HTML 表单输入。

表单属性

HTML <form> 元素包含几个用于控制数据提交的属性。它们如下：

action

action 属性定义了提交表单时要执行的操作。它通常是表单数据要发送到的服务器的 url。

<form action="/login">
  <label for="email">电子邮件：</label>
  <input type="email" name="email" /><br /><br />
  <label for="password">密码：</label>
  <input type="password" name="password" /><br /><br />
  <input type="submit" value="提交" />
</form>

在上面的示例中，当表单提交时，表单中的数据将被发送到 /login。

method

method 属性定义了提交表单时要使用的 HTTP 方法。method 属性有 3 个可能的值：

• post - 用于将数据发送到服务器以更新资源。

<form method="post">...</form>

• get：用于从指定资源请求数据。

<form method="get">...</form>

• dialog：当表单位于 <dialog> 元素内时使用此方法。使用此方法将关闭对话框并发送表单提交事件。

要了解更多关于 HTTP 方法 GET 和 POST，请访问 HTML 表单动作：POST 和 GET。

target

它指定了提交表单后接收到的响应要显示的位置。与 <a> 标签中的 target 属性类似，target 属性有四个可能的值。

• _self（默认）：将响应加载到相同的浏览器标签页中。

<form target="_self">
  <label for="firstname">输入您的名字：</label>
  <input type="text" name="firstname" />
</form>

• _blank：将响应加载到一个新的浏览器标签页中。

<form target="_blank">
  <label for="firstname">输入您的名字：</label>
  <input type="text" name="firstname" />
</form>

• _parent：加载到当前的父框架中。如果没有父框架，它将响应加载到相同的标签页中。

<form target="_parent">
  <label for="firstname">输入您的名字：</label>
  <input type="text" name="firstname" />
</form>

• _top：将响应加载到顶级框架中。如果没有父框架，它将响应加载到相同的标签页中。

<form target="_top">
  <label for="firstname">输入您的名字：</label>
  <input type="text" name="firstname" />
</form>

enctype

它指定了表单数据应该如何为请求进行编码。它仅适用于我们使用 POST 方法。

<form method="post" enctype="application/x-www-form-urlencoded"></form>

在上面的示例中，表单数据将以 x-www-form-urlencoded 格式编码（这是默认的编码格式）。

name

它指定了表单的名称。name 在 Javascript 中用于引用或访问此表单。

<form name="login_form">
  <label for="email">电子邮件：</label>
  <input type="email" name="email" /><br /><br />
  <label for="password">密码：</label>
  <input type="password" name="password" /><br /><br />
  <input type="submit" value="提交" />
</form>

上面的表单可以在 javascript 中这样访问：

document.forms['login_form']

尽管可以使用 name 在 javascript 中访问表单元素，但建议使用 id 来访问表单元素。

novalidate

如果设置了 novalidate 属性，则会跳过表单元素中的所有验证。

<form novalidate>
  <label for="email">输入您的电子邮件：</label>
  <input
    type="email"
    id="email"
    name="email

"
  /><br /><br />
  <input type="submit" />
</form>

在上面的示例中，即使我们输入了 email 字段的无效值（例如 Hi），表单也会被提交。