HTML表单的力量

在本文中，innoQ的顾问Joy Clark声称，如果我们对HTML表单和HTTP有基本的了解，就不需要JavaScript，并解释了HTML表单的工作原理。

网络无处不在。创建网站和开发应用程序的最佳方法是什么？如果您用Google进行“网络开发”，则点击数达数百万。意见是如此之多，多样，矛盾和压倒性。

当我开始并开发自己的第一个Web应用程序时，我对Web结构的第一印象非常好。我赞赏行为与内容（HTML）和样式（CSS）的内置和强制性分离。

但是，我对如何创建Web应用程序的理解是，需要在应用程序的客户端中使用JavaScript呈现整个应用程序。然后，客户端将向服务器发送定期更新，并根据响应更新页面。这被称为单页应用程序，并且有多个框架（如React和Angular）标准化了应该如何开发它们。

我发现前端开发令人沮丧。如果我在前端更改了一件小东西，我将不得不记住在后端进行更改。如果我在后端更改了某些内容，情况也是如此。它变得越来越复杂，越来越难以记住我以前所做的事情。最终，我感到非常沮丧，以至于我退出了。从那时起，我只打算进行后端开发。

我清楚地记得我第一次在Web应用程序中呈现HTML表单。我已经为表单中的按钮定义了一个单击处理程序，但是当我单击它时，整个应用程序消失了，并且对这种看似令人恐惧的行为感到沮丧，因此我选择了Stack Overflow作为答案。

很快，我将其添加event.preventDefault();为我编写的每个单击处理程序的第一行，以使我的应用程序不会出现任何意外行为。

表格如何运作

在参加内部ROCA研讨会之前，我不了解HTML表单的默认行为是什么。对于某些人来说，这似乎是完全显而易见的，但并非对我而言，根据我的经验，我并不是唯一的人。

事实证明，HTML不仅是描述页面结构的标记语言。它还具有语义。最常见的语义元素是链接：

<a href="/example-uri">Link Text</a>

HTML中另一个非常强大的语义元素是一种形式：

<form method="get" action="/example-uri">     <input type="text" name="param1" value="Text Field">     <button type="submit">Click me!</button> </form>

表单的默认方法是GET方法。这意味着仅包含一个动作和一个提交按钮的表单在语义上与链接相同。但是，还可以使用表格来修改URL的查询字符串。如果单击上述表格，它将向GET服务器发送以下请求：GET /example-uri?param1=Text+Field

不同的输入字段提供不同的语义。复选框字段：

<input type="checkbox" name="food" value="Cheese">

只有选中复选框才会生成查询字符串?food=Cheese。

如果您使用表单中的单选按钮，则浏览器将确保最多选择一个选项。

<input type="radio" name="color" value="Red"> <input type="radio" name="color" value="Blue"> <input type="radio" name="color" value="Yellow">

选择元素执行类似的功能，但是在下拉菜单中显示值。

<select name="color"> <option value="Red"> <option value="Blue"> <option value="Yellow"> </select>

要向服务器发送元素列表时，可以给多个输入使用相同的名称。

<input type="checkbox" name="order" value="Hamburger" checked> <input type="checkbox" name="order" value="Cheese" checked> <input type="checkbox" name="order" value="Ketchup">

然后，这将被转换为查询字符串?order=Hamburger&order=Cheese，服务器将其解释为一个值列表。

因此，表单是一种向服务器指定请求的方式。提交表单后，请求将发送到服务器，服务器将处理该请求。

在服务器上处理请求

难题的第二部分是处理服务器上的请求。表单只是用于构造HTTP请求并将其发送到服务Web应用程序的Web服务器的工具。因此，要了解表单的工作原理，了解HTTP的基础很重要。

HTTP请求由方法（例如GET）和资源的URI（例如/cat.png）组成。HTTP服务器接受此请求并决定如何处理。然后，它向用户返回HTTP响应，其中包含状态码和内容。Web浏览器既知道如何发送HTTP请求（通过链接或表单），又知道如何处理从服务器返回的响应。最常见的操作是仅在浏览器窗口中呈现响应的内容。也可以使用URL重定向在应用程序中导航。

默认情况下，HTML表单仅支持GET和POSTHTTP方法。根据HTTP 1.1规范，GET请求只能用于检索资源，而不能修改资源。甲POST请求，但是，可以被用来修改现有资源。

其他HTTP方法，如PUT、DELETE和PATCH，在创建RESTful服务时非常有用。许多web框架也通过在POST请求中进行隧道处理来提供这些HTTP方法:

<form method="post" ...>     <input type="hidden" name="_method" value="put">     ... </form>

即使有了所有这些信息，可能也很难概念化如何构造这样的web应用程序。

作为一个例子，考虑一个管理电子书的web应用程序。通过执行GET /books，您将获得一个HTML页面，列出到目前为止添加的所有图书。您还可以在页面中呈现一个HTML表单，允许您使用POST /books?title= title &author=Author&nrStars=4添加一本书。添加图书之后，应用程序可能会将您重定向回/books页面，在那里您将看到呈现的新书。该页面可能包含指向特定图书的链接，GET /books/:bookid，它将显示该图书的更多信息，您可以在页面中呈现表单，以允许您更新该书(PUT /books/:bookid)或从库中删除该书(DELETE /books/:bookid)。

以这种方式编写web页面已经过时了。然而，它也经过了试验，并且在每个浏览器中都能工作，即使JavaScript不可用([1]，[2])。我也可以相对肯定地说，在可预见的未来，它将继续发挥作用。

我仍然喜欢web中固有的行为、内容和样式的分离。然而，web的行为并没有像我曾经认为的那样，使用JavaScript来定义。web应用程序的行为由为该应用程序提供服务的web服务器定义。如果我想改变应用程序的行为，我现在只需要在一个地方做。

那么我用JavaScript做什么呢?逐步增强，以改善网站呈现后的外观。有些用例需要在web浏览器中创建富客户机。如果是这种情况，那么在我们的应用程序中使用React之类的东西来满足资源的需要可能是有意义的。然而，在绝大多数情况下，如果我们对HTML表单和HTTP有基本的了解，我们根本不需要它。

创建一个没有JavaScript的网站既富有挑战性又有趣。它要求你伸展你的创造力。最重要的是，以这种方式创建网页将增加应用程序可以运行的平台，并使其更易于使用。