HTML DOM表单集合

HTML DOM表单集合

HTML DOM表单集合是通过JavaScript所创建的一组表单对象的集合，通过该集合我们可以对表单进行各种操作，例如获取用户输入数据、改变表单元素的属性值、向服务器发送表单数据等等。

在HTML DOM中使用form元素来表示表单，每一个form元素都有一个对应的JavaScript对象，通过该对象可以访问表单中所包含的所有表单元素，例如input、textarea、select等等。

访问表单集合

要想访问表单集合中的表单元素，我们首先需要获取表单对象。在HTML DOM中，我们可以通过getElementById()方法或者通过表单name属性来获取表单对象。

<form id="myForm">
    <input type="text" name="username">
    <input type="password" name="password">
</form>
<script>
    // 通过getElementById()方法获取表单对象
    var myForm = document.getElementById("myForm");
    // 通过表单name属性获取表单对象
    var myForm = document.forms["myForm"];
</script>

访问表单元素

通过访问表单对象，我们可以访问到表单中的所有元素，包括input、textarea、select等等。对于每一个表单元素，都有一个对应的JavaScript对象，我们可以通过该对象来访问和操作元素的属性以及方法。

<form id="myForm">
    <input type="text" name="username">
    <input type="password" name="password">
</form>
<script>
    var myForm = document.getElementById("myForm");
    // 获取表单中的第一个表单元素
    var firstElement = myForm.elements[0];
    // 获取表单中的指定名称的表单元素
    var usernameElement = myForm.elements["username"];
    // 访问表单元素的属性
    var value = usernameElement.value;
    usernameElement.disabled = true;
    // 调用表单元素的方法
    usernameElement.focus();
</script>

访问表单数据

在表单提交到服务器之前，我们可以通过JavaScript来获取用户在表单中输入的数据。通过访问表单元素的value属性，我们可以获取到用户在表单中输入的值。

<form id="myForm">
    <input type="text" name="username">
    <input type="password" name="password">
</form>
<script>
    var myForm = document.getElementById("myForm");
    // 获取表单中的数据
    var username = myForm.elements["username"].value;
    var password = myForm.elements["password"].value;
</script>

如果表单中有多个相同名称的输入框，例如多个复选框或单选按钮，那么我们可以通过遍历表单元素来获取选中的值。

<form id="myForm">
    <input type="checkbox" name="hobby" value="1"> 篮球
    <input type="checkbox" name="hobby" value="2"> 足球
    <input type="checkbox" name="hobby" value="3"> 乒乓球
</form>
<script>
    var myForm = document.getElementById("myForm");
    // 获取选中的复选框
    var hobbies = [];
    var checkboxList = myForm.elements["hobby"];
    for (var i = 0; i < checkboxList.length; i++) {
        if (checkboxList[i].checked) {
            hobbies.push(checkboxList[i].value);
        }
    }
</script>

添加和删除表单元素

在表单中，我们可以通过JavaScript来动态添加和删除表单元素，例如添加一组文本框或删除一组多选框。

<form id="myForm">
    <div id="inputList">
        <input type="text" name="input1">
    </div>
    
    <input type="button" value="添加" onclick=addInput()">
    <input type="button" value="删除" onclick=deleteInput()">
</form>
<script>
    var inputList = document.getElementById("inputList");
    // 添加一个文本框
    function addInput() {
        var input = document.createElement("input");
        input.type = "text";
        input.name = "input2";
        inputList.appendChild(input);
    }
    // 删除最后一个文本框
    function deleteInput() {
        var inputs = inputList.getElementsByTagName("input");
        if (inputs.length > 1) {
            inputList.removeChild(inputs[inputs.length - 1]);
        }
    }
</script>

表单验证

在提交表单数据到服务器之前，我们经常需要对用户输入数据进行验证，以确保数据的合法性。在HTML DOM中，我们可以通过表单元素的属性和事件来完成表单验证的功能。

例如，我们可以通过表单元素的required属性来标记输入框为必填项，如果用户未输入任何内容就提交表单，那么浏览器会给出相应的提示信息。另外，我们可以通过表单元素的onblur事件来对用户输入数据进行验证，例如验证用户输入的电子邮件地址是否符合规范。

<form id="myForm">
    <input type="text" name="username" required>
    <input type="email" name="email" onblur=checkEmail()">
    <input type="submit" value="提交">
</form>
<script>
    // 验证电子邮件地址
    function checkEmail() {
        var emailElement = document.getElementsByName("email")[0];
        var email = emailElement.value;
        var regExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+$/;
        if (!regExp.test(email)) {
            emailElement.style.border = "1px solid red";
            alert("请输入正确的电子邮件地址！");
        }
        else {
            emailElement.style.border = "";
        }
    }
</script>

在上面的例子中，我们通过正则表达式来验证电子邮件地址的格式，如果输入的电子邮件地址符合规范，那么边框将变为默认颜色，否则边框将变为红色，并弹窗提示用户输入正确的电子邮件地址。

表单提交

在表单填写完成后，我们可以通过JavaScript来提交表单数据到服务器。通过表单的submit()方法，我们可以在JavaScript中手动提交表单数据。

<form id="myForm" action="http://www.example.com" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
<script>
    var myForm = document.getElementById("myForm");
    // 表单提交
    myForm.submit();
</script>

在上面的例子中，我们手动提交了一个表单，表单的action属性指定了表单提交的URL地址，method属性指定了提交表单使用的HTTP方法。在表单提交之前，浏览器会将表单中的数据打包成HTTP请求，发送到服务器。

表单重置

通过表单的reset()方法，我们可以在JavaScript中重置表单数据，将表单中的所有输入框的值重置为初始值。

<form id="myForm">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="reset" value="重置">
</form>
<script>
    var myForm = document.getElementById("myForm");
    // 表单重置
    myForm.reset();
</script>

当用户点击重置按钮时，表单中的所有输入框的值都将被重置为初始值。如果表单中有通过JavaScript动态添加的输入框，那么这些输入框的值也会被重置为初始值。

小结

在JavaScript中，我们可以通过HTML DOM表单集合来访问和操作表单中的各种元素，包括获取表单数据、添加和删除表单元素、表单验证、表单提交和表单重置等操作。通过HTML DOM表单集合，我们可以很方便地实现各种表单相关的功能，从而提高页面的交互性和用户体验。