关键词：
在网页中我们会经常看见各色的用户信息填写表单，其中会包括各种输入框、按钮、单复选框和下拉式菜单，今天的我们就以最简单的为例做一个简易版的用户信息填写表单（此处使用html文本），仅供初学者参考，也请各位前辈多多指教！
在这个范例当中，我们将对用户输入的信息做简易验证。主要判读那用户名、密码、确认密码不能为空，密码和确认密码要保持一致。
注意点：
1、用户信息的填写如果是在一张form表单中，则只能出现一个submit按钮提交，这种情况比较简易，只需要在body模块<form>中添加onSubmit="return check(this)"。
但如果是多个form分别提交，此时script中的function check(Form)要与<body>中的不同form一 一对应才可分别做输入合法性验证。
2、通过for循环将form的表单里的element遍历，主要for循环的条件范围，此范例以前三个元素为例。
3、演示的效果为窗口弹出 ----- ”title“不能为空。如用户名不能为空
<!DOCTYPE HTML> <html> <head> <title>个人信息填写</title> <meta charset='utf-8'> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ font-family: sans-serif,Verdana, Helvetica, Arial; } #main{ padding-left: 350px; } .kv-item{ padding-left: 100px; padding-bottom: 20px; } .kv-label{ display: inline; height: 28px; line-height: 28px; margin-left: -100px; float: left; text-align: right; width: 100px; } .text-align{ border:1px solid #474E63; color: #0A1844; height: 26px; line-height:26px; padding:0 2px; width: 177px; text-align: left; } #submit{ margin-left: 80px; border:1px solid #474E63; height: 26px; font-weight: bold; } #reset{ border:1px solid #474E63; height: 26px; font-weight: bold; } </style> <!--CSS部分结束--> <!--此处插入JS代码--> <script type="text/javascript"> //判断前三个表单元素（用户名、密码、确认密码是否为空） function check(Form){ var check=true; var flag=0; for(i=0;i<3;i++){ if(Form.elements[i].value=="") {alert(Form.elements[i].title+"不能为空！"); Form.elements[i].focus(); check=false; return false;} //判断两次输入的密码是否相同 if(i==2) if(Form.pwd.value!=Form.repwd.value) {alert("两次输入密码不同，请重新输入！"); Form.repwd.value=""; Form.pwd.value=""; //Form.pwd.focus(); i=i-2; continue; } } return check; } </script> <!--JS代码结束--> </head> <body background="8.jpg"> <h1 align="center">个人信息填写 </h1> <p> </p> <p> </p> <p> </p> <p> </p> <div id="main"> <form name="personalForm" method="post" action="RegisterController" onSubmit="return check(this)"> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="name">昵称：</label> </span> <input type="text" name="name"class="text-align" id="name" placeholder="*必填项" autofocus size="25" title="用户名" > </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="pwd">密 码：</label> </span> <input type="password" name="pwd" class="text-align" id="pwd" placeholder="*必填项" size="25" title="密码" > </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="repwd">确认密码：</label> </span> <input type="password" name="repwd" class="text-align" id="repwd" placeholder="*必填项" size="25" title="确认密码"> </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="sex_boy">性 别：</label> </span> <input type="radio" name="sex" value="M" checked >男 <input type="radio" name="sex" value="F">女 </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="student">生 日：</label> </span> <table> <tr> <th> <select> <option value="公历">公历</option> <option value="农历">农历</option> <select> </th> <th> <select> <option value="年">年</option> <option name="year" value="2016">2016</option> <option name="year" value="2015">2015</option> <option name="year" value="2014">2014</option> <option name="year" value="2013">2013</option> <select> </th> <th> <select> <option name="month" value="月">月</option> <option name="month"value="01">01</option> <option name="month"value="02">02</option> <option name="month"value="03">03</option> <option name="month"value="04">04</option> <option name="month"value="05">05</option> <option name="month"value="06">06</option> <option name="month" value="07">07</option> <option name="month"value="08">08</option> <option name="month"value="09">09</option> <option name="month"value="10">10</option> <option name="month"value="11">11</option> <option name="month"value="12">12</option> <select> </th> <th> <select> <option value="日">日</option> <option name="day"value="01">01</option> <option name="day"value="02">02</option> <option name="day"value="03">03</option> <option name="day"value="04">04</option> <option name="day" value="05">05</option> <option name="day"value="06">06</option> <option name="day"value="07">07</option> <option name="day" value="08">08</option> <option name="day"value="09">09</option> <option name="day"value="10">10</option> <option name="day"value="11">11</option> <option name="day"value="12">12</option> <option name="day"value="13">13</option> <option name="day"value="14">14</option> <option name="day"value="15">15</option> <option name="day"value="16">16</option> <option name="day"value="17">17</option> <option name="day"value="18">18</option> <option name="day"value="19">19</option> <option name="day"value="20">20</option> <option name="day"value="21">21</option> <option name="day"value="22">22</option> <option name="day"value="23">23</option> <option name="day"value="24">24</option> <option name="day"value="25">25</option> <option name="day"value="26">26</option> <option name="day"value="27">27</option> <option name="day"value="28">28</option> <option name="day"value="29">29</option> <option name="day"value="30">30</option> <option name="day"value="31">31</option> <select> </th> </tr> </table> </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl" for="student">地 址：</label> </span> <table> <tr> <th> <select> <option value="省、直辖市">省、直辖市</option> <option value="上海市">上海市</option> <option value="河南省">河南省</option> <option value="安徽省">安徽省</option> <select> </th> <th> <select> <option value="市">市</option> <option value="上海">上海</option> <option value="焦作">焦作</option> <option value="巢湖">巢湖</option> <select> </th> <th> <select> <option value="区、县">区、县</option> <option value="黄埔">黄埔</option> <option value="普陀">普陀</option> <option value="浦东新区">浦东新区</option> <select> </th> </tr> </table> </div> <div class="kv-item"> <span class="kv-label"> <label class="tsl">手机号码：</label> </span> <input type="password" name="telephone" class="text-align" placeholder="*必填项" size="25" title="手机号码"> </div> <div class="kv-item"> <input type="submit" name="submit" id="submit" value="提交" > <input type="reset" name="reset" id="reset" value="重置"></div> </form> </div> </body> </html>
演示效果为：
当某一项不填写时，演示样式为：
代码演示完毕，有什么不恰当的请多多指教！
用户通过PHP填写表单后如何自动生成页面？
】用户通过PHP填写表单后如何自动生成页面？【英文标题】：HowtoautomaticallygenerateapageafteruserfillsaformviaPHP?【发布时间】：2011-09-0919:25:39【问题描述】：假设我有一个包含两个输入字段的表单，标题和评论。用户填写这两个字段并... 查看详情
从另一个页面填写登录表单
】从另一个页面填写登录表单【英文标题】：Fillloginformfromanotherpage【发布时间】：2013-06-1807:40:44【问题描述】：我是一个HTML新手，我正在完成一个网站，我会将登录表单放到另一个网站上。基本上我想要两种形式，一种用于用... 查看详情
h5页面的测试方式
...链接测试 链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试... 查看详情
避免表单重复提交与等待页面
一.为什么会出现表单重复提交 1.当用户在表单中填写完信息，点击提交按钮后，肯能会因为没有看到成功信息而在此点击提交按钮，从而导致在服务器端收到两条同样的信息，如果这个信... 查看详情
Django 会话表单（临时保存表单）
...2021-12-2120:42:15【问题描述】：我已经创建了一个审核表单页面。所有用户都可以填写表单，但只有登录用户才能提交表单。如果用户没有登录，他们将被重定向到登录页面。登录后，他们将被重定向到个人资料页面。所以流程会... 查看详情
如何从重定向页面传递 $_POST
】如何从重定向页面传递$_POST【英文标题】：Howtopassa$_POSTfromaredirectpage【发布时间】：2017-04-1619:05:08【问题描述】：我有一个表单，其中包含用户填写的有关课程的信息，并包含重定向到PayPal的payflowlink的付款信息。在我添加payf... 查看详情
前端vue+elementui案例：通用后台管理系统-用户管理：form表单填写dialog对话框弹出(代码片段)
文章目录目标代码0.页面结构1.新增按钮和弹出表单：结构2.新增按钮和弹出表单：点击新增弹出表单3.表单样式4.表单验证5.表单的提交和取消功能：接口、mock相关准备6.表单的提交和取消功能提供的数据和接口1-operate... 查看详情
防止用户在未填写所需信息的情况下按下一步并在向导表单中显示警告消息 html 和 javascript 有效
】防止用户在未填写所需信息的情况下按下一步并在向导表单中显示警告消息html和javascript有效【英文标题】：PreventtheuserfrompressingNextwithoutfillingintherequiredinformationandshowinganalertmessageinwizardformhtmlandjavascriptvalid【发布时间】：2021-08... 查看详情
servlet
...做 核心配置文件的配置最后用访问路径访问表单页面，填写表单页面的内容提交到servlet，之后，页面就会返回有无此对象的信息如下所示： 命名html和文件夹的时候不要用中文，在url访问不 查看详情
[html5]html表单(forms)
...网页的交互动作有鼠标悬停、点击链接（或移动触摸）和页面滚动等，这些交互方式一般只是服务器单向信息输出。有时候用户需要输入一些信息给服务器来完成双向交互，这类交互包括：注册/登录用户信息填写搜索/过滤上传... 查看详情
nginx初了解
...控制的服务器地址，在返回一个可以获取用户填写信息的页面，就会造成用户信息泄露。这种浏览器跨域 查看详情
使用 jQuery 动态填写表单值
...我知道如何使用纯PHP做到这一点，但我需要在不重新加载页面的情况下做到这一点。无论如何，jQuery是否可以有效地拉回一些数据库结果（基于用户在表单的第一个文本字段中输入的内容）然后用从数据库查询中拉回的数据填充... 查看详情
用户填写表单时上传文件
】用户填写表单时上传文件【英文标题】：Uploadfileswhileuserisfillingform【发布时间】：2016-05-2814:39:07【问题描述】：我正在创建一个表单，用户可以在其中发布包含照片的广告。用户在访问此表单之前无需登录/注册。我需要在用... 查看详情
用户输入表单后显示数据（mysql-nodejs）
...js)【发布时间】：2021-08-1709:52:12【问题描述】：我有一个页面，其中有一个表单，用户将在其中填写输入。然后，我重定向到另一个页面，根据用户的选择，将显示一些数据（数据将来自mysql数据库）。这是我的代码：index.js（... 查看详情
form表单总结(代码片段)
...有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的ASP或PHP等处理程序处理后，再将用户所需信息传送回客户端的浏... 查看详情
php - 从数据库值填写表单字段
...单字段。对于这个例子，它是一个城市和州。当用户加载页面以编辑选项时，这些值（他们之前输入的）将自动出现在文本框中。<tr><td>City</ 查看详情
05ajax实例-检测用户名是否存在（实例）
...由后台程序检测，如果用户名已存在，用户需要返回注册页面重新填写用户名，而前面填写的其他信息也随着网页的跳转已经过期，全部需要重填，这对用户来说是极大的伤害。因此，有必要使用 查看详情
js表单验证
...据进行验证。被JavaScript验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域(numericfield)中输入了文本？JS表单验证包括：非空验证、... 查看详情