bootstrap4简单使用和入门01-简单表单的使用

基本表单页面

<!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>

转载于:https://www.cnblogs.com/reblue520/p/8557241.html

bootstrap4简单使用和入门01-简单表单的使用相关推荐

写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
简单介绍redis分布式锁解决表单重复提交的问题
在系统中,有些接口如果重复提交,可能会造成脏数据或者其他的严重的问题,所以我们一般会对与数据库有交互的接口进行重复处理.本文就详细的介绍一下redis分布式锁解决表单重复提交,感兴趣的可以了解一下假 ...
bootstrap4导航栏点击弹出表单_Bootstrap4从入门到精通
一.布局 0.课件 1.Bootstrap介绍_栅格系统 2.禁用响应式_响应式分界点二.内容 3.排版_代码 4.图片_图片框 5.表格三.公共样式 6.边框_浮动 7.颜色_Display显示 ...
React入门系列 - 5. 表单与变量的关联
5. 表单与变量的关联在了解表单的时候,我们需要了解一个概念受控组件和非受控组件. 受控组件就是React可以控制这个组件内部所有的东西,比如设置控件的value,可以监听到这个组件改变事件onCh ...
Spring MVC入门示例教程--表单处理
以下示例演示如何编写一个简单的基于Web的应用程序,它使用Spring Web MVC框架使用HTML表单. 首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework ...
php手册学习记录(入门指引处理表单)
表单中的任何元素都在php脚本中自动生效例子,一个简单的HTML表单 <form action="action.php" method="POST"&g ...
04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
form表单中根据值判断是否disabled_Java 0基础入门（Html表单、表单元素）
上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景百度搜索 5173注册如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...
在php中表单传值怎么用,PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
java form 上传文件_JAVA入门[16]-form表单，上传文件
一.如何传递参数 @RequestMapping("/detail") public String detail(@RequestParam("id") int ...

bootstrap4简单使用和入门01-简单表单的使用

bootstrap4简单使用和入门01-简单表单的使用相关推荐

最新文章

热门文章