JavaScript/Forms

许多用户都熟悉在网页上填写表单，然后点击“提交”按钮。JavaScript 至少有两种方法可以改进这个过程：

JavaScript 可用于在将数据发送到服务器之前对其进行检查。
- JavaScript 可以预先验证数据，在用户填写表单时，在用户单击“提交”按钮之前立即捕获常见错误并提出改进建议。
- JavaScript 可以将输入的文本输入文本区域并在页面的单独区域中预呈现它，因此人们可以在单击“预览”按钮之前看到它是如何呈现和格式化的。^[1]^[2]^[3]
- JavaScript 可以提供输入到文本区域的文本的实时字数或字符数。^[4]^[5]^[6]^[7]
有时，网站会进行仅涉及少量数据的“在线”计算并将结果返回给用户。在这种情况下，JavaScript 可以拦截“提交”按钮，在浏览器本地进行整个计算。用户或多或少地立即获得结果，而不是等待他输入的数据被发送到服务器，等待服务器处理该数据，然后等待数据从服务器返回。

许多人建议让残障人士和关闭 JavaScript 的人可以访问所有内容。一种方法是从标准 HTML 表单开始，然后添加不显眼的 JavaScript 以改善启用 JavaScript 的用户的用户体验。系统应该优雅地降级，保持所有内容可用（并在必要时验证用户数据），无论任何或所有 JavaScript 是否成功运行。

进一步阅读

JavaScript/Working With Files mentions one use of HTML forms
HyperText Markup Language/Forms explains how to write "plain" forms without JavaScript.

参考文献

↑ "How can I display the HTML content of a Text Area within a div as HTML content and not text?"
↑ Andrey Fedoseev. "jQuery plugin to add realtime preview panel to text areas, similar to StackOverflow edit interface"
↑ Guillaume DE LA RUE. "A Markdown live editor in JS".
↑ Sacha Schmid. JavaScript word count
↑ Drew Schrauf. "JavaScript Wordcount That Works".
↑ "JavaScript word-count for any given DOM element"
↑ Jake Rocheleau. "Building a Live Text area Character Count Limit with CSS3 and jQuery"

[1] "How can I display the HTML content of a Text Area within a div as HTML content and not text?"

[2] Andrey Fedoseev. "jQuery plugin to add realtime preview panel to text areas, similar to StackOverflow edit interface"

[3] Guillaume DE LA RUE. "A Markdown live editor in JS".

[4] Sacha Schmid. JavaScript word count

[5] Drew Schrauf. "JavaScript Wordcount That Works".

[6] "JavaScript word-count for any given DOM element"

[7] Jake Rocheleau. "Building a Live Text area Character Count Limit with CSS3 and jQuery"

[1]

[2]

[3]

[4]

[5]

[6]

[7]