下面是“JS document form表单元素操作完整示例”的完整攻略,包括两条示例说明:
JS document form表单元素操作完整示例
示例1:获取表单中的数据并进行处理
1. 编写HTML代码
首先,我们需要编写HTML代码,创建一个表单,并添加表单元素:输入框、单选按钮、复选框、下拉框。
<form id="myForm">
<label>姓名:</label>
<input type="text" id="name" name="name" required>
<br>
<label>性别:</label>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<label>爱好:</label>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动
<br>
<label>城市:</label>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<br>
<button type="button" onclick="getData()">提交</button>
</form>
2. 编写JavaScript代码
接下来,我们需要编写JavaScript代码,通过document.forms
属性获取到表单元素,然后处理表单数据并输出到控制台。
<script>
function getData() {
var form = document.forms["myForm"];
var name = form.elements["name"].value;
var gender = form.elements["gender"].value;
var hobby = [];
for (var i = 0; i < form.elements["hobby"].length; i++) {
if (form.elements["hobby"][i].checked) {
hobby.push(form.elements["hobby"][i].value);
}
}
var city = form.elements["city"].value;
console.log("姓名:" + name);
console.log("性别:" + gender);
console.log("爱好:" + hobby.join(", "));
console.log("城市:" + city);
}
</script>
3. 运行程序
最后,我们运行程序,输入数据并提交,然后在浏览器控制台中查看输出结果。例如,我们输入姓名为“张三”,选择性别为“男”,选择爱好为“阅读”和“音乐”,选择城市为“上海”,则输出结果如下:
姓名:张三
性别:male
爱好:阅读, 音乐
城市:shanghai
示例2:动态修改表单元素
1. 编写HTML代码
同样地,我们需要编写HTML代码,创建一个包含文本框、按钮和图片预览区域的表单。
<form>
<label>选择图片:</label>
<input type="file" id="imageInput" onchange="previewImage()">
<br>
<img id="imagePreview">
<br>
<button type="button" onclick="disableInput()">禁用输入框</button>
<button type="button" onclick="enableInput()">启用输入框</button>
</form>
2. 编写JavaScript代码
接下来,我们需要编写JavaScript代码,用于动态修改表单元素。具体来说,我们实现以下功能:
- 预览选择的图片
- 禁用输入框
- 启用输入框
<script>
function previewImage() {
var input = document.getElementById("imageInput");
var preview = document.getElementById("imagePreview");
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
preview.setAttribute("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
} else {
preview.setAttribute("src", "");
}
}
function disableInput() {
document.getElementById("imageInput").disabled = true;
}
function enableInput() {
document.getElementById("imageInput").disabled = false;
}
</script>
3. 运行程序
最后,我们运行程序,在表单中选择图片并点击“预览”按钮,可看到选择的图片在预览区域内显示。接着,我们点击“禁用输入框”按钮,再次选择图片后会发现输入框已经被禁用,不能再次选择图片;而点击“启用输入框”按钮后,输入框重新变为可用状态,可以再次选择图片。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS document form表单元素操作完整示例 - Python技术站