Bootstrap4 表单

创建表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</p> <h5>Bootstrap4 表单布局</h5> <ul> <li>堆叠表单 (全屏宽度)：垂直方向 </li> <li>内联表单：水平方向</li> </ul> <p>Bootstrap 提供了两种类型的表单布局:</p> <h3>1、堆叠表单</h3> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：</p> <div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"> <pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-check</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre> </div> <p></p> <p>尝试一下 »</p> <p><a href="http://img.e-com-net.com/image/info8/cabf65e03d4f406dbf9a0ee6d55a42d7.png" target="_blank"><img width="534" height="237" title="image" style="margin: 0px; border: 0px currentcolor; border-image: none; display: inline; background-image: none;;border:1px solid black;" alt="Bootstrap4 表单_第1张图片" src="http://img.e-com-net.com/image/info8/cabf65e03d4f406dbf9a0ee6d55a42d7.png"></a></p> <h3>2、内联表单</h3> <p>所有内联表单中的元素都是左对齐的。</p> <p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong></p> <p>内联表单需要在 <form> 元素上添加 .form-inline类。</p> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：</p> <div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"> <pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-inline</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre> </div> <p></p> <p>尝试一下 »</p> <p><a href="http://img.e-com-net.com/image/info8/9b94939d677649ee96f0b05f08586d68.png" target="_blank"><img width="728" height="71" title="image" style="margin: 0px; border: 0px currentcolor; border-image: none; display: inline; background-image: none;" alt="image" src="http://img.e-com-net.com/image/info8/9b94939d677649ee96f0b05f08586d68.png"></a> </p> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1213518612812369920"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Bootstrap4 表单)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1899343573246078976.htm" title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a> <span class="text-muted">IT-司马青衫</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div> </li> <li><a href="/article/1899300819287732224.htm" title="javaweb内置对象request,response,out,session,Application等" target="_blank">javaweb内置对象request,response,out,session,Application等</a> <span class="text-muted">菜鸟小T</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>JSP内置对象是一些不用声明，也不用像一般的java代码一样需要用new去获取实例的对象，这些对象可以直接在JSP页面的脚本部分使用。一、request对象：1.response和request对象是JSP的内置对象中比较重要的两个，这两个对象提供了对服务器和浏览器通信方法的控制，在JSP中，内置对象request封装了用户提交的信息，即使用HTTP协议处理客户请求时，表单提交的数据就存放在req</div> </li> <li><a href="/article/1899160083212857344.htm" title="Django获取request请求中的参数的四种方式" target="_blank">Django获取request请求中的参数的四种方式</a> <span class="text-muted">user_san</span> <a class="tag" taget="_blank" href="/search/Django/1.htm">Django</a> <div>一、查询字符串数据（string）形如：?key1=value1&key2=value2使用1.request.GET.get("key","value")获取2.request.GET.getlist("key"，[])获取最后一个值二、请求体数据（body）：比如：表单数据、json、…2.1表单数据：（只支持post方式发来的请求）request.POST.get("name","")2.1</div> </li> <li><a href="/article/1899135250181713920.htm" title="element-plus动态表单验证" target="_blank">element-plus动态表单验证</a> <span class="text-muted">m0_61618849</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>Vue3结合element-plus表单项可以动态添加/删除首先data格式必须是对象包裹数组import{ref,reactive}from'vue';import{FormInstance}from'element-plus'constfroms=ref()constform=ref({    tableData:[]})给表单绑定form数据表格绑定tableData数据给表单项增加验证规则</div> </li> <li><a href="/article/1899024799724793856.htm" title="datagrid数据及echarts图表导出到Excel" target="_blank">datagrid数据及echarts图表导出到Excel</a> <span class="text-muted">飞舞花下</span> <div>导包：org.apache.poipoi3.9org.apache.poipoi-ooxml3.9org.apache.poipoi-scratchpad3.9jsp页面中datagrid显示的数据及echarts图表显示的代码（包含在form表单中），算了，还是贴上整个jsp算了。统计分析行政区划：示范评级：导出查询清空/***系统页面加载后初始化处理.*/$(function(){$("tab</div> </li> <li><a href="/article/1898963528392437760.htm" title="请谈谈 HTTP 中的安全策略，如何防范常见的Web攻击（如XSS、CSRF）？" target="_blank">请谈谈 HTTP 中的安全策略，如何防范常见的Web攻击（如XSS、CSRF）？</a> <span class="text-muted">程序员黄同学</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a> <div>一、Web安全核心防御机制（一）XSS攻击防御（跨站脚本攻击）1.原理与分类存储型XSS：恶意脚本被持久化存储在服务端（如数据库）反射型XSS：脚本通过URL参数或表单提交触发执行DOM型XSS：通过修改DOM节点动态插入脚本2.防御方案//Express中间件：全局XSS防护constxss=require('xss');app.use((req,res,next)=>{//对所有请求参数进行过</div> </li> <li><a href="/article/1898857997824749568.htm" title="Java直通车系列14【Spring MVC】（深入学习 Controller 编写）" target="_blank">Java直通车系列14【Spring MVC】（深入学习 Controller 编写）</a> <span class="text-muted">浪九天</span> <a class="tag" taget="_blank" href="/search/Java%E7%9B%B4%E9%80%9A%E8%BD%A6/1.htm">Java直通车</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>目录基本概念编写Controller的步骤和要点1.定义Controller类2.映射请求3.处理请求参数4.调用业务逻辑5.返回响应场景示例1.简单的HelloWorld示例2.处理路径变量和请求参数3.处理表单提交4.处理JSON数据5.异常处理基本概念Controller是SpringMVC架构中的核心组件之一，它负责接收客户端的请求，调用相应的业务逻辑进行处理，并将处理结果返回给客户端。通</div> </li> <li><a href="/article/1898832402776649728.htm" title="寒假日记-6" target="_blank">寒假日记-6</a> <span class="text-muted">JacksonWHT</span> <a class="tag" taget="_blank" href="/search/django/1.htm">django</a> <div>使用modelform后，html和类的简便写法以下为使用ModelForm的视图函数：defupdate_depart(request):ifrequest.method=="GET":#[1]GET请求处理：显示编辑表单#从URL参数获取部门ID（注意：这里用GET方法获取路径参数，建议改为URL路径参数更规范）did=request.GET.get('did')#[2]根据ID获取部门对象（</div> </li> <li><a href="/article/1898749789437227008.htm" title="Selenium 库的爬虫实现" target="_blank">Selenium 库的爬虫实现</a> <span class="text-muted">叱咤少帅（少帅）</span> <a class="tag" taget="_blank" href="/search/Python%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E9%AB%98%E6%89%8B/1.htm">Python从入门到高手</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a> <div>Selenium是什么？Selenium是一个用于自动化Web应用程序测试的工具。它提供了一个用于测试网站的框架，可以模拟用户在浏览器中的操作，如点击链接、填写表单、提交数据等。Selenium可以在多种浏览器和操作系统上运行，并且支持多种编程语言，如Python、Java、JavaScript等。通过编写测试脚本，开发人员可以使用Selenium来自动化执行各种Web应用程序的测试，以确保它们在</div> </li> <li><a href="/article/1898703379845148672.htm" title="html5表单属性的用法" target="_blank">html5表单属性的用法</a> <span class="text-muted">TechFrontRunner</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>文章目录HTML5表单详解与代码案例一、表单的基本结构二、表单元素及其属性三、表单的高级应用与验证四、表单布局与样式HTML5表单详解与代码案例HTML5表单是网页中用于收集用户输入并提交到服务器的重要元素，广泛应用于登录页面、客户留言、搜索产品等场景。本文将详细介绍HTML5表单的基本结构、常用元素及其属性，并通过代码案例进行解释。一、表单的基本结构HTML5表单的基本结构由标签定义，该标签包含</div> </li> <li><a href="/article/1898702749793579008.htm" title="HTML5的新属性" target="_blank">HTML5的新属性</a> <span class="text-muted">crary,记忆</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/1.htm">前端知识总结</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>pattern：用于指定输入字段的正则表达式模式。在提交表单前，输入将验证是否符合指定的模式。pattern属性是HTML5中用于表单验证的一个属性，它用于指定一个正则表达式，以验证输入字段中的值是否符合特定的模式。该属性通常与元素一起使用，并适用于text、password、email、search和tel等类型的输入字段。含义和用法：验证输入格式：pattern属性的值应该是一个有效的正则表达</div> </li> <li><a href="/article/1898702621494013952.htm" title="HTML5——新增属性" target="_blank">HTML5——新增属性</a> <span class="text-muted">野性的鬼</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>除了html的基础标签，在html5中增加了一些新的属性，下边总结分类一下这些新的属性。有绿色背景的为以后可能的常用属性。目录1、新增语义元素2、被删元素3、新增表单控件4、新增输入类型新增的输入类型：新增的输入属性：5、新增图像6、新增媒介元素7、总结：1、新增语义元素——定义页面独立的内容区域。——定义页面的侧边栏内容。——定义section或document（文档）的页脚。——定义文档的头部</div> </li> <li><a href="/article/1898693920825602048.htm" title="HTML5 表单属性" target="_blank">HTML5 表单属性</a> <span class="text-muted">lly202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>HTML5表单属性引言HTML5作为新一代的网页标准，带来了许多新的特性和改进。在表单处理方面，HTML5引入了一系列新的表单属性，这些属性使得表单的创建和使用更加灵活和强大。本文将详细介绍HTML5表单属性，包括其功能、使用方法和注意事项。一、HTML5表单属性概述HTML5表单属性主要包括以下几类：表单控制属性：如required、pattern等，用于控制表单元素的输入格式和必填项。表单输入</div> </li> <li><a href="/article/1898688230937653248.htm" title="使用 JavaScript 和 HTML5 实现强大的表单验证" target="_blank">使用 JavaScript 和 HTML5 实现强大的表单验证</a> <span class="text-muted">vvilkim</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>表单验证是Web开发中不可或缺的一部分，它确保用户输入的数据符合预期格式和要求。通过客户端验证，我们可以提高用户体验，减少不必要的服务器请求。然而，客户端验证并不能替代服务器端验证，因为客户端验证可以被绕过。本文将介绍如何使用JavaScript和HTML5实现强大的表单验证。HTML5内置验证HTML5提供了一些内置的表单验证功能，例如required,min,max,pattern等。这些属性</div> </li> <li><a href="/article/1898673720562610176.htm" title="微信小程序开发之——调查问卷-表单数据绑定(2.2.4)" target="_blank">微信小程序开发之——调查问卷-表单数据绑定(2.2.4)</a> <span class="text-muted">PGzxc</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>一概述表单数据绑定的实际需求将data数据替换表单默认数据服务器返回data数据给微信小程序二实际需求前面的小节中，表单是完全编写在WXML中的，然而在实际开发中，会经常需要对表单的默认值进行变更。例如，用户发现已经提交的调查问卷中有些内容填写错误，需要进行修改，希望程序提供一个修改的表单，该表单默认已经填写了上次提交的内容，这就需要从服务器获取已经提交的数据，然后将数据填入到表单中三将data数</div> </li> <li><a href="/article/1898660597675913216.htm" title="element的form校验问题" target="_blank">element的form校验问题</a> <span class="text-muted">lydxwj</span> <a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6%E6%8F%92%E4%BB%B6/1.htm">框架插件</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>环境：elementui：V2.13.1vue：2.X问题：表单项必填校验，内容为空时没问题，填写内容后不实时移除必填提示信息新增的动态表单项，不能实时校验，执行form.validate会进行校验分析：form标签上面增加rules来进行校验，el-form-item标签上面需要加prop属性，由于键中存在横杠所以在el-form-item中的表单项进行双向绑定值时是v-model="formD</div> </li> <li><a href="/article/1898656327132049408.htm" title="第三章：组件开发实战 - 第二节 - Tailwind CSS 表单元素样式处理" target="_blank">第三章：组件开发实战 - 第二节 - Tailwind CSS 表单元素样式处理</a> <span class="text-muted"></span> <div>在前端开发中，表单元素的样式处理一直是一个重要且复杂的话题。不同浏览器对表单元素有着不同的默认样式，而且某些表单元素的样式难以直接通过CSS进行修改。本节将介绍如何使用TailwindCSS优雅地处理各种表单元素的样式，确保在不同浏览器中呈现一致的外观。基础表单样式设置输入框样式在TailwindCSS中，我们可以使用多个工具类组合来创建美观的输入框样式：这个组合包含以下样式特性：w-full:宽</div> </li> <li><a href="/article/1898593767640854528.htm" title="第三章：组件开发实战 - 第一节 - Tailwind CSS 常用UI组件构建" target="_blank">第三章：组件开发实战 - 第一节 - Tailwind CSS 常用UI组件构建</a> <span class="text-muted"></span> <div>基础按钮组件1.按钮样式变体基础按钮轮廓按钮小按钮大按钮禁用按钮2.图标按钮添加表单组件1.输入框用户名2.下拉选择框选项1选项2选项3选项1选项2卡片组件1.基础卡片卡片标题卡片描述内容2.功能卡片促销产品名称产品描述¥99.00加入购物车导航组件1.顶部导航栏首页产品关于2.侧边导航控制面板仪表盘提示和对话框1.消息提示操作成功！出现错误！2.模态对话框确认操作确定要执行此操作吗？取消确定最佳</div> </li> <li><a href="/article/1898554682456993792.htm" title="如何在PHP中实现表单处理？" target="_blank">如何在PHP中实现表单处理？</a> <span class="text-muted">破碎的天堂鸟</span> <a class="tag" taget="_blank" href="/search/PHP%E5%AD%A6%E4%B9%A0/1.htm">PHP学习</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在PHP中实现表单处理涉及多个关键步骤，包括表单创建、数据接收、验证、处理及存储。以下是详细实现指南，结合了最佳实践和安全措施：一、表单处理基本流程PHP表单处理的核心流程包括以下步骤：创建HTML表单：定义输入字段和提交方式。提交数据：通过POST或GET方法发送数据。接收数据：使用超全局变量$_POST或$_GET获取数据。验证数据：检查数据的合法性、完整性和安全性。处理数据：存储到数据库、发</div> </li> <li><a href="/article/1898448808975593472.htm" title="VUE2表单检验及提示的消除" target="_blank">VUE2表单检验及提示的消除</a> <span class="text-muted">moxiaoran5753</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>表单的检验规则如下：rules:{brandId:[{required:true,message:"品牌不能为空",trigger:"blur"}],seriesId:[{required:true,message:"系列不能为空",trigger:"blur"}],levelName:[{required:true,message:"等级名称不能为空",trigger:"blur"}],firs</div> </li> <li><a href="/article/1898417351469101056.htm" title="大事件开发 - 前端学习笔记" target="_blank">大事件开发 - 前端学习笔记</a> <span class="text-muted">我只是什么都不会而已</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.环境准备1.1创建Vue项目使用vite创建Vue3工程。目录结构调整，确保清晰的项目结构。1.2安装依赖npminstallaxioselement-plussassElement-Plus：UI组件库Axios：HTTP请求库Sass：CSS预处理器2.前后端连接（以注册功能为例）2.1搭建注册页面使用Element-Plus组件搭建注册表单。（就是前端一些样式和组件的代码可以从Eleme</div> </li> <li><a href="/article/1898389705360207872.htm" title="如何获得Manus邀请码的详细步骤和策略" target="_blank">如何获得Manus邀请码的详细步骤和策略</a> <span class="text-muted">liuhaoran___</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>前言：最近Manus可谓是火的一塌糊涂，那如何获得Manus邀请码？一、官方渠道详解官网申请流程：首先，访问Manus的官方网站（https://manus.im/）并注册一个账号。登录后，导航到“邀请码申请”或类似的页面，填写详细的申请表单。这通常包括你的基本信息、专业领域、使用目的等。提交申请后，系统将你的申请加入等待队列。由于申请人数众多，审核时间可能需要1-3天，请耐心等待。一旦审核通过，</div> </li> <li><a href="/article/1898376299559317504.htm" title="每日面试题-HTTP 中 GET 和 POST 的区别是什么？" target="_blank">每日面试题-HTTP 中 GET 和 POST 的区别是什么？</a> <span class="text-muted">晚夜微雨问海棠呀</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>用途：GET：用于从服务器获取资源。通常用于请求数据，如查询数据库或获取网页内容。POST：用于向服务器发送数据。通常用于提交表单数据或上传文件。数据传输方式：GET：数据通过URL传递，可以看到URL中的参数和值。POST：数据包含在请求体中，不会显示在URL中。数据长度限制：GET：由于数据在URL中传递，而URL的长度是有限制的（通常为2048个字符），因此GET请求的数据量有限。POST：</div> </li> <li><a href="/article/1898361075972239360.htm" title="HTML中元素和标签有什么区别？" target="_blank">HTML中元素和标签有什么区别？</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/HTML%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91/1.htm">HTML网站开发</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E4%B9%8Bhtml/1.htm">前端基础入门三大核心之html</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a> <div>HTML中元素和标签有什么区别？元素（Element）示例一：元素的基本结构示例二：自闭合元素示例三：嵌套元素标签（Tag）示例四：标签与属性示例五：标签的使用场景示例六：标签与浏览器解析不同角度的功能使用思路角度一：选择器和CSS角度二：JavaScript操作角度三：语义化标签角度四：表单元素角度五：响应式设计实际工作中的使用技巧在HTML（HyperTextMarkupLanguage）的世</div> </li> <li><a href="/article/1898335436711981056.htm" title="Django官方教程(六)【创建你的第一个 Django 项目,第四部分】" target="_blank">Django官方教程(六)【创建你的第一个 Django 项目,第四部分】</a> <span class="text-muted">.NET跨平台</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/Django/1.htm">Django</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95/1.htm">表单</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8/1.htm">应用</a> <div>创建你的第一个Django项目，第四部分这一篇从第三部分（zh）结尾的地方继续讲起。我们将继续编写投票应用，本章着力于简单的表单处理和精简我们的代码。编写一个简单的表单让我们更新一下在上一个教程中编写的投票详细页面的模板（“polls/detail.html”），让它包含一个HTML元素：{{question.question_text}}{%iferror_message%}{{error_me</div> </li> <li><a href="/article/1898201495011127296.htm" title="组件封装避坑指南：少写1000行重复代码的秘诀！" target="_blank">组件封装避坑指南：少写1000行重复代码的秘诀！</a> <span class="text-muted">程序员小续</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/reactjs/1.htm">reactjs</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>一、前端组件的分类前端组件可以按照功能、用途、通用性等不同维度进行分类，主要包括以下几类：1.按功能分类展示型组件（UI组件）只负责UI视图渲染，不涉及业务逻辑例如：按钮（Button）、输入框（Input）、表单（Form）、卡片（Card）等业务逻辑组件具有特定业务逻辑，通常和接口交互例如：用户列表（UserList）、订单管理（OrderTable）等功能组件（工具类组件）提供功能性封装，通</div> </li> <li><a href="/article/1898056292363202560.htm" title="vee-validate验证设置中文但是无效" target="_blank">vee-validate验证设置中文但是无效</a> <span class="text-muted">桃子不吃李子</span> <a class="tag" taget="_blank" href="/search/%E6%8A%A5%E9%94%99/1.htm">报错</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>无效代码：importzh_CNfrom'vee-validate/dist/locale/zh_CN'Vue.use(VeeValidate)//表单验证VeeValidate.Validator.localize('zh_CN',{message:{...zh_CN.messages,is:(field)=>`${field}必须与密码相同`},attributes:{phone:'手机号',</div> </li> <li><a href="/article/1897971865943601152.htm" title="Python中的PDF处理工具：PyPDF2和ReportLab使用指南" target="_blank">Python中的PDF处理工具：PyPDF2和ReportLab使用指南</a> <span class="text-muted">萧鼎</span> <a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6%E6%95%99%E7%A8%8B/1.htm">python基础到进阶教程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/pypdf2/1.htm">pypdf2</a><a class="tag" taget="_blank" href="/search/reportlab/1.htm">reportlab</a> <div>Python中的PDF处理工具：PyPDF2和ReportLab使用指南在日常工作和项目中，PDF文件处理是个常见需求，不论是合并报告、加密文档、填充表单，还是生成发票。Python中有许多用于操作PDF文件的库，其中PyPDF2和ReportLab是两个广泛使用的工具：前者用于PDF文档的读取和修改，后者用于从头生成PDF文件。在这篇博客中，我们将介绍如何使用PyPDF2和ReportLab完成</div> </li> <li><a href="/article/1897894180206735360.htm" title="FcDesigner页面样式错乱/功能不正常解决办法" target="_blank">FcDesigner页面样式错乱/功能不正常解决办法</a> <span class="text-muted">低代码研究员</span> <a class="tag" taget="_blank" href="/search/FormCreate/1.htm">FormCreate</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95/1.htm">动态表单</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1%E5%99%A8/1.htm">表单设计器</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>form-create-designer是一款开源的低代码表单设计器，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。源码地址:Github|Gitee|文档|官网|在线演示问题分析：如果页面样式出现错乱或按钮点击没有任何响应，通常是因为某些UI组件没有正确挂载。解决方法：查</div> </li> <li><a href="/article/1897744802510860288.htm" title="Python爬虫实战：四个常见案例详解！" target="_blank">Python爬虫实战：四个常见案例详解！</a> <span class="text-muted">Python_trys</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80/1.htm">Python基础</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/Python%E7%88%AC%E8%99%AB/1.htm">Python爬虫</a><a class="tag" taget="_blank" href="/search/Python%E5%85%A5%E9%97%A8/1.htm">Python入门</a> <div>包含编程籽料、学习路线图、爬虫代码、安装包等！【点击这里领取！】网络爬虫是数据采集的重要工具，Python凭借其丰富的库和简洁的语法，成为了爬虫开发的首选语言。本文将详细介绍四个常见的Python爬虫实战案例，帮助你从入门到精通。目录案例一：静态网页数据抓取案例二：动态网页数据抓取案例三：模拟登录与表单提交案例四：数据存储与导出1.环境准备在开始之前，确保你已经安装了以下Python库：pipin</div> </li> <li><a href="/article/48.htm" title="开发者关心的那些事" target="_blank">开发者关心的那些事</a> <span class="text-muted">圣子足道</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98/1.htm">支付</a> <div>我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用</div> </li> <li><a href="/article/175.htm" title="负载均衡器技术Nginx和F5的优缺点对比" target="_blank">负载均衡器技术Nginx和F5的优缺点对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div>        对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高</div> </li> <li><a href="/article/302.htm" title="LeetCode[Math] - #9 Palindrome Number" target="_blank">LeetCode[Math] - #9 Palindrome Number</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如</div> </li> <li><a href="/article/429.htm" title="画图板的基本实现" target="_blank">画图板的基本实现</a> <span class="text-muted">15700786134</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div> 要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示</div> </li> <li><a href="/article/556.htm" title="linux的ps命令" target="_blank">linux的ps命令</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行</div> </li> <li><a href="/article/683.htm" title="Android 音乐播放器 下一曲 连续跳几首歌" target="_blank">Android 音乐播放器 下一曲 连续跳几首歌</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H</div> </li> <li><a href="/article/810.htm" title="java导出txt文件的例子" target="_blank">java导出txt文件的例子</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu</div> </li> <li><a href="/article/937.htm" title="Scala stack试玩, 提高第三方依赖下载速度" target="_blank">Scala stack试玩, 提高第三方依赖下载速度</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/sbt/1.htm">sbt</a> <div>原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r</div> </li> <li><a href="/article/1064.htm" title="phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。" target="_blank">phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/spider/1.htm">spider</a> <div>1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil</div> </li> <li><a href="/article/1191.htm" title="JAVA IO FileInputStream和FileOutputStream，字节流的打包输出" target="_blank">JAVA IO FileInputStream和FileOutputStream，字节流的打包输出</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java%E6%A0%B8%E5%BF%83%E6%80%9D%E6%83%B3/1.htm">java核心思想</a><a class="tag" taget="_blank" href="/search/JAVA+IO%E6%93%8D%E4%BD%9C/1.htm">JAVA IO操作</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E6%B5%81/1.htm">字节流</a> <div>在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream</div> </li> <li><a href="/article/1318.htm" title="Spring基础实例（依赖注入和控制反转）" target="_blank">Spring基础实例（依赖注入和控制反转）</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil</div> </li> <li><a href="/article/1445.htm" title="HR看重的十大技能" target="_blank">HR看重的十大技能</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8D%87/1.htm">提升</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E5%8A%9B/1.htm">能力</a><a class="tag" taget="_blank" href="/search/HR/1.htm">HR</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a> <div>    一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决</div> </li> <li><a href="/article/1572.htm" title="【Thrift一】Thrift编译安装" target="_blank">【Thrift一】Thrift编译安装</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a> <div>什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s</div> </li> <li><a href="/article/1699.htm" title="【Avro三】Hadoop MapReduce读写Avro文件" target="_blank">【Avro三】Hadoop MapReduce读写Avro文件</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果</div> </li> <li><a href="/article/1826.htm" title="nginx定制500，502，503，504页面" target="_blank">nginx定制500，502，503，504页面</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx%E3%80%80%E9%94%99%E8%AF%AF%E6%98%BE%E7%A4%BA/1.htm">nginx　错误显示</a> <div>server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配</div> </li> <li><a href="/article/1953.htm" title="java-1.二叉查找树转为双向链表" target="_blank">java-1.二叉查找树转为双向链表</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%9F%A5%E6%89%BE%E6%A0%91/1.htm">二叉查找树</a> <div> import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \ </div> </li> <li><a href="/article/2080.htm" title="Netty源码学习-HTTP-tunnel" target="_blank">Netty源码学习-HTTP-tunnel</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan</div> </li> <li><a href="/article/2207.htm" title="JSONUtil.serialize(map)和JSON.toJSONString(map)的区别" target="_blank">JSONUtil.serialize(map)和JSON.toJSONString(map)的区别</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/val%28%29/1.htm">val()</a> <div> JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul</div> </li> <li><a href="/article/2334.htm" title="Hibernate缓存总结" target="_blank">Hibernate缓存总结</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a><a class="tag" taget="_blank" href="/search/hibernate%E7%BC%93%E5%AD%98/1.htm">hibernate缓存</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%A4%A7%E6%A1%86%E6%9E%B6/1.htm">三大框架</a> <div>一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib</div> </li> <li><a href="/article/2461.htm" title="CentOs6" target="_blank">CentOs6</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang</div> </li> <li><a href="/article/2588.htm" title="10款用 jquery 实现滚动条至页面底端自动加载数据效果" target="_blank">10款用 jquery 实现滚动条至页面底端自动加载数据效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>  无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条</div> </li> <li><a href="/article/2715.htm" title="ImageButton去边框&Button或者ImageButton的背景透明" target="_blank">ImageButton去边框&Button或者ImageButton的背景透明</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/imagebutton/1.htm">imagebutton</a> <div>在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut</div> </li> <li><a href="/article/2842.htm" title="JSP之c:foreach" target="_blank">JSP之c:foreach</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/forearch/1.htm">forearch</a> <div>原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1</div> </li> <li><a href="/article/2969.htm" title="Android实现主动连接蓝牙耳机" target="_blank">Android实现主动连接蓝牙耳机</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS</div> </li> <li><a href="/article/3096.htm" title="android学习轨迹之四：org.json.JSONException: No value for" target="_blank">android学习轨迹之四：org.json.JSONException: No value for</a> <span class="text-muted">hyz301</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&</div> </li> <li><a href="/article/3223.htm" title="干货分享：从零开始学编程 系列汇总" target="_blank">干货分享：从零开始学编程 系列汇总</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 </div> </li> <li><a href="/article/3350.htm" title="jquery-autocomplete 使用手册" target="_blank">jquery-autocomplete 使用手册</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja</div> </li> <li><a href="/article/3477.htm" title="PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改" target="_blank">PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改</a> <span class="text-muted">超声波</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户</div> </li> <li><a href="/article/3604.htm" title="数据仓库数据模型之：极限存储--历史拉链表" target="_blank">数据仓库数据模型之：极限存储--历史拉链表</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/%E6%9E%81%E9%99%90%E5%AD%98%E5%82%A8/1.htm">极限存储</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B/1.htm">数据模型</a><a class="tag" taget="_blank" href="/search/%E6%8B%89%E9%93%BE%E5%8E%86%E5%8F%B2%E8%A1%A8/1.htm">拉链历史表</a> <div>在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10</div> </li> <li><a href="/article/3731.htm" title="10点睛Spring MVC4.1-全局异常处理" target="_blank">10点睛Spring MVC4.1-全局异常处理</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>