JavaScript基础之HTML表单事件
表单在我们网页制作中非常重要,当我们每登录一个网站时,首先要做的就是登录注册,而登录注册往往就要用到表单,课件表单在网页制作中非常重要。在这一段时间JavaScript的学习中,对JavaScript中的表单事件有了一定心得,以下是一些总结。
表单元素
表单的常用元素有:
① form:表单标签,用于收集用户的输入;
② input:text表示文本框,password密码框,radio表示单选框,只能选一个,checkbox表示复选框,可多选:
③ select:表示下拉列表:
④ textarea:表示文本域;:
⑤ button:表示按钮;
表单常见操作
① 提交表单:submint()方法;
② 重置表单:reset()方法;
表单脚本
获取表单有三种常用的方法,分别是:
① 根据form的id来获得:document.getElementById(‘yourFormId’);
② 根据form的name属性来获取:document.forms[‘yourFormName’];
③ 根据form在整个HTML文档中的from的数量位置下标来获取:document.forms[0];
注意,其中document.getElementById(’’);是最快捷方便的方法,在平时写程序的时候可以常用。
下面以一个例子来说明表单事件:实现一个表格的动态创建。
要求:表格表头内容为"编号,学号,姓名,年龄,手机号,操作",操作列包括两个按钮【添加】【删除】可以动态为这个表格添加行,也可以删除行。
下面是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
</head>
<body>
<table border="1" width="1100px" id="editTable">
<tr>
<th>编号</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>
<input type="button" value="新增" onclick="createRow()">
<input type="button" value="删除" onclick="delRow()">
</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
<script type="text/javascript">
function createRow(){
var editTable = document.getElementById("tbody");
var tr = document.createElement("tr");
var td0 = document.createElement("td");
td0.innerHTML="<input type='text' />";
var checkbox = document.createElement("input");
checkbox.type="checkbox";
checkbox.name="checkRow";
var td1 = document.createElement("td");
td1.innerHTML="<input type='text' />";
var td2 = document.createElement("td");
td2.innerHTML="<input type='text' />";
var td3 = document.createElement("td");
td3.innerHTML="<input type='text' />";
var td4 = document.createElement("td");
td4.innerHTML="<input type='text' />";
var td5 = document.createElement("td");
td5.appendChild(checkbox);
tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
editTable.appendChild(tr);
}
function delRow()
{
var editTable = document.getElementById("tbody");
if(confirm("确认删除所选?")){
var checkboxs = document.getElementsByName("checkRow");
for(var i=0;i<checkboxs.length;i++)
{
if(checkboxs[i].checked){
var n=checkboxs[i].parentNode.parentNode;
editTable.removeChild(n);
i--;
}
}
}
}
</script>
</body>
</html>
结果:
JavaScript中有关HTML表单的学习还有很多,每一步都应该仔细踏实的去做。