首页技术为王JavascriptJS入门到精通 第14章 表单对象

JS入门到精通 第14章 表单对象

分类Javascript时间2026-06-29 17:26:12发布信义之树浏览88
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title>验证表单内容是否为空</title>...

一、练习

1. 练习1

  （1）源代码 

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
<title>验证表单内容是否为空</title>
<style type="text/css">
<!--
body,td,th {
    font-size: 12px;
}
-->
</style></head>

<body>
<form id="form1" name="form1" method="post" action="">
  <table id="__01" width="452" height="255" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="7"><img src="images/dl_01.gif" width="452" height="81" alt="" /></td>
    </tr>
    <tr>
      <td rowspan="3"><img src="images/dl_02.gif" width="59" height="173" alt="" /></td>
      <td height="107" colspan="4" bgcolor="#FEF5CC">
          <table width="285" height="98">
            <tr>
              <td width="96">用户名：</td>
              <td width="177"><label>
              <div>
                <input name="name" type="text" size="22" />
              </div>
              </label></td>
            </tr>
            <tr>
              <td height="33">密码：</td>
              <td><label>
                  <div>
                    <input name="pwd" type="password" size="24" />
                  </div>
                </label>
              </td>
            </tr>
            <tr>
              <td height="22" colspan="2">&nbsp;
              </td>
              </tr>
      </table></td>
      <td colspan="2" rowspan="2"><img src="images/dl_04.gif" width="58" height="141" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/dl_05.gif" width="92" height="34" alt="" /></td>
      <td width="78" height="34"><input type="image" name="imageField" onclick="return checkinput()" src="images/dl_06.gif" /></td>
      <td width="83" height="34"><input type="image" name="imageField2" onclick="form.reset(); return false;" src="images/dl_07.gif" /></td>
      <td><img src="images/dl_08.gif" width="82" height="34" alt="" /></td>
    </tr>
    <tr>
      <td colspan="5"><img src="images/dl_09.gif" width="358" height="32" alt="" /></td>
      <td><img src="images/dl_10.gif" width="35" height="32" alt="" /></td>
    </tr>
    <tr>
      <td><img src="images/分隔符.gif" width="59" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="92" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="78" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="83" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="82" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="23" height="1" alt="" /></td>
      <td><img src="images/分隔符.gif" width="35" height="1" alt="" /></td>
    </tr>
  </table>
</form>
    
    
<script type="text/javascript">
function checkinput(){                    //自定义函数
    if(form1.name.value==""){            //判断用户名是否为空
        alert("请输入用户名!");//弹出对话框
           form1.name.focus();//为文本框设置焦点
        return false;//返回false不允许提交表单
    }                        
    if(form1.pwd.value==""){            //判断密码是否为空
        alert("请输入密码!");//弹出对话框
        form1.pwd.focus();//为密码框设置焦点
        return false ;//返回false不允许提交表单
    }
    return true;//返回true允许提交表单
}    
</script>    
    
    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_1/

 （3）Tips

   form.reset()，form1.name.focus() 。 


2. 练习2

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>获取文本框/编辑框/隐藏域的值</title>
<style type="text/css">
    
body {
    background-color: #FFF8EB;
    margin-top: 10px;
}

</style>
<script type="text/javascript">
function Mycheck(){
      var checkstr="获取内容如下：\n";//定义字符串变量
      if (document.form1.author.value != ""){//如果作者名称不为空
         checkstr+="作者名称："+document.form1.author.value+"\n";//连接用户输入的作者名称
      }else{
          return false;//返回false不允许提交表单
      }
      if (document.form1.title.value != ""){//如果文章主题不为空
         checkstr+="文章主题："+document.form1.title.value+"\n";//连接用户输入的文章主题
      }else{
          return false;//返回false不允许提交表单
      }
      if (document.form1.content.value != ""){//如果文章内容不为空
         checkstr+="文章内容："+document.form1.content.value+"\n";//连接用户输入的文章内容
      }else{
          return false;//返回false不允许提交表单
      }
      if (document.form1.hid.value != ""){//如果隐藏域的值不为空
         checkstr+=document.form1.hid.value;//连接隐藏域的值
      }
    alert(checkstr);//输出变量checkstr的值
    return true;//提交表单
}
</script>
</head>
<body style="font-size:12px">
<table width="500"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><table width="95%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="22"><img src="images/dian.gif" width="7" height="7"> 文章添加</td>
      </tr>
      <tr>
        <td height="1"><img src="images/xian.gif" width="366" height="1"></td>
      </tr>
    </table>
      <br>
      <table width="500" border="0" cellpadding="0" cellspacing="0">
        <form name="form1" method="post" onSubmit="return Mycheck()">
          <tr>
            <td height="28">作者名称：</td>
            <td height="28"><input name="author" type="text" id="author"></td>
          </tr>
          <tr>
            <td height="28">文章主题：</td>
            <td height="28"><input name="title" type="text" id="title"></td>
          </tr>
          <tr>
            <td height="22">文章内容：</td>
            <td height="22"><textarea name="content" cols="45" rows="6" id="content"></textarea></td>
          </tr>
          <tr>
            <td height="28" colspan="2"><input name="hid" type="hidden" id="hid" value="文章添加成功!">
            <input name="add" type="submit" id="add" value="添 加">
&nbsp;
        <input type="reset" name="Submit2" value="重 置"></td>
          </tr>
        </form>
    </table></td>
  </tr>
</table>
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_2/

 （3）Tips

   在CSS模型中背景色会铺满整个外边距 。 


3. 练习3

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>获取个人信息</title>
<style type="text/css">
<!--
body,td,th {
    font-size: 12px;
    padding: 5px;
}
-->
</style>
<script type="text/javascript">
function getInfo(){//定义getInfo()函数
    var message = "";//定义字符串变量
    message += "姓名：" + form1.name.value + "\n";//获取用户姓名并连接字符串
    message += "性别：";//连接字符串
    for(var i=0; i<form1.sex.length; i++){//循环获取单选按钮
        if(form1.sex[i].checked){//如果该单选按钮被选中
            message += form1.sex[i].value + "\n";//获取用户性别并连接字符串
        }
    }
    message += "爱好：";//连接字符串
    for(var i=0; i<form1.interest.length; i++){//循环获取复选框
        if(form1.interest[i].checked){//如果该复选框被选中
            message += form1.interest[i].value + " ";//获取用户爱好并连接字符串
        }
    }
    message += "\n自我评价：" + form1.comment.value;//获取用户自我评价并连接字符串
    alert(message);//输出个人信息
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" onSubmit="getInfo()">
  <table width="503" border="0" cellspacing="1" bgcolor="#BBBBBB">
    <tr>
      <td height="46" colspan="2" background="images/bg.gif"><h2>请输入你的个人信息</h2></td>
    </tr>
    <tr>
      <td width="82" height="20" background="images/bg.gif">姓名：</td>
      <td width="414" height="20" background="images/bg.gif"><input type="text" name="name" /></td>
    </tr>
    <tr>
      <td height="20" background="images/bg.gif">性别：</td>
      <td height="20" background="images/bg.gif"><input type="radio" name="sex" value="男" />男
      &nbsp;&nbsp;<input type="radio" name="sex" value="女" />女</td>
    </tr>
    
    <tr>
      <td height="20" background="images/bg.gif">爱好：</td>
      <td height="20" background="images/bg.gif"><input type="checkbox" name="interest" value="看电影" />看电影
      <input type="checkbox" name="interest" value="听音乐" />听音乐
      <input type="checkbox" name="interest" value="演奏乐器" />演奏乐器
      <input type="checkbox" name="interest" value="打篮球" />打篮球
      <input type="checkbox" name="interest" value="看书" />看书
      <input type="checkbox" name="interest" value="上网" />上网</td>
    </tr>
    
    <tr>
      <td valign="top" background="images/bg.gif">自我评价：</td>
      <td background="images/bg.gif"><textarea name="comment" cols="30" rows="5"></textarea></td>
    </tr>
    <tr>
      <td background="images/bg.gif">&nbsp;</td>
      <td background="images/bg.gif"><input type="submit" name="Submit" value="提交" />
      <input type="reset" name="Submit2" value="重置" /></td>
    </tr>
  </table>
</form>
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_3/

 （3）Tips

   懂了，经典效果。  


4. 练习4

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>选择职业</title>
</head>
<body>

<form name="myform">
  <table>
    <tr>
      <td>可选职位</td>
      <td></td>
      <td>已选职位</td>
    </tr>
    <tr>
      <td>
        <!--添加“可选职位”列表框-->
        <select name="job" size="6" multiple="multiple">
          <option value="歌手">歌手</option>
          <option value="演员">演员</option>
          <option value="画家">画家</option>
          <option value="教师">教师</option>
          <option value="公务员">公务员</option>
          <option value="职员">职员</option>
        </select>
      </td>
      <td>
        <!--添加“>>”和“<<”按钮-->
        <input type="button" value=">>" onClick="myJob()"><br>
        <input type="button" value="<<" onClick="toJob()">
      </td>
      <td>
        <!--添加“已选职位”列表框-->
        <select name="myjob" size="6" multiple="multiple">
        </select>
      </td>
    </tr>
  </table>
</form>
<script type="text/javascript">
function myJob(){//定义myJob()函数
    var jobLength = document.myform.job.length;//获取“可选职位”下拉菜单选项个数
    for(var i=jobLength-1; i>-1; i--){//从最后一个选项开始循环
        if(document.myform.job[i].selected){//如果该选项被选中
            var myOption = new Option(document.myform.job[i].text,document.myform.job[i].value);//创建Option对象
            document.myform.myjob.options[document.myform.myjob.options.length] = myOption;//为“已选职位”下拉菜单添加选项
            document.myform.job.remove(i);//删除移动的选项
        }
    }
}
function toJob(){//定义toJob()函数
    var myjobLength = document.myform.myjob.length;//获取“已选职位”下拉菜单选项个数
    for(var i=myjobLength-1; i>-1; i--){//从最后一个选项开始循环
        if(document.myform.myjob[i].selected){//如果该选项被选中
            var myOption = new Option(document.myform.myjob[i].text,document.myform.myjob[i].value);//创建Option对象
            document.myform.job.options[document.myform.job.options.length] = myOption;//为“可选职位”下拉菜单添加选项
            document.myform.myjob.remove(i);//删除移动的选项
        }
    }
}
</script>
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_4/

 （3）Tips

   size指长度，multiple可选多个。

   document.myform.job[i].selected。

   document.myform.job.length。

   new Option(.text,.value) 。

   document.myform.job.options[document.myform.job.options.length]。

   document.myform.job.remove(i)。  


二、编程训练

1. 训练1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>判断取票是否成功</title>
<style type="text/css">
body{
font-size:14px;
}
span{
margin-left:10px;
}
</style>
</head>

<body>
<script type="text/javascript">
var ticketCode = "99648500463711";
function checkCode(form){
    var code = form.code.value;
    if(code == ""){
        alert("请输入兑换码！");
        return false;
    }else if(code != ticketCode){
        alert("兑换码不正确！");
        return false;
    }else{
        alert("取票成功！");
        return true;
    }
}
</script>
<table width="300" height="100" bgcolor="#1170FF" border="0" cellpadding="0" cellspacing="1">
  <form name="form1" method="post">
    <tr>
      <td height="25" colspan="2" bgcolor="#B5D3FF"><div>取票系统</div></td>
    </tr>
    <tr>
      <td width="120" height="25" bgcolor="#FFFFFF"><div>请输入兑换码：</div></td>
      <td width="180" bgcolor="#FFFFFF">&nbsp;<input type="text" name="code" size="15"></td>
    </tr>
    <tr>
      <td height="25" colspan="2" bgcolor="#FFFFFF"><div><input type="submit" value="取票" onclick="return checkCode(form1)">&nbsp;&nbsp;<input type="reset" value="重新输入"></div></td>
    </tr>
  </form> 
</table>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_5/

  （3）Tips

   onclick="return checkCode(form1)"。


2. 训练2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>通过控制按钮调整多行文本框的高度</title>
<script type="text/javascript">
function resizeTextarea(type){
    if(type == "increase"){
        if(myform.content.rows < 20){
            myform.content.rows += 2;
        }
    }else if(type == "reduce"){
        if(myform.content.rows > 5){
            myform.content.rows -= 2;
        }
    }
}
</script>
</head>
<body>
<h3>调整多行文本框大小</h3>
<form name="myform">
  <input type="button" value="+" onClick="resizeTextarea('increase')">
  <input type="button" value="-" onClick="resizeTextarea('reduce')"><br>
  <textarea name="content" cols="40" rows="5"></textarea>
</form>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_6/

  （3）Tips

   比较明确。


3. 训练3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>选择超过6门课程时给出相应提示</title>
<style type="text/css">
<!--
body,td,th {
    font-size: 12px;
    padding: 5px;
}
-->
</style>
<script type="text/javascript">
function selectLesson(les){
    var count = 0;
    for(var i=0; i<form1.lesson.length; i++){
        if(form1.lesson[i].checked){
            count++;
        }
    }
    if(count > 6){
        alert("您最多可以选择6门课程");        
                les.checked="";
        
    }
    
}
</script>
</head>

<body>
<form id="form1" name="form1">
  <h2>请选择课程</h2>
    <input type="checkbox" name="lesson" value="C语言" onclick="selectLesson(this)">C语言<br>
    <input type="checkbox" name="lesson" value="机械制图" onclick="selectLesson(this)">机械制图<br>
    <input type="checkbox" name="lesson" value="单片机" onclick="selectLesson(this)">单片机<br>
    <input type="checkbox" name="lesson" value="自动控制" onclick="selectLesson(this)">自动控制<br>
    <input type="checkbox" name="lesson" value="传感器" onclick="selectLesson(this)">传感器<br>
    <input type="checkbox" name="lesson" value="高等数学" onclick="selectLesson(this)">高等数学<br>
    <input type="checkbox" name="lesson" value="计算机基础" onclick="selectLesson(this)">计算机基础<br>
    <input type="checkbox" name="lesson" value="Oracle数据库" onclick="selectLesson(this)">Oracle数据库<br>
    <input type="checkbox" name="lesson" value="商务英语" onclick="selectLesson(this)">商务英语<br>
    <input type="checkbox" name="lesson" value="PLC设计基础" onclick="selectLesson(this)">PLC设计基础
</form>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_7/

  （3）Tips

   onclick事件在弹起时激活，浏览器还没来得及渲染，提示窗口已弹出。第二个根本不用再循环一遍，什么逻辑。


三、实践与练习

1. 实践1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<script type="text/javascript">
  
    window.addEventListener('DOMContentLoaded',function(){
        var star=myform.star;
        myform.but.onclick=function(){
            if(star.value==""){
                alert("请选择答案");
            }else if(star.value=="黄渤"){
                alert("答案正确");
            }else{
                alert("答案不正确");
            }
        }
       });
</script>
    
</head>
<body>

<form name="myform">
    电影《疯狂的外星人》的主演是谁？
    <p>
        <input type="radio" name="star" value="邓超">邓超
        <input type="radio" name="star" value="黄渤">黄渤
        <input type="radio" name="star" value="徐峥">徐峥
        <input type="radio" name="star" value="王宝强">王宝强
    </p>
    <input type="button" name="but" value="提交答案">
</form>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_8/

  （3）Tips

    用window.onload总是不灵光。myform.star；myform.but.onclick=function(){star.value}。


2. 实践2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded',function(){
        var interest=myform.interest;
        myform.checkAll.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(!interest[i].checked){
                    interest[i].checked=true;
                }
            }
        }
        myform.checkNo.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(interest[i].checked){
                    interest[i].checked=false;
                }
            }
        }
        myform.inverse.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(interest[i].checked){
                    interest[i].checked=false;
                }else{
                    interest[i].checked=true;
                }
            }
        }
    });
</script>
<form name="myform">
    <input type="checkbox" name="interest" value="看电影">看电影
    <input type="checkbox" name="interest" value="听音乐">听音乐
    <input type="checkbox" name="interest" value="演奏乐器">演奏乐器
    <input type="checkbox" name="interest" value="打篮球">打篮球
    <input type="checkbox" name="interest" value="看书">看书
    <input type="checkbox" name="interest" value="上网">上网
    <p>
        <input type="button" name="checkAll" value="全选">
        <input type="button" name="checkNo" value="全不选">
        <input type="button" name="inverse" value="反选">
    </p>
</form>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_9/

  （3）Tips

    myform.interest，myform.checkAll.onclick，!interest[i].cheded，interest[i].cheded=false。


3. 实践3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form name="myform">
    选择城市：
    <select name="province">
        <option value="jl">吉林省</option>
        <option value="ln">辽宁省</option>
        <option value="hlj">黑龙江省</option>
    </select>
    <select name="city">
        <option>长春市</option>
        <option>吉林市</option>
    </select>
</form>
    
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded',function(){
        var province=myform.province;
        var city=myform.city;
        province.onchange=function(){
            if(province.value=="jl"){
                city.innerHTML="<option>长春市</option><option>吉林市</option>";
            }else if(province.value=="ln"){
                city.innerHTML="<option>沈阳市</option><option>大连市</option>";
            }else{
                city.innerHTML="<option>哈尔滨市</option><option>大庆市</option>";
            }
        }
     });
</script>
    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/14_10/

  （3）Tips

    province.onchange=function(){}。





















JS入门到精通 第13章 级联样式表 JS入门到精通 第15章 使用Cookie

相关内容

更多

游客 回复需填写必要信息
↑