表单

最新推荐文章于 2023-07-14 19:00:42 发布
最新推荐文章于 2023-07-14 19:00:42 发布
阅读量192 收藏
点赞数
分类专栏： 网页特效 文章标签： javascript form 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42210229/article/details/82560274
版权

实例1、

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<style>
    *{padding: 0px;margin: 0px;}
    body,#boxs{
        width: auto;
        height: 100%;
        position: relative;
        left:0px;
        top:0px;
    }
    #boxs{
        background-color: #C4C2C2;
        height:600px;
        width: 1320px;
        background-size: contain;
        margin: 10px auto;
    }
    #boxs_nav{
        width:100%;
        height: 60px;
        padding: 10px 0px 0px 15px;
        line-height: 35px;
        text-align: center;
        position: absolute;
        left: 0px;
        top:0px;
        border-bottom: 1px solid #2B2B2B;
        box-sizing: border-box;
    }
    #boxs_nav a{
        font-size: 24px;
        letter-spacing: 0.5em;
        text-decoration-line: none;
        padding-left:40px;
        box-sizing: border-box;
    }
    #boxs_form{
        position: absolute;
        left:50%;
        top:80px;
        margin-left:-120px;
    }
    #boxs_form td{
        color: #463D3E;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
    }
    #boxs_form tr{
        height: 40px;
        line-height:30px;
    }
    tr td:first-of-type{
        width:60px;
    }
    .td_input{
        width: 200px;
        height: 20px;
        background-color: rgba(255,237,237,0.07);
    }
    .td_input:hover{
        background-color: #99E499;
    }
    .td_input:focus{
        color: #14B73B;
        background-color: #99E499;
    }
    #btn{
        width: 180px;
        background-color: #F1DC4A;
        color: aliceblue;
        line-height: 30px;
        height: 30px;
        border-radius:15px;
    }
</style>
</head>

<body>
<div id="boxs">
    <div id="boxs_nav">
        <a href="denglu1.html">登录</a>
        <a href="denglu1.html">注册</a>
    </div>
    <div id="boxs_form">
    <form action="" method="post" enctype="multipart/form-data">
            <table >
            <tr>
                <td>用户名</td>
                <td colspan="2"><input type="text" name="username" class="td_input"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td colspan="2"><input type="password" name="password" class="td_input"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="radio" name="sex" checked/>男</td>
                <td><input type="radio" name="sex" />女</td>
            </tr>
            <tr>
                <td>上传头像</td>
                <td colspan="3"><input type="file" name="myfile"/></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"><input type="submit" value="注册" id="btn"/></td>
                <td></td>
            </tr>
        </table>
    </form>
    </div>
</div>
</body>
</html>

实例2

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
    *{padding: 0px;margin: 0px;}
    body{background-color:#CBCBCB;width:100%;height:630px;position: relative;left:0px;top:0px;}
    #content{background-image: url(../images/timg.png);width: 742px;height: 302px;position:absolute;left: 50%;top:50%;margin: -151px 0px 0px -371px;box-shadow:5px 2px 10px 7px #bababa; }
    #content-box{width: 100%;height: 100%;position: relative;left: 0px;top:0px;}
    #content-box  div{float: left;width: 50%;height: 100%;}
    #content-box-left{text-align: center;line-height: 160px;}
    #content-box-right{padding:70px 0px 0px 40px;box-sizing: border-box;}
    #content-box-right label{font-size: 16px;line-height: 32px;}
    #username_fir1,#username_fir2{font-size: 12px;color: red;text-indent:2em;}
    #btn,#ret{background-color: red;line-height: 26px;width: 100px;font-size: 14px;}
</style>
<script type="text/javascript">
    
    window.onload=function(){
        //记住密码
        var sName1=localStorage.getItem('keyName');
        var sPass1=localStorage.getItem('keyPass');
           if(sName1!=null){
              document.getElementById('username').value=sName1;
            }
           if(sPass1!=null){
               document.getElementById('password').value=sPass1;
            }    
        var myusername=document.getElementById('username');
        var mypassword=document.getElementById('password');
        var sPass=mypassword.value;
        var sName=myusername.value;
        //验证邮箱
            var re1=/^\w+@[0-9a-z]+\.[a-z]+$/;
            var re2=/[0-9]/;
        myusername.onchange=function(){
            sName=myusername.value;
        }
        myusername.onblur=function(){
            
            if(sName==""){
                 document.getElementById('username_fir1').innerHTML="账户不能为空";
            }else if(re1.test(sName)||(sName.length==11&&re2.test(sName))){
                 document.getElementById('username_fir1').innerHTML="";
            }else{
                 document.getElementById('username_fir1').innerHTML="账户格式不正确";
            }
        }
        //验证密码
                var regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/;
        mypassword.onchange=function(){
            sPass=mypassword.value
        }
        mypassword.onblur=function(){
            
            if(sPass==""){
                 document.getElementById('username_fir2').innerHTML="密码不能为空";
            }else if(regExp.test(sPass)&&sPass.length>=8){
                 document.getElementById('username_fir2').innerHTML="";
            }else if(sPass.length<8){
                 document.getElementById('username_fir2').innerHTML="密码至少需要8位";
            }else{
                 document.getElementById('username_fir2').innerHTML="密码格式不正确";
            }
        }
        //提交检验
        document.getElementById('btn').onclick=function(){
             if(re1.test((sName)||(sName.length==11&&re2.test(sName)))&&regExp.test(sPass)&&sPass.length>=8){
                  document.forms[0].submit();
            }else{
            alert("按要求填写用户和密码");
            }
            localStorage.setItem("keyName",sName);
            if(document.getElementById('checkbox').checked){
                localStorage.setItem('keyPass',sPass);
            }else{
                localStorage.removeItem('keyPass'," ");
            }
        }
        document.getElementById('ret').onclick=function(){
            localStorage.clear();
        }
    }
    
</script>
</head>

<body>
<div id="content">
    <div id="content-box">
        <div id="content-box-left">
            <img style="width:160px;height:160px;margin-top:70.5px;" src="../../../工程篇/数据分析篇/images/logo_man1.PNG"/>
        </div>
        <div id="content-box-right">
            <form action="" method="post">
                <label>
                   账户:<input type="text" name="username" id="username" size="18" placeholder="邮箱/手机号"/>
                   <span id="username_fir1"></span>
                </label><br/>
                <label>
                   密钥:<input type="password" name="password" id="password" size="18"/>
                   <span id="username_fir2"></span>
                </label><br/>
                <label><input type="checkbox" id="checkbox"><span style="color: red;font-size: 14px;">是否记住密码</span></label>&nbsp;&nbsp;
                <span style="color:gray;font-size: 12px;">没有账号<a href="zhuce.html" style="color: gray;font-size: 12px;">&gt;&gt;注册账号</a></span><br/>
                <input type="button" value="登录" id="btn"/>
                <input type="reset" value="取消" id="ret"/>
            </form>
        </div>
    </div>
</div>
</body>
</html>

实例3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册账号</title>
<style type="text/css">
    *{padding: 0px;margin: 0px;}
    body{width:100%;height:630px;position: relative;left:0px;top:0px;}
    #boxs_position{width:1000px;height:70%;position: absolute;left:14%;top:16%;}
    #boxs{width:1000px;height:100%;position: relative;left:0px;top:0px;border: 1px #C7C7C7 solid;box-sizing:border-box;}
    #boxs_title{width: 100%;height:40px;padding-left: 20px;box-sizing: border-box;background-color: #C5C5C5;}
    #boxs_title h2{font-weight: 200;color: dimgray;line-height: 40px;}
    #boxs_form{width: 100%;height: auto;margin-top: 30px;margin-left: 140px;}
    #boxs_form label{line-height: 40px;}
    #boxs_form p{display: inline;}
    .input_name{font-size:17px;color: #93383A;}
    .red{color: red;}
    label input{width:20%;font-size: 16px;line-height: 40px;height:25px;}
    .red+p{font-size: 12px;}
    #chkbox{margin-left: 100px;}
    #btn{margin-left:110px;width:120px;height: 40px;line-height: 40px;background-color: #E7B14D}
</style>
</head>

<body>
<div id="boxs_position">
    <div id="boxs">
        <div id="boxs_title">
            <h2>注册账号</h2>
        </div>
        <div id="boxs_form">
        <form action="" method="post">
            <label>
                <p class="input_name"> 用 户 名&nbsp;:</p>
                <input type="text" name="username" id="username"/>
                &nbsp;&nbsp;
                <p class="red">*</p><p id="name_alert">2-16字符，建议用中文，一经注册不能修改。</p>
            </label><br/>
            <script type="text/javascript">
                var str=document.getElementById('username').value;
                document.getElementById('username').onchange=function(){
                    str=document.getElementById('username').value;
                }
                document.getElementById('username').onblur=function(){
                    if(str==""){
                        document.getElementById("name_alert").innerHTML="用户名不可以为空值";
                        document.getElementById("name_alert").style.color="red";
                    }else if(str.length>=2&&str.length<=16){
                        document.getElementById("name_alert").innerHTML="2-16字符，建议用中文，一经注册不能修改。";
                        document.getElementById("name_alert").style.color="#000000";
                    }else{
                        document.getElementById("name_alert").innerHTML="用户名不符合要求";
                        document.getElementById("name_alert").style.color="red";
                    }
                    
                }
            </script>
            <label>
                <p class="input_name">设置密码:</p>
                <input type="password" name="password1"  id="password1"/>
                &nbsp;&nbsp;
                <p class="red">*</p><p id="password1_alert">长度为8-16位，建议由字母、数字或符号组合，区分大小写。</p>
            </label><br/>
            <script type="text/javascript">
                var str1=document.getElementById('password1').value;
                var regExp=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/;
                document.getElementById('password1').onchange=function(){
                    str1=document.getElementById('password1').value;
                }
                document.getElementById('password1').onblur=function(){
                    if(str1==""){
                        document.getElementById('password1_alert').innerHTML="密码不可以为空值";
                        document.getElementById('password1_alert').style.color="red";
                    }else if(regExp.test(str1)&&str1.length>=8){
                        document.getElementById('password1_alert').innerHTML="长度为8-16位，建议由字母、数字或符号组合，区分大小写。";
                        document.getElementById('password1_alert').style.color="#000000";
                    }else if(str1.length<8){
                        document.getElementById('password1_alert').innerHTML="密码至少需要八位";
                        document.getElementById('password1_alert').style.color="red";
                    }else{
                        document.getElementById('password1_alert').innerHTML="不符合要求！";
                        document.getElementById('password1_alert').style.color="red";
                    }
                }
            </script>
            <label>
                <p class="input_name">确认密码:</p>
                <input type="password" name="password2"  id="password2"/>
                &nbsp;&nbsp;
                <p class="red">*</p><p id="password2_alert">请再次输入密码。</p>
            </label><br/>
            <script type="text/javascript">
                var str2=document.getElementById('password2').value;
                document.getElementById('password2').onchange=function(){
                    str2=document.getElementById('password2').value;
                }
                document.getElementById('password2').onblur=function(){
                    if(str2==""){
                        document.getElementById('password2_alert').innerHTML="不可以为空值";
                        document.getElementById('password2_alert').style.color="red";
                    }else if(str2==str1){
                        document.getElementById('password2_alert').innerHTML="请再次输入密码.";
                        document.getElementById('password2_alert').style.color="#000000";
                    }else{
                        document.getElementById('password2_alert').innerHTML="两次密码不一样！";
                        document.getElementById('password2_alert').style.color="red";
                    }
                }
            </script>
            <label>
                <p class="input_name">手机号码:</p>
                <input type="text" name="phone"  id="phone"/>
                &nbsp;&nbsp;
                <p class="red">*</p><p id="phone_alert">请输入真实有效的手机号码。</p>
            </label><br/>
            <script type="text/javascript">
                var myphone=document.getElementById('phone').value;
                var reg=/^[0-9]$/;
                document.getElementById('phone').onchange=function(){
                    myphone=document.getElementById('phone').value;
                }
                document.getElementById('phone').onblur=function(){
                    if(myphone==""){
                        document.getElementById('phone_alert').innerHTML="电话不可以为空值";
                        document.getElementById('phone_alert').style.color="red";
                    }else if(myphone.length==11&&reg.test){
                        document.getElementById('phone_alert').innerHTML="请输入真实有效的手机号码。";
                        document.getElementById('phone_alert').style.color="#000000";
                    }else{
                        document.getElementById('phone_alert').innerHTML="不符合要求！";
                        document.getElementById('phone_alert').style.color="red";
                    }
                }
            </script>
            <label>
                <p class="input_name">邮箱地址:</p>
                <input type="email" name="email" id="email"/>
                &nbsp;&nbsp;
                <p class="red">*</p><p id="email_alert">请输入真实有效的邮箱地址。</p>
            </label><br/>
            <script type="text/javascript">
                var myemail=document.getElementById('email').value;
                document.getElementById('email').onchange=function(){
                    myemail=document.getElementById('email').value;
                }
                document.getElementById('email').onblur=function(){
                    var rel=/^\w+@[0-9a-z]+\.[a-z]+$/;
                    if(myemail==""){
                        document.getElementById('email_alert').innerHTML="邮箱地址不可以为空值";
                        document.getElementById('email_alert').style.color="red";
                    }else if(rel.test(myemail)){
                        document.getElementById('email_alert').innerHTML="请输入真实有效的邮箱地址。";
                        document.getElementById('email_alert').style.color="#000000";
                    }else{
                        document.getElementById('email_alert').innerHTML="邮箱地址错误！";
                        document.getElementById('email_alert').style.color="red";
                    }
                }
            </script>
            <input type="checkbox" id="chkbox"/><span style="font-size:14px; color: red" id="chkbox_span">我已阅读并同意遵守服务条款</span><br/>
            <script type="text/javascript">
                document.getElementById('chkbox').onclick=function(){
                    if(!document.getElementById('chkbox').checked){
                        document.getElementById('chkbox_span').style.color="red";
                    }else{
                        document.getElementById('chkbox_span').style.color="#000000";
                    }
                }
                    
            </script>
            <input type="submit" value="马上注册" id="btn"/>
        </form>
        </div>
    </div>
</div>
</body>
</html>

 

&nbsp;;
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html left属性,CSS属性参考 | left
weixin_28956753的博客
06-09 3775
CSS left 属性用来指定被定位元素左侧边缘的位置。该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移。left是一个偏移属性，偏移属性用于指定一个被定位元素的精确位置，对于static的元素没有效果。要使用这个CSS属性，必须为元素设置一个position值，而不能是默认的static定位方式。在CSS中，可用的偏移属性有四个，包括top、right、bottom和left...
form表单
热门推荐
JiuMeilove的博客
09-02 4万+
form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)fieldset标签 标签 form表单 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程
HTML——表单详解
最新发布
wshwsh_的博客
07-14 1万+
HTML——表单的详细解析
bootstarp表单验证
05-10
Bootstrap表单验证是一种在网页开发中确保用户输入数据有效性的技术。Bootstrap，作为最流行的前端框架之一，提供了优雅的样式和组件，使开发者能够轻松创建响应式和美观的界面。结合jQuery，我们可以实现动态和交互...
全面解析Bootstrap表单使用方法（表单样式）
09-03
本篇文章将深入探讨Bootstrap表单的使用方法，特别是表单样式的应用。 一、基础表单 Bootstrap的基础表单主要由`<form>`标签、`<div class="form-group">`、`<label>`和`<input>`等元素构成。通过添加`.form-...
动态表单：VUE动态表单
08-13
在IT行业中，动态表单是一种常见且实用的功能，它允许用户根据特定需求自定义表单结构，无需预先编码。Vue.js作为一个轻量级且强大的前端框架，被广泛用于构建此类功能。Iview则是一个基于Vue的UI组件库，提供了丰富...
angular动态表单制作
08-27
Angular 动态表单制作技术详解 Angular 动态表单是一种灵活的表单制作方法，它可以根据用户的选择或服务器返回的信息进行重新配置，增加或删除表单元素等。Angular 动态表单的核心是组件生成和动态加载技术。 一、...
JavaScript简单特效之按钮篇
笺赕
07-12 1278
1、不同的按钮提交不同的表单地址2、Enter键自动提交表单event.keyCode==133、按钮在单击以后就失效4、删除按钮必需的提醒按钮window.confirm("显示字符")，返回Boolean值5、通过单击按钮改变状态栏信息（针对IE浏览器）window.status6、不同的状态展示不同样式的按钮7、注册按钮倒计时效果8、阅读完协议后才可以单击按钮d.scrollTop滚动条距离...
JavaScript简单特效之鼠标篇
笺赕
07-12 810
1、当按下鼠标左键的弹出广告窗口and让鼠标滑轮失效2、双击鼠标滚动到网页底部window.scrollBy(X,Y)以X，Y像素向右、下滚动。3、动态定义鼠标指针形状和鼠标进出时字体大小变化4、禁止鼠标右键event.button==2...
JavaScript之简单网页特效表单篇
笺赕
07-09 420
1、遍历表单的所有控件2、修改控件的值和获取文本框的个数3、通过控件名访问特定的控件4、修改表单的提交方法5、动态选择聚焦的控件和重置6、隐藏和显示密码7、批量为所有的表单控件加一个说明8、设置下拉菜单的值9、使用隐藏控件为表单添加参数10、勾选全部复选框11、为表单的聚焦控件设置醒目的样式...
JavaScript网页简单特效2
笺赕
07-07 414
1、修改网页标题2、禁止网页放入框架3、跳转到其他页面4、在网页里动态加载JavaScript5、设为首页
JavaScript网页简单特效篇3
笺赕
07-07 336
1、判断页面是否加载完毕2、窗口打开时显示大广告图片及其自动关闭3、带关闭按钮的右下角图片广告 
JavaScript简单特效之链接篇
笺赕
07-12 312
1、改变链接的单击事件2、用链接模拟一个按钮3、让所有链接在新窗口打开和失效失效包括：1、链接地址，2、单击事件。只有把链接地址置空，单击事件取消，这个链接才算完全失效。4、回到顶部的链接和需要确认的链接5、几条链接交替出现...
JavaScript之时间与日期
笺赕
07-20 221
1、明年元旦倒计时 2、节假日判断 3、两个时间之间的时间差 4、闹钟 5、表格日历
JavaScript简单特效之窗口的控制和框架的互操作篇
笺赕
07-12 198
1、网页打开2秒后弹出广告ad.html2、通过在窗口获取数据输入child.html3、得到是谁打开了子窗口根据window.opener==null，判断其不是其他网页的子窗口。window.opener.document.title在Firefox浏览器中支持，IE不能正常运行。如果没法安装Firefox浏览器可以把window.opener.document.title改成一个字符串提示语...
网页表单验证技术汇总
在网页设计中，表单验证是确保用户提交的数据符合预设条件的关键步骤。以下是一些常见的表单验证知识点： 1. **长度限制**：通过JavaScript函数检查输入字段的字符长度，例如，限制输入不超过50个字符，防止过长的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值