如何解决 XHTML 1.0 Strict 中的表单操作问题

Question

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

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

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

        <form id="orderform">

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

类型的典型值为 type="text/css" 和 脚本类型为“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>

谢谢您的宝贵时间，

干杯。 杰米

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

那么您的脚本应该在 Javascript 不处理的情况下处理提交。