参考资料

1. HTML DOM 返回文档中第一个表单的名字
2. HTML DOM对单个单元格的内容水平对齐
3. HTML DOM改变下拉列表中被选中的选项的文本
4. HTML DOM 返回一个iframe中的frameborder属性的值
5. HTML DOM 导航节点关系
6. HTML DOM将下拉列表变成多行列表
7. HTML DOM 改变链接的target属性实例
8. HTML DOM 返回图像映射某个区域的坐标实例

HTML DOM 返回一个表单中所有元素的value 实例

HTML DOM 表单元素value获取

简介

通过HTML DOM可以获取表单中所有元素的value值，这在表单处理和数据收集时非常有用。

相关标签

主要涉及的表单元素标签：

• <form>

• <input>

• <textarea>

• <select>

• <option>

• <button>

基本用法

// 获取表单中所有元素的value
var form = document.getElementById("myForm");
var elements = form.elements;

for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].value);
}

完整实例

<form id="myForm">
    <input type="text" name="username" value="John">
    <input type="password" name="password" value="12345">
    <textarea name="bio">Web developer</textarea>
    <select name="country">
        <option value="us" selected>USA</option>
        <option value="uk">UK</option>
    </select>
    <input type="checkbox" name="subscribe" value="yes" checked>
    <input type="radio" name="gender" value="male" checked>
    <input type="radio" name="gender" value="female">
    <button type="button">Submit</button>
</form>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var form = document.getElementById("myForm");
        var elements = form.elements;
        
        for (var i = 0; i < elements.length; i++) {
            console.log(elements[i].name + ": " + elements[i].value);
        }
    });
</script>

功能说明

• form.elements 返回表单中所有控件的集合

• 对于不同类型的表单元素，value属性的含义不同：

• 文本框/文本域：返回输入的文本

• 单选/复选框：返回value属性值（如果选中）

• 下拉框：返回选中的option的value

• 按钮：通常返回value或innerText

CSS扩展

可以通过CSS为表单元素添加样式，增强用户体验：

/* 基础表单样式 */
form {
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}

/* 输入框样式 */
input[type="text"],
input[type="password"],
textarea, select {
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* 聚焦状态 */
input:focus, textarea:focus, select:focus {
    border-color: #4CAF50;
    outline: none;
}

/* 按钮样式 */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}