参考资料

1. HTML DOM 返回的主机名：图像映射的某个区域的端口 实例
2. HTML DOM 返回和设置一个iframe中的scrolling属性的值
3. HTML DOM 返回和设置链接的charset属性实例
4. HTML DOM 对iframe排版
5. HTML DOM 返回和设置链接的href属性实例
6. HTML DOM 节点列表长度
7. HTML DOM 返回一个表单中所有元素的value 实例
8. HTML DOM指定表格的frame

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。