HTML表单

HTML表单是文档的一部分，其中包含文本字段、密码字段、复选框、单选按钮、提交按钮、菜单等控件。

HTML表单有助于用户输入要发送到服务器进行处理的数据，例如姓名、电子邮件地址、密码、电话号码等。

为什么要使用HTML表单

如果您想从网站访问者那里收集一些数据，则需要HTML表单。

例如：如果用户想在网上购买一些商品，他/她必须填写表单，如送货地址和信用卡/借记卡详细信息，以便将商品发送到指定地址。

HTML表单语法

HTML表单标签

让我们看看HTML 5表单标签的列表。

HTML 5表单标签

让我们看看HTML 5表单标签的列表。

HTML <form>元素

HTML <form>元素提供了一个文档部分，用于从用户处获取输入。它提供了各种交互式控件，用于将信息提交到Web服务器，如文本字段、文本区域、密码字段等。

注意：<form>元素本身不创建表单，但它是一个容器，用于包含所有必需的表单元素，如<input>、<label>等。

语法

HTML <input>元素

HTML <input>元素是基本的表单元素。它用于创建表单字段，以获取用户输入。我们可以应用不同的输入字段来从用户那里收集不同的信息。以下示例显示了简单的文本输入。

示例

输出

HTML文本字段控件

input标签的type="text"属性创建了文本字段控件，也称为单行文本字段控件。name属性是可选的，但对于JSP、ASP、PHP等服务器端组件是必需的。

输出

注意：如果您省略'name'属性，文本字段输入将不会提交到服务器。

表单中的HTML <textarea>标签

HTML中的<textarea>标签用于在表单中插入多行文本。<textarea>的大小可以通过"rows"或"cols"属性或通过CSS来指定。

示例

输出

表单中的标签（Label）标签

在表单中有标签被认为是更好的。因为它使代码对解析器/浏览器/用户友好。

如果您单击label标签，它将聚焦于文本控件。要做到这一点，您需要在label标签中有一个for属性，该属性必须与input标签的id属性相同。

注意：与表单一起使用<label>标签是好的，虽然它是可选的，但如果您使用它，当您点击label标签时，它将提供焦点。对于触摸屏来说，它更有价值。

输出

HTML密码字段控件

在密码字段控件中，密码对用户是不可见的。

输出

HTML 5电子邮件字段控件

电子邮件字段是HTML 5中的新功能。它会验证文本是否为正确的电子邮件地址。您必须在此字段中使用@和.。

它将在浏览器中显示如下

注意：如果我们不输入正确的电子邮件，它将显示错误，如下所示：

单选按钮控件

单选按钮用于从多个选项中选择一个选项。它用于选择性别、测验问题等。

如果为所有单选按钮使用相同的名称，则一次只能选择一个单选按钮。

使用单选按钮进行多项选择时，一次只能选择一个选项。

复选框控件

复选框控件用于从给定的复选框中选择多个选项。

注意：这些与单选按钮类似，除了它可以一次选择多个选项，而单选按钮一次只能选择一个按钮，以及它的显示方式。

输出

提交按钮控件

HTML <input type="submit"> 用于在网页上添加提交按钮。当用户单击提交按钮时，表单将提交到服务器。

语法

type = submit，指定这是一个提交按钮

value属性可以是我们在网页上的按钮上写的任何内容。

这里的name属性可以省略。

示例

输出

HTML <fieldset>元素

HTML中的<fieldset>元素用于对表单的相关信息进行分组。此元素与<legend>元素一起使用，后者为分组元素提供标题。

示例

输出

HTML表单示例

以下是一个简单的注册表单示例。

输出

HTML表单示例

让我们看一个创建HTML表单的简单示例。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<form>	是的	是的	是的	是的	是的