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;
}