参考资料

1. HTML DOM 返回加载的文档的服务器域名 实例
2. HTML DOM 返回一个iframe中的frameborder属性的值
3. HTML DOM 返回加载的当前文档的URL实例
4. HTML DOM 修改
5. HTML DOM 返回一个iframe中的marginwidth属性的值
6. HTML DOM 修改 HTML 内容
7. HTML DOM 返回和设置链接的hreflang属性实例
8. HTML DOM 提交表单

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