#创建表单

初音未来☆

已于 2024-04-14 15:46:09 修改

阅读量297

点赞数 7

分类专栏： H5理论文章标签：前端开发语言 html5 html

于 2024-04-14 15:32:26 首次发布

本文链接：https://blog.csdn.net/qq_74215768/article/details/137746144

版权

H5理论专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用HTML和JavaScript创建一个包含用户名、密码、性别选择和联系方式的表单，同时实现表单提交和长度、类型限制的客户端验证功能。

摘要由CSDN通过智能技术生成

一. 简答题（共1题，100分）

1. (简答题)

使用<form>、<input>、<select>、<option>、<area>等标签组合可以生成一个表单，用来与用户交互。如果再结合<table>、<tr>、<td>标签就可以制作出格式非常规范的表单。请完成一个表单的制作任务。

注意：表单提交方式使用post，联系方式长度取值范围7至11位。

选做：上网查JavaScript编程语法，当输入的用户名长度等于零，显示提示信息“用户名不能为空”；当输入的用户名长度超过15个字符时，显示提示信息“用户名长度超过15个字符，不合法！”。当输入密码长度大于8个字符时，显示提示信息“密码长度不能大于8个字符，请重新设置”。

参考样式：

正确答案：
<html>

 <head>

     <title>表单的建立</title>

     <script language=JavaScript >  

  

    function clearfields(form)

    { 

       form.name.value="";

       form.pwd.value="";

                     return false;

    }



    function checkfields(form)

    {

       var vname = form.name.value;

                     var vpassword= form.pwd.value;

                    

                     if (vname.length>15)

                     {

                        alert("用户名长度超过15个字符！");

                        return false;                       

                     }

                     else if (vname.length==0){

                        alert("用户名不能为空！");

                        return false;

                     }

                    

                     if (vpassword.length>8)

                     {

                        alert("密码长度不能大于8个字符！");

                        form.pwd.value="";

                        return false;

                      }

                     else if (isNaN(vpassword)){

                        alert("密码必须为数字！");

                        form.pwd.value="";

                        return false;

                     }

                     submit1(form);

                     return true;

    }



                  function submit1(form)

                  {

       form.action="success.html";

                     form.submit();

                  }            

    </script>



 </head>

 <body >

        <table border=1 align=center>

            <form method=post >

                   <th colspan="2">用户登录表单<th>

                <tr>

                   <td>用户名：</td>

                   <td><input type="text" name="name"></td>

                </tr>

                <tr>

                   <td>密&nbsp;&nbsp;码：</td>

                   <td><input type="password" name="pwd" size=21></td>

                </tr>

                <tr>

                   <td>性&nbsp;&nbsp;别：</td>

                   <td><input type="radio" name="gender">男

	   <input type="radio" name="gender">女</td>

                </tr>

                <tr>

                   <td>爱&nbsp;&nbsp;好：</td>

                   <td><input type="checkbox" >打游戏

	   <input type="checkbox" >干饭

	   <input type="checkbox" >睡觉</td>

                 </tr>

                   <tr>

                   <td>联系方式：</td>

                   <td><input type="text" minlength="7"  maxlength="11"></td>

                   </tr>

      <tr align=center >

      <td colspan=2 >

                      <input type="button" value="提&nbsp;&nbsp;交" onclick　 ="checkfields(this.form)">

                       &nbsp;&nbsp;&nbsp;&nbsp;

         <input type="button" value="重&nbsp;&nbsp;置" onclick　 ="clearfields(this.form)">

                   </td>

                </tr>

                </form>

           </table>

 </body>

</html>

初音未来☆

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
#创建表单

选做：上网查JavaScript编程语法，当输入的用户名长度等于零，显示提示信息“用户名不能为空”；当输入的用户名长度超过15个字符时，显示提示信息“用户名长度超过15个字符，不合法！当输入密码长度大于8个字符时，显示提示信息“密码长度不能大于8个字符，请重新设置”。使用、、、、等标签组合可以生成一个表单，用来与用户交互。如果再结合、、标签就可以制作出格式非常规范的表单。请完成一个表单的制作任务。
复制链接

扫一扫