HTML中的表单（form）用法教程

温馨提示：手机扫码可阅读当前文章!
文章简介：HTML中的表单（form）是一种非常重要的元素，可以用来收集各种信息，比如用户的输入、评论等等。表单通常包括输入框、单选按钮、复选框、下拉列表、文本域等等。它们用语法构建，让用户可以输入并提交数据。在这篇文章里，我会详细介绍HTML中表单...

HTML中的表单（form）是一种非常重要的元素，可以用来收集各种信息，比如用户的输入、评论等等。表单通常包括输入框、单选按钮、复选框、下拉列表、文本域等等。它们用语法构建，让用户可以输入并提交数据。

在这篇文章里，我会详细介绍HTML中表单的各个部分，以及如何使用表单元素来创建一个工作的表单。

一、基本结构

表单的基本结构包含以下几个部分：

1. 表单标记（form tag）

2. 输入标记（input tag）

3. 提交按钮标记（submit tag）

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

上面这个是最原始的表单结构，我们来分别介绍这三个标记。

二、表单标记（<form>标记）属性

该标记是定义表单的开始和结束位置的。"<form>"标记的属性用来告诉表单提交到的URL。这个URL是表单数据将被发送到的地址。这个属性的语法是：

<form action=”提交到的URL” method=”提交方式”>

如果您想设定提交方式，则可以使用method属性。有两种可用的提交方式：POST和GET。GET会在浏览器的历史记录留下数据，而POST则不会。这里建议使用POST，因为这是更安全的提交方式。

1. <input>标记

在表单里，input标签是最常用的标签之一。它用于收集用户的各种信息，如用户名、密码等等。常用的属性有以下几种：

1. type 属性：

type 属性定义了 input 元素的类型。常用的类型有：

text：标准单行文本输入框。

password：密码输入框，其中的字符会被屏蔽成“*”形式。

submit：提交按钮，用于提交表单数据。

radio：单选框。这个属性必须与其他单选框放在同一区域内，通过 name 属性进行分组。

checkbox：复选框。

button：自定义按钮等等。

2. name 属性：

这个属性表示 input 元素的名称。这个名称将作为表单中元素的唯一标识符，可以用于处理数据。

3. value 属性：

value 属性定义 input 元素的值。例如，对于单选按钮或复选框，value 属性定义了当选中这个元素的时候，表单提交的值。对于提交按钮，value 可以定义提交按钮上显示的文本。

4. placeholder属性：

placeholder属性为input标签提供一个占位符，在用户没有输入内容前，占位符可以帮助他们了解应该输入什么样的数据。

5. required属性：

required属性可以设置元素是否为必填项：如果用户没有填写，那么提交表单的时候浏览器会弹出警告框，要求用户填写具体内容。

<input type=”text” name=”username”>
<input type=”password” name=”password”>
<input type="submit" value="发送">

2. 提交按钮标记（submit标记）

在表单结构的最后一个标记是提交按钮，用来提交表单数据。当用户填写好表单中的信息后，点击提交按钮就可以把信息发送到服务器上了。就像下面这样：

<input type=”submit” value=”提交”>

三、一个表单的完整例子

下面是一个完整的表单例子：

<form action=”/form.php” method=”POST”>
　　<label for=”name”>Name:</label>
　　<input type=”text” id=”name” name=”user_name” placeholder=”Enter Your Name Here” required=”required”>
　　<label for=”email”>Email:</label>
　　<input type=”email” id=”email” name=”user_email” placeholder=”Enter Your Email Here” required=”required”>
　　<label for=”password”>Password:</label>
　　<input type=”password” id=”password” name=”user_password” placeholder=”Enter Your Password Here” required=”required”>
　　<button type=”submit”>Submit</button>
</form>

这段代码包含了以下部分：

1. 表单标记（<form>）

2. 一个文本输入框（input type="text"）

3. 一个邮箱输入框（input type="email"）

4. 一个密码输入框（input type="password"）

5. 提交按钮（type=”submit”）

四、常见错误

1. 忘记加name属性

一个最常见的错误就是忘记为 input 元素加 name 属性。没有 name 属性的 input 元素不会被提交到服务器，也就没有什么作用了。

2. 忘记为表单添加action属性

表单标记的 action 属性和 method 属性是必须的，因为这两个属性告诉表单数据提交到哪里以及用什么方式提交。

3. 忘记关闭标记</form>

如果您忘记了关闭 "<form>" 标记，生成的表单可能会出现一些奇怪的错误。

五、文章结论

表单是一种收集用户数据的重要工具，现在的网站几乎都使用表单。它可以为用户提供输入数据并提交数据的机会。本文详细介绍了表单的基本结构、input标记和提交按钮标记。还介绍了一个完整的表单示例和常见错误，希望可以帮助你掌握使用HTML表单的技巧，创建出一个有用的表单来。