基本表单页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>basic01</title>

    <style type="text/css">

        #result {

            display: none;

        }

        .title{

            margin-top: 50px;

            margin-bottom: 50px;

        }

    </style>

</head>

<body>

    <h2 class="title">注册</h2>

    <form id="myForm">

        <div>

            <label>姓名</label>

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

        </div>

        <div>

            <label>密码</label>

            <input type="password" name="password">

        </div>

        <div>

            <label>电话</label>

            <input type="text" name="cellphone">

        </div>

        <div>

            <label>地址</label>

            <input type="text" name="address">

        </div>

        <div id="result">

        </div>

        <div>

            <button type="submit" name="register">提交</button>

        </div>

    </form>

    <script type="text/javascript">

        var form = document.querySelector("#myForm")

        var result = document.querySelector("#result")

        form.addEventListener('submit', function(e){

            if(!document.querySelector('[name=password]').value){

                result.style.display = 'block';

                result.innerHTML = '密码为空';

            }else{

                result.style.display = 'none';

            }

            e.preventDefault();

        });

    </script>

</body>

</html>

引入bootstrap

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>basic01</title>

    <style type="text/css">

        #result {

            display: none;

        }

        .title{

            margin-top: 50 px;

            margin-bottom: 50 px;

        }

        .operate button{

            margin: 0 auto;

        }

    </style>

    <link rel="stylesheet" type="text/css" href="bootstrap-4.0.0-dist/css/bootstrap.min.css">

</head>

<body>

    <h2 class="title col-6 offset-3">注册</h2>

    <form id="myForm" class="col-6 offset-3">

        <div class="form-group row">

            <label class="col-2 col-form-label">姓名</label>

            <div class="col-10">

                <input class="form-control" type="text" name="name">

            </div>

        </div>

        <div class="form-group row">

            <label class="col-2 col-form-label">密码</label>

            <div class="col-10">

                <input class="form-control" type="password" name="password">

            </div>

        </div>

        <div class="form-group row">

            <label class="col-2 col-form-label">电话</label>

            <div class="col-10">

                <input class="form-control" type="text" name="cellphone">

            </div>

        </div>

        <div class="form-group row">

            <label class="col-2 col-form-label">地址</label>

            <div class="col-10">

                <input class="form-control" type="text" name="address">

            </div>

        </div>

        <div id="result" class="form-group row alert alert-danger">

        </div>

        <div class="operate form-group row">

            <button class="btn btn-primary" type="submit" name="register">提交</button>

        </div>

    </form>

    <script type="text/javascript">

        var form = document.querySelector("#myForm")

        var result = document.querySelector("#result")

        form.addEventListener('submit', function(e){

            if(!document.querySelector('[name=password]').value){

                result.style.display = 'block';

                result.innerHTML = '密码为空';

            }else{

                result.style.display = 'none';

            }

            e.preventDefault();

        });

    </script>

</body>

</html>

bootstrap4简单使用和入门01-简单表单的使用的更多相关文章

  1. 无废话ExtJs 入门教程四[表单：FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  2. 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...

  3. 简单实现"回车!=提交"（去除表单的回车即提交）

    -------------------------------------------------------------------------------------------------- 实 ...

  4. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  5. java struts2入门学习--防止表单重复提交.OGNL语言学习

    一.知识点回顾 防止表单重复提交核心思想: 客户端和服务器端和写一个token,比较两个token的值相同,则非重复提交;不同,则是重复提交. 1.getSession三种方式比较: request. ...

  6. AngularJs 入门系列-2 表单验证

    对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验证. 1. 绑定 为了方便,我们在 $sco ...

  7. Ionic入门五：表单

    一.输入框 list 类同样可以用于 input 元素.item-input 和 item 类指定了文本框及其标签. 1.输入框属性:placeholder 以下实例中,默认为100%宽度(左右两侧没 ...

  8. python2.7入门---CGI编程&表单操作&cookie操作

        看到标题我们首先有个疑问,什么是CGI?CGI 目前由NCSA维护,NCSA定义CGI为:CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上 ...

  9. react入门----(this.state/表单/Ajax)

    1.this.state 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI var TestStat ...

  10. Vue + ElementUI的电商管理系统实例01 登录表单

    效果图: 1.首先来根据Element网站实现布局: <template> <div class="login_container"> <div cl ...

随机推荐

  1. ACM-ICPC 2018 南京赛区网络预赛 G Lpl and Energy-saving Lamps（模拟+线段树）

    https://nanti.jisuanke.com/t/30996 题意 每天增加m个灯泡,n个房间,能一次性换就换,模拟换灯泡过程.询问第几天的状态 分析 离线做,按题意模拟.比赛时线段树写挫了. ...

  2. Tomcat与Web应用

    1.Web是一种分布式应用架构,旨在共享分布 在网络上的各个Web服务器中的所有互相链接的信息.Web使用超级文本技术(HTML)来链接网络上的信息,信息存放在服务器端,客户机通过浏览器查找网络中的各 ...

  3. npm离线安装插件

    公司内部网络与外部网络隔离,导致npm无法通过npm install安装,只能通过离线安装. 要求: 两台机器(内网一台,外网一台) 两台机器上都已安装好的node和npm 以内网机器安装ftpsyn ...

  4. python--numpy、pandas

    numpy 与 pandas 都是用来对数据进行处理的模块, 前者以array 为主体,后者以 DataFrame 为主体(让我想起了Spark的DataFrame 或RDD) 有说 pandas 是 ...

  5. 五.HashTable原理及实现学习总结

    有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相对应的valu ...

  6. js call使用

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...

  7. luogu P4491 [HAOI2018]染色

    传送门 这一类题都要考虑推式子 首先推出题目要求的式子,枚举正好有\(s\)个颜色的种类(范围\([0,p=min(\lfloor\frac{n}{s}\rfloor,m)]\)),然后对于后面的颜色 ...

  8. 用Kersa搭建神经网络【MNIST手写数据集】

    MNIST手写数据集的识别算得上是深度学习的”hello world“了,所以想要入门必须得掌握.新手入门可以考虑使用Keras框架达到快速实现的目的. 完整代码如下: # 1. 导入库和模块 fro ...

  9. springboot+freemarker

    springboot添加freemarker支持 1.application.properties中添加配置 #freemarker config spring.freemarker.allow-re ...

  10. 【报错】java.lang.ClassNotFoundException: org.apache.ibatis.session.SqlSession

    报错 java.lang.ClassNotFoundException: org.apache.ibatis.session.SqlSession 或者 java.lang.ClassNotFound ...