制作网页中的表单并在提交时对输入的内容进行检验

来源：互联网发布：nginx ssl跳转编辑：程序博客网时间：2024/04/30 11:48

为了网页中内容显示呈现的效果有序，我们可以借助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="重置" >     //按钮响应时将所有舒服的内容进行清空