如何修复 XHTML 1.0 Strict 中的表单操作问题答案

【问题标题】：How to fix form action issue in XHTML 1.0 Strict如何修复 XHTML 1.0 Strict 中的表单操作问题
【发布时间】：2011-12-07 14:07:47
【问题描述】：

我在验证我的代码是否符合 XHTML 1.0 Strict 时遇到了问题。

我一直在使用w.3 validator 来尝试验证我的页面。它告诉我

第 112 行，第 24 列：未指定必需属性“action”

        <form id="orderform">

上面给出的属性是您使用过的元素所必需的，但你忽略了它。例如，在大多数 HTML 和 XHTML 文档中在“脚本”元素上需要“类型”属性，并且 “img”元素需要“alt”属性。

type 的典型值为 type="text/css" for and type="text/javascript" 用于脚本。

我对 XHMTL 和 CSS 还比较陌生，此时我也在学习 Javascript，我在 Google 上进行了搜索，发现很多人都在谈论使用 Javascript 行来修复错误，但它们都不够清楚。有没有人可以给我一个清楚的解释？

这是我的 XHTML 代码..

    <form id="orderform">
<div class="field">
    Name:
    <input type="text" id="name" name="name" value="" />
</div>
<div class="field">
    # of Home shirts:
    <input type="text" id="homeshirt" name="home" value="" onchange="updateOrder();" />
</div>
<div class="field">
    # of Away shirts:
    <input type="text" id="awayshirt" name="away" value="" onchange="updateOrder();" />
</div>
<div class="field">
    Date of collection:
    <input type="text" id="date" name="date" value="" />
</div>
<div class="field">
    Subtotal:
    <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
</div>
<div class="field">
    Tax:
    <input type="text" id="tax" name="tax" value="" readonly="readonly" />
</div>
<div class="field">
    Total:
    <input type="text" id="total" name="total" value="" readonly="readonly" />
</div>
<div id="button">
    <input type="button" class="button" value="Place Order" onclick="placeOrder(this.form);" />
</div>
</form>

还有我的 Javascript...

<script type="text/javascript">
        function updateOrder() {
            const TAXRATE = 0.0925;
            const SHIRTPRICE = 39.99;
            var numHomeShirt = parseInt(document.getElementById("homeshirt").value);
            var numAwayShirt = parseInt(document.getElementById("awayshirt").value);
            if (isNaN(numHomeShirt))
                numHomeShirt = 0;
            if (isNaN(numAwayShirt))
                numAwayShirt = 0;
            var subTotal = (numHomeShirt + numAwayShirt) * SHIRTPRICE;
            var tax = subTotal * TAXRATE;
            var total = subTotal + tax;
            document.getElementById("subtotal").value = "£" + subTotal.toFixed(2);
            document.getElementById("tax").value = "£" + tax.toFixed(2);
            document.getElementById("total").value = "£" + total.toFixed(2);
        }

        function placeOrder(form) {
            if (document.getElementById("name").value == "")
                alert("I'm sorry but you need to provide a name to print on the shirt.");

            else if (document.getElementById("date").value == "")
                alert ("I'm sorry but you must provide a date you can collect your shirt(s).");

        }
    </script>

感谢您的宝贵时间，

干杯。杰米

【问题讨论】：

只添加空动作怎么样？ <form id="orderform" action="">
是的。添加action="" 即可。另外，一个小笔记。运行此验证器时，“程序”不会在您的位置执行任何 Javascript，因此，对此的 js 解决方法将不起作用。
谢谢你们，空操作现在允许我的页面验证，非常感谢。
如果您是 Web 开发新手，您可能想要beware of XHTML，因为从几乎 2012 年的角度来看，这基本上是一个失败的实验。当然，不是每个人都这么认为，所以你应该自己研究一下。

标签： javascript css validation xhtml-1.0-strict

【解决方案1】：

也许这太明显了，我遗漏了一些东西，但为什么不直接将 action 属性添加到表单中呢？

【讨论】：

【解决方案2】：

不需要javascript。如果您使用的是 php，只需添加以下代码：

<form id="your_id" action="<?=$_SERVER['PHP_SELF']?>">

基本上，此代码会将操作设置为同一页面。

或其他人建议，只需添加一个空操作:)

【讨论】：

【解决方案3】：

要修复特定的验证错误，您需要在表单元素中包含 action 属性。

<form id="orderform" action="">

看起来您正在使用 JavaScript 来处理表单提交，因此您应该能够将操作留空，否则给它一个与表单提交 php 脚本相关的值。

【讨论】：

【解决方案4】：

XHTML 要求您的表单包含一个在按下提交按钮时将被调用的操作（即服务器上的另一个脚本）。

目前您仅在 Javascript 中实现该行为 - 如果禁用此功能，则不会发生任何事情。理想情况下，您应该指向一个脚本，通常与生成表单的 PHP 脚本相同，以处理提交按钮的按下：

<form id="your_id" action="<?=$_SERVER['PHP_SELF']?>">

那么你的脚本应该在 Javascript 没有处理的情况下处理提交。

【讨论】：