form | 易学教程

Bootstrap学习笔记(二) 表单

阅读更多关于 Bootstrap学习笔记(二) 表单

在 Bootstrap学习笔记（一）排版的基础上继续学习Bootstrap的表单，编辑器及head内代码不变。 3-1 基础表单　　单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。　　在Bootstrap框架中，通过定制了一个类名` form-control `，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。　　　　 1、宽度变成了100% 　　2、设置了一个浅灰色（#ccc）的边框　　3、具有4px的圆角　　4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化　　5、设置了placeholder的颜色为#999 <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class=

Bootstrap之表单

阅读更多关于 Bootstrap之表单

基础表单表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。当然表单除了这几个元素之外，还有 input 、 select 、 textarea 等元素，在Bootstrap框架中，通过定制了一个类名` form-control `，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999 注意：类名“ .form-control ”是添加在 input、select上面的。只控制输入框的样式。注意：当 input 的类型是 checkbox 或者 radio 时，<label> 是包裹住了 <input> 的>。水平表单 Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"

关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）

阅读更多关于关于bootstrap--表单（下拉、输入框、文本域复选框和单选按钮）

html 里面的 role 本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button比如， <div role="checkbox" aria-checked="checked"></div>辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。 1、下拉菜单(单选)： <form role="form"> <div class="form-group"> <select class="form-control"> <option>踢足球</option> <option>游泳</option> <option>慢跑</option> <option>跳舞</option> </select> </div> </form> 2、下拉菜单（多选）： <form role="form"> <div class="form-group"> <select multiple class="form-control"> <option>踢足球</option> <option>游泳<

Bootstrap学习 Form

阅读更多关于 Bootstrap学习 Form

总觉得Form这个东西怎么弄都行，弄弄就知道越弄越难弄了。老实儿地学学bootstrap的做法吧，—.—！如下html表现为label在上，input在下的样式。 form-group设置了margin， form-control控制的input等输入控件设置了其width为100%，这就导致了和label不在一条线上。 <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> form设定样式form-inline并没有为form设定什么样式，而是用来定位里面的内容的 .form-inline .form-group被设置成为：display: inline-block; .form-inline .form-control被设置成为： display: inline-block; 所以下面的HTML表现为所有的内容在一条线上。。。 <form class="form-inline" role="form"> <div class="form-group"> <label class

bootstrap简介与入门

阅读更多关于 bootstrap简介与入门

bootstrap前端框架 1.概念：一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 *好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 2.快速入门： 1. 下载bootstrap 2. 在项目中将这三个文件夹复制 3. 创建html文件，引入必要的资源文件框架示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap HelloWorld</title>  <link href="css/bootstrap.min.css"

ajax文件下载

阅读更多关于 ajax文件下载

今天想做一个csv导出,想做ajax下载 JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的数据。在实现过程中，页面也没有进行刷新。 var form=$("<form>");//定义一个form表单 form.attr("style","display:none"); form.attr("target",""); form.attr("method","post"); form.attr("action",url); var input1=$("<input>"); input1.attr("type","hidden"); input1.attr("name","startdate"); input1.attr("value",$("#startdate").val()); var input2=$("<input>"); input2.attr("type","hidden"); input2.attr("name","enddate"); input2.attr("value",$("#enddate").val()); $("body").append(form);/

form表单提交onclick和onsubmit

阅读更多关于 form表单提交onclick和onsubmit

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。　　提交过程 1、用户点击按钮 ----> 2、触发onclick事件 ----> 3、onclick返回true或未处理onclick ----> 4、触发onsubmit事件 ----> 5、onsubmit未处理或返回true ------> 6、提交表单. onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。第一种：onsubmit <script language="javascript"> function CheckPost () { if (addForm.user.value == "") { alert("请填写用户名！"); addForm.username.focus(); return false; } if (addForm.title.value.length < 5) { alert("标题不能少于5个字符！"); addForm.title.focus(); return false; } return true; } <

封装Vue组件的一些技巧

阅读更多关于封装Vue组件的一些技巧

封装Vue组件的一些技巧本文同步在个人博客 shymean.com 上，欢迎关注写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。本文整理了开发Vue组件的一些技巧，包含大量代码示例。开发环境 vue-cli3 提供了非常方便的功能，可以快速编写一些测试demo，是开发组件必备的环境。下面是安装使用步骤 // 全局安装vue-cli3 npm install -g @vue/cli vue -V // 查看版本是否为3.x // 安装扩展，此后可以快速启动单个vue文件 npm install -g @vue/cli-service-global // 快速启动demo文件 vue serve demo.vue 复制代码如果需要scss，则还需要在目录下安装sass-loader等。下面是使用vue-cli3可能会遇见的几个问题，更多使用教程可以参考：一份超级详细的Vue-cli3.0使用教程[赶紧来试试！] 自定义入口文件如果需要（比如需要开发移动端的组件），可以在使用 vue serve 时自定义html入口文件，在根目录下编写 index.html ，并确保页面包含

Django账户管理部分——登录与注册

阅读更多关于 Django账户管理部分——登录与注册

个人网站功能包括发表、存储个人文章，保存网络上的图片，展示图片，保存并展示个人视频。以下为网站的登陆注册部分。上期文章：个人网站开发前相关项目配置用户登录验证再网站开发中，用户登录验证的一个简单思路通常是将用户输入的信息与数据库中的信息比对，若一致则通过，反之，验证失败. 在本项目中，也采用这种验证方式。这里要用到数据库，Django默认采用自带的sqlite数据库，在这里无需对数据库做改动，若采用MySQL等其它数据库，需要对配置文件做些改动，这里不再详细描述。 django数据模型这里可以将数据模型简单地理解为数据表，编写数据模型即设计数据库的表中有哪些内容，数据模型需要在应用中的models.py文件中编写。下面为一个用户个人信息示例： class UserProfile ( models . Model ) : birth = models . DateTimeField ( max_length = 100 , blank = True ) phone = models . CharField ( max_length = 20 ) def __str__ ( self ) : return 'user {}' . format ( self . user . username ) 在这个模型中，包含了用户的’phone’,'birth’信息，由此可见

spring专题---第三部分MVC---表单标签库

阅读更多关于 spring专题---第三部分MVC---表单标签库

本篇总结内容如下：前言 EL获取业务数据 MVC表单标签获取业务数据 •form标签 •input标签 •password标签 •checkbox标签 •checkboxs标签 •radiobutton标签 •radiobuttons标签 •select标签 •select结合options标签 •select结合option标签 •textarea标签 •hidden标签 •errors标签总结分享与交流前言 spring MVC表单标签库，能够简化我们的代码开发，提高开发效率，那么如何简化代码开发呢？一起来看看吧👇 EL获取业务数据我们首先做一个小案例，用EL表达式获取业务数据，以此来体现出spring MVC表单标签库特点。案例背景：控制器返回业务数据到视图层，视图层通过EL获取业务数据绑定到JSP页面表单中。（1）创建student实体类 public class Student { private String name ; private String password ; //省略setter，getter，toString方法 } （2）创建Handler处理器 @Controller public class excelController { @RequestMapping ( "test" ) public ModelAndView test (

订阅 form