本教程演示如何使用JavaScript从HTML表单的不同输入类型中，通过ID属性获取其值。
输入类型及获取值方法
1. 文本输入框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const textValue = document.getElementById(textinput).value;
2. 电子邮件输入框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const emailValue = document.getElementById(emailinput).value;
3. 密码输入框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const passwordValue = document.getElementById(passwordinput).value;
4. 数字输入框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const numberValue = document.getElementById(numberinput).value;
5. 日期输入框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const dateValue = document.getElementById(dateinput).value;
6. 单选按钮
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const radioValue = document.querySelector(input[name="radioinput"]:checked)?.value || null;
7. 复选框
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const checkboxValues = Array.from(document.querySelectorAll(input[type="checkbox"]:checked)).map(cb => cb.value);
8. 下拉菜单
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const dropdownValue = document.getElementById(dropdowninput).value;
9. 文本区域
HTML代码: (此处省略HTML代码示例，因为原文未提供)
JavaScript代码:
立即学习“Java免费学习笔记（深入）”；
1
const textareaValue = document.getElementById(textareainput).value;
示例：完整代码片段
以下代码示例展示如何从表单中获取所有输入类型的值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function submitForm() {
const formData = {
text: document.getElementById(textinput).value,
email: document.getElementById(emailinput).value,
password: document.getElementById(passwordinput).value,
number: document.getElementById(numberinput).value,
date: document.getElementById(dateinput).value,
radio: document.querySelector(input[name="radioinput"]:checked)?.value || null,
checkbox: Array.from(document.querySelectorAll(input[type="checkbox"]:checked)).map(cb => cb.value),
dropdown: document.getElementById(dropdowninput).value,
textarea: document.getElementById(textareainput).value
};
console.log(formData);
alert(表单数据已提交！请查看控制台查看详细信息。);
}
使用方法
在你的网页中添加HTML表单元素，并为每个元素设置唯一的id属性。 使用相应的JavaScript代码片段获取输入值。 收集到的数据可以用于记录或发送到服务器进行进一步处理。本教程提供了清晰的参考，帮助你使用HTML各种输入类型，并使用JavaScript收集其值。
以上就是如何在 JavaScript 中从所有类型的 HTML 输入中检索值的详细内容，更多请关注php中文网其它相关文章！