为了网页中内容显示呈现的效果有序,我们可以借助Table这个容器将内容进行布局显示,下面将Table的使用进行简单的归纳:
1.表格的结构
<table> //表
<tr> //行
<td></td> //列
</tr>
</table>
通过Type属性来判断控件的类型,name属性来给控件命名,可以通过Name来获取控件。
下面是对控件的使用进行归纳:
2.输入框TextBox
<input type="text" name="name" />
3.密码输入框Password
<input type="password" name="pass" passchar="#"/>
4.单选按钮Radio
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
5.复选按钮CheckBox
<input type="checkbox" name="hobby" value="1"/>吃饭
<input type="checkbox" name="hobby" value="2"/>睡觉
<input type="checkbox" name="hobby" value="3"/>打豆豆
6.下拉选择框Select
<select name="edu">
<option value="1">小学及小学以下文化水平</option>
<option value="2">小学以上文化水平</option>
<option value="3">博士</option>
<option value="4">本科</option>
</select>
7.文本输入框Textarea
<textarea name="desc" width="200px" > </textarea>
8.文件浏览File
<input type="file">
9. 在前段输入的内容,可以通过JS进行正确性的判断。避免将输错数据传送到后台。这样可以提高数据处理的效率。
前段的验证数据的JS代码位置在<head></head>内,格式为:
<head>
<script type="text/javascript">
function chech(){
//对数据进行验证
}
</script>
</head>
10.验证TextBox中是否有数据输入
首先用一个变量将TextBox中的内容接受,可以用过控件的name、id接受内容:
var name=document.getElementsByName("name");//通过控件name属性,获取控件中的内容
if(name[0].value=="")
{
alert(" 名字不能为空!");
name[0].focus();
return false;//结束判断,
}
11.对选择Radio进行验证,并输出选择的内容,这里以性别为例:
var sex = document.getElementsByName("sex");
if(sex[0].checked){ //sex[]数组中第一个选中
alert("你选择了"+ sex[0].value);//弹窗输出选择的控件的值
}
else {
alert("你选择了"+ sex[1].value);
}
12.获取复选框的内容,弹窗输入复选框的选中状态
var hobby=document.getElementsByName("hobby"); //接受内容
var str="";
for(var h=0;h<hobby.length;h++){ //因为复选框中的内容放在一个数组中,所以用循环来判断
if(hobby[h].checked){ //选中
str+=hobby[h].value+'-'; //将选中的复选框的Value用-连接,存在字符串中
}
}
str=str.substring(0,str.length-1); //去除最后的'-'
alert("你选择的爱好:"+str); //将字符串弹窗输出
13.获取下拉框中选中的内容
var edu=document.getElementsByName("edu")[0];/*获取下拉框选中的内容*/(注:选中的内容将放在下拉框的第一个位置,下拉框的内容用数组来存储)
alert("你选择的学历为:"+edu.value); //弹窗输出选中的内容
14.验证的事件的响应,提交按钮Submit
验证的函数check()类型为Boolean,所以当return false,返回假时结束判断,return true,返回真是,对内容进行操作。
<input type="submit" value="提交" onclick="return check()"> //当点击提交按钮是,验证的事件开始响应,当验证的check()事假返回的是"true"即返 //回为真时,才将数据进行提交。
15.重置按钮Reset
<input type="reset" value="重置" > //按钮响应时将所有舒服的内容进行清空