HTML表单 onsubmit

在HTML编程中，表单是最常见的组件之一。表单表示了用户需要填写的一组信息，这些信息通常会被提交到服务器端进行处理。在表单中，可以使用onsubmit属性来定义当表单被提交时所要执行的JavaScript函数。本文将会探讨HTML表单onsubmit属性的用法和示例。

onsubmit属性的语法

在HTML中，可以使用onsubmit属性来定义当表单提交时所要执行的事件处理程序。其基本语法如下：

<form onsubmit="return functionName()">

其中，functionName()是一个JavaScript函数，这个函数将会在表单提交之前被调用。如果该函数返回false，则表单将不会被提交；如果该函数返回true，则表单将会被提交。

onsubmit属性的示例

下面我们来看一个使用onsubmit属性的表单示例。该表单包含了一个输入框和一个“提交”按钮，同时也定义了一个名为validateForm()的JavaScript函数：

<form onsubmit="return validateForm()">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <input type="submit" value="提交">
</form>

<script>
function validateForm() {
    var x = document.forms["myForm"]["name"].value;
    if (x == "") {
        alert("姓名不能为空");
        return false;
    }
}
</script>

在这个示例中，validateForm()函数用于在表单被提交之前验证用户输入的数据。如果“姓名”输入框为空，该函数将会弹出一个警告窗口并返回false，阻止表单的提交。

总结

onsubmit属性是HTML表单中的一个重要属性，用于定义当表单提交时所要执行的JavaScript函数。通过使用这个属性，我们可以在表单提交之前对用户的输入进行校验，避免无效或损坏的数据被提交到服务器端。