HTML基础篇-16HTML之FORM表单

个表单的form标签是必不可少的，所有的表单元素都应该被他包含。一个页面可能有多个表单，就需要对每个表单的区域进行分组，防止表单信息混杂。

目标

表单的完整结构？
表单内如何进行元素分组？

表单

可以在一个网页中收集用户的数据，比如填写用户注册数据、留言板、评论等内容。

Form标签

一个表单的form标签是必不可少的，所有的表单元素都应该被他包含。

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

一个网页可能会有多个表单，就需要声明每个表单的区域，防止表单信息混杂。

以下就是两个表单，他们之间的表单元素就会跟随自己的表单。

两个表单

分组

有时候，表单内的元素过多，就需要将他们进行分类。

fieldset标签可以将表单内的相关元素分组。

legend标签是为 fieldset元素定义标题。

<fieldset >
	<legend>学生信息</legend>
	姓名：<input type="text" /><br>
	班级：<input type="text" /><br>			
</fieldset>

分组

分组完成

总结

思维导图

单的 ASP.NET 页面看上去就像普通的 HTML 页面。

Hello RUNOOB.COM

在开始学习 ASP.NET 之前，我们先来构建一个简单的 HTML 页面，该页面将在浏览器中显示 "Hello RUNOOB.COM"：

Hello RUNOOB.COM!

用 HTML 编写的 Hello RUNOOB.COM

下面的代码将以 HTML 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.htm" 的文件中，并创建一个到该文件的链接：firstpage.htm。

用 ASP.NET 编写的 Hello RUNOOB.COM

转换 HTML 页面为 ASP.NET 页面最简单的方法是，直接复制一个 HTML 文件，并把新文件的扩展名改成 .aspx 。

下面的代码将以 ASP.NET 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.aspx" 的文件中，并创建一个到该文件的链接：firstpage.aspx。

它是如何工作的？

从根本上讲，ASP.NET 页面与 HTML 是完全相同的。

HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面，服务器可以不进行任何修改，就直接发送页面给浏览器。

ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面，服务器在将结果发回给浏览器之前，需要先处理页面中的可执行代码。

上面的 ASP.NET 页面不包含任何可执行的代码，所以没有执行任何东西。在下面的实例中，我们将添加一些可执行的代码到页面中，以便演示静态 HTML 页面和动态 ASP 页面的不同之处。

经典 ASP

Active Server Pages (ASP) 已经流行很多年了。通过 ASP，可以在 HTML 页面中放置可执行代码。

之前的 ASP 版本（在 ASP.NET 之前）通常被称为经典 ASP。

ASP.NET 不完全兼容经典 ASP，但是只需要经过少量的修改，大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。

如果您想学习更多关于经典 ASP 的知识，请访问我们的 ASP 教程。

用经典 ASP 编写的动态页面

为了演示 ASP 是如何显示包含动态内容的页面，我们将向上面的实例中添加一些可执行的代码（红色字体标识）：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

<% --%> 标签内的代码是在服务器上执行的。

Response.Write 是用来向 HTML 输出流中写东西的 ASP 代码。

Now() 是一个返回服务器当前日期和时间的函数。

如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.asp" 的文件中，并创建一个到该文件的链接：dynpage.asp。

用 ASP .NET 编写的动态页面

下面的代码将以 ASP.NET 页面的形式显示实例：

<html>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.aspx" 的文件中，并创建一个到该文件的链接：dynpage.aspx。

ASP.NET 对比经典 ASP

上面的实例无法演示 ASP.NET 与经典 ASP 之间任何的不同之处。

正如最后的两个实例中，您看不出 ASP 页面和 ASP.NET 页面两者之间的不同之处。

在下一章中，您将看到服务器控件是如何让 ASP.NET 比经典 ASP 更强大的。

TML 的 form method 属性是构建灵活高效表单的关键。它决定了表单数据在提交时如何发送，为网页开发人员提供了与服务器交互的强大工具。在本文中，我们将全面探索 form method 属性的各种选项，揭秘如何根据需求选择合适的方法，打造功能强大且用户友好的表单。

form method 属性揭秘

form method 属性指定了表单数据在提交时如何发送给服务器。它有三个常见的值：get、post 和 put。了解它们之间的差异是掌握 form method 的关键。

GET 方法：GET 方法将表单数据附加在 URL 末尾，以键值对的形式发送。它适合用于获取数据或查询信息的表单，因为数据可见且可以收藏或分享链接。
POST 方法：POST 方法将表单数据包含在 HTTP 请求的正文中发送。它适合用于更新数据或提交包含敏感信息的表单，因为数据不会显示在 URL 中。
PUT 方法：PUT 方法类似于 POST，但通常用于更新服务器上的现有资源。它表明请求是幂等的，多次提交将产生相同结果。

如何选择合适的 method

根据你的需求，选择合适的 method：

如果表单用于获取数据或查询信息，且不需要发送敏感信息，可以使用 GET 方法。
如果表单用于更新数据或包含敏感信息（如密码或信用卡详情），通常使用 POST 方法。
如果表单用于更新服务器上的现有资源，并且操作是幂等的，可以使用 PUT 方法。

form method 进阶应用

form method 属性还有更多进阶应用：

文件上传：当你需要允许用户上传文件时，必须使用 POST 方法，因为 GET 方法无法处理大型二进制数据。
动态更改 method：你可以使用 JavaScript 动态地更改 form method，以根据用户行为或特定条件自定义表单行为。
安全考虑：始终对敏感数据使用 HTTPS 协议，以确保数据在传输过程中加密和安全。

提高用户体验

form method 属性在提高用户体验方面也发挥着作用：

表单按钮：根据 method 的不同，表单按钮的文本可能会有所变化。例如，GET 方法通常与 "搜索" 或 "查询" 按钮相关联，而 POST 方法通常与 "提交" 或 "发送" 按钮相关联。
即时反馈：通过将 action 指向服务器端脚本，你可以提供即时反馈，例如验证用户输入并显示错误消息，确保用户提供正确的信息。

结论：打造灵活高效的表单

HTML form method 属性为网页开发人员提供了强大的工具，用于创建灵活高效的表单。通过了解 GET、POST 和 PUT 方法的差异，以及如何根据需求选择合适的方法，你可以构建功能强大且用户友好的表单。不断探索 form method 的奥秘，让你的网页表单更加符合用户需求，提高开发效率！释放你的创造力，打造卓越的表单体验！

在线咨询

上一篇：Python爬虫入门并不难，甚至入门也很简单
下一篇：新媒体-视频剪辑制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML基础篇-16HTML之FORM表单

表单

Form标签

分组

总结

您的项目需求