js获取form表单输入的内容完整代码
时间: 2023-09-20 16:05:00 浏览: 34
在 HTML 中,我们需要为 form 元素添加一个 id,方便 JavaScript 获取。
HTML 代码:
```html
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
```
接下来,我们可以使用 JavaScript 获取表单中的值。
JavaScript 代码:
```js
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
console.log('Name:', name);
console.log('Email:', email);
console.log('Message:', message);
// 这里可以将表单内容提交到服务器或其他操作
});
```
在 JavaScript 中,我们首先获取表单元素,并添加一个 submit 事件监听器。当表单提交时,我们使用 `event.preventDefault()` 阻止默认行为,然后获取表单中的每个输入元素的值。最后,我们可以在控制台中打印表单值,或将其提交到服务器或执行其他操作。