精华内容
下载资源
问答
  • web创建form表单验证码

    千次阅读 2016-01-09 16:37:50
    web创建form表单验证码

    首先是工具类,用来绘制验证码

    public class Verify {
        //字符串,用来存储验证码中的字符
        private String string;
    
        public void setString(String string) {
            this.string = string;
        }
        public String getString() {
            return string;
        }
        //绘制验证码方法
        public void getVerify(int width , int height , OutputStream out){
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D graphics = image.createGraphics();
    
            // 绘制面板
            graphics.setColor(Color.white);
            graphics.fill3DRect(0, 0, width, height, true);
    
            // 边框大小,颜色
            graphics.setColor(Color.black);
            graphics.draw3DRect(0, 0, width-1, height-1, true);
    
            //随机存储四个字符
            String string = "qwertyuiopasdfghjklzxcvbnm1234567890";
            StringBuffer sb = new StringBuffer();
            Random random = new Random();
            String blank = "     ";
            for (int i = 0; i < 4; i++) {
                int next = random.nextInt(string.length());
                sb.append(string.charAt(next)+blank);
            }
    
            //绘制干扰线
            for(int i =0 ;i<4;i++){
                //创建线的坐标
                int x1 = random.nextInt(width);
                int y1 = random.nextInt(height);
                int x2 = random.nextInt(width);
                int y2 = random.nextInt(height);
                //创建颜色RGB三个范围值
                int a = random.nextInt(255);
                int b = random.nextInt(255);
                int c = random.nextInt(255);
                graphics.setColor(new Color(a,b,c));
                graphics.drawOval(x1, y1, x2, y2);
            }
    
            //绘制四个验证码
            graphics.setColor(Color.red);
            String str = sb.toString();
            graphics.drawString(str, width/8, height/2);
    
            //拆分字符
            StringBuffer buffer = new StringBuffer();
            String[] split = str.split(blank);
            for(String s : split){
                buffer.append(s);
            }
    
            //存储字符串
            setString(buffer.toString());
    
            try {
                ImageIO.write(image, "jpeg", out);
            } catch (IOException e) {
                throw new RuntimeException(e);
            }
    
    
        }
    
    }

    后台处理

        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            //设置response的数据格式
            response.setContentType("image/jpeg");  
            //画验证码
            Verify verify = new Verify();
            verify.getVerify(100, 50, response.getOutputStream());
        }

    jsp部分,给”看不清”设置超链接,同时加上点击事件,时间处理时变换img的src属性,为了避免读取缓存,给超链接附加上了时间+随机数

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <script type="text/javascript">
            function refresh(){
                //使用时间作为参数避免浏览器从缓存
                document.getElementById("img1").src="/day1116/Demo?now="+new Date()+""+Math.random();
            }
        </script>
      </head>
    
      <body>
        <img src="${pageContext.request.contextPath}/Demo" id="img1"/><a href="#" onclick="refresh()">看不清,换一张</a>
      </body>
    </html>
    展开全文
  • 创建表单web

    2015-04-05 18:33:40
    html创建表单web
    <html>
    <head>
     <title>表单web页</title>
    </head>
    <body>
    <form action="" method="post">
    <!--输入文本框,size表示显示的长度,maxlength表示最多显示长度 -->
    编  号:<input type="text" name="userid" value="NO." size="2" maxlength="2" /><br />
    <!-- 输入的文本框,通过value指定其显示的默认值 -->
    用户名:<input type="text" name="username" value="请输入用户名" /><br />
    <!-- 密码框,所有输入的内容都以密文形式出现-->
    密  码:<input type="password" name="userpass" value="请输入密码" /><br />
    性  别:<input type="radio" name="sex" value="男" checked />男
    				  <input type="radio" name="sex" value="女" />女<br />
    部  门:<select name="dept">
    						<option value="技术部">技术部</option>
    						<option value="销售部"SELECTED>销售部</option>
    						<option value="财务部">财务部</option>
    				   </select><br />
    兴  趣:
    				   <input type="checkbox" name="inst" value="唱歌" />唱歌
    				   <input type="checkbox" name="inst" value="游泳" />游泳
    				   <input type="checkbox" name="inst" value="跳舞" />跳舞
    				   <input type="checkbox" name="inst" value="编程" checked/>编程
    				   <input type="checkbox" name="inst" value="上网" />上网<br />
    <!--大文本输入框30x3 -->
    说  明:<textarea name="note" cols="30" rows="3">
    我爱编程
    	</textarea><br />
    	<!-- 提交表单和重置表单-->
    	<input type="submit" value="注册" /><input type="reset" value="重置" />
    	</form>												<!--表单结束-->
    </body>
    </html>

    展开全文
  • 它可以很方便的创建表单,分享出去,主要用于一些信息收集的工作。 由于搜出来的官方教程过于陈旧,界面基本和现在不一样了,小能手经过了一番摸索后,终于搞定。这篇笔记做个实践记录。 本文作者twow...

    1 介绍

    Podio Webform 使用的人不多,至少国内是这样的。它可以很方便的创建表单,分享出去,主要用于一些信息收集的工作。

    由于搜出来的官方教程过于陈旧,界面基本和现在不一样了,小能手经过了一番摸索后,终于搞定。这篇笔记做个实践记录。

    本文作者twowinter,转载请注明作者:http://blog.csdn.net/iotisan/

    2 具体操作

    2.1 创建工作空间

    2.2 安装 Webforms 应用

    应用市场里面搜 Webforms,现在已经不叫 Submission。看来目前是改名为 Simple Webform DEMO,安装之。

    2.3 修改表项模版及表单配置。

    接下来在 DEMO 表格上进行修改,最核心的是修改模版。

    第一个圆圈处是表项模版,涉及具体的表项。

    第二个圆圈处是表单的配置,涉及表项之外的一些配置,例如标题、主题样式等。

    3 总体效果

    将生成的链接分享出去,自己填写做个测试。

    End


    展开全文
  • 简单创建易用的web表单
  • Web表单设计 创建高可用性的网页表单
  • 预订表格可以在网站上达到许多目的。 您可以使用它们来允许您的访客预订旅馆客房或热门活动的... 在本教程中,我将向您展示如何使用CodeCanyon的Smart Forms脚本为您的网站创建预订表单。 为什么要使用智能表格? ...

    预订表格可以在网站上达到许多目的。 您可以使用它们来允许您的访客预订旅馆客房或热门活动的门票。 它们还可以用于其他事情,例如与客户预约约会。

    有许多插件和脚本可用于将预订表单添加到您的网站。 针对您的情况的正确选择取决于您要寻找的功能以及易用性和预算等因素。 在本教程中,我将向您展示如何使用CodeCanyon的Smart Forms脚本为您的网站创建预订表单。

    为什么要使用智能表格?

    在我们开始深入探讨该主题之前,我想解释一下为什么我选择Smart Forms来完成此任务。

    您将在Smart Forms说明页面上注意到的第一件事是,它提供了许多功能并允许您创建各种形式的表单。 您正在创建的网站很有可能至少需要其他几种不同类型的表单,例如联系表单或评论表单。 使用Smart Forms,您将能够在很短的时间内创建所有这些表单。

    在定制和功能方面,您还会有很多选择。 该脚本会定期更新,并会不断接收新功能。 它还以三种独特的样式和配色方案提供了大量具有不同形式的入门模板。 这样,您可以确定创建的任何表单都可以与网页的其余部分完美融合。

    我们将要建设的

    让我们使用智能表单创建预订表单的前端。 我们将创建一个表格来预订酒店房间。 相同的原则将适用于为活动或任何其他类型的表单创建预订表单。 您只需要对输入字段进行适当的更改。

    这是我们要做的:

    订房表格

    入门

    如果还没有,那么第一步是从CodeCanyon 购买脚本 购买脚本后,您将能够下载文件,并且还可以获得六个月的终身免费更新和支持。

    解压缩下载的文件后 zip文件,您会注意到它已经包含了许多模板,可用于所有内容,从简单的注释和联系表单到一​​些多步骤表单。 您可以简单地在项目中开始使用这些模板中的任何一个,并且最好在十到十五分钟内完成。

    为了帮助您了解所有基本知识,我们将从头开始创建预订表格。

    创建预订表格

    预订表单页面的标记一开始应该看起来像这样。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title> Booking Form - XYZ Hotels </title>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="path/to/css/smart-forms.css">
    	<link rel="stylesheet" href="path/to/css/font-awesome.min.css">	   
      </head>
      <body>
     
    	<!-- OUR BOOKING FORM MARKUP -->
     
      </body>
    </html>

    Smart Forms依靠Font Awesome来将所有图标添加到表单中,因此您必须加载两个CSS文件。

    现在,我们将继续进行预订表格的内容。 Smart Forms框架将表单分为三部分:表单标题,表单主体和表单页脚。

    顶部的表单标题部分用于以可显示的方式显示表单标题。 对于预订表格,您可以说诸如在线预订房间在数分钟内预订之类的内容

    表单主体将包含一堆访客已填写的元素。 您可以在此处询问任何相关信息,例如成年客人的人数和陪同他们的儿童人数。 同样,您可以询问他们的停留时间,联系信息以及其他必要的详细信息。

    表单页脚部分包含用于提交或取消表单的按钮。 它在表单底部显着显示。

    添加智能表单样板

    这是我们需要在网页正文中添加的表格标记,以显示我们的预订表格。

    <div class="smart-wrap">
      <div class="smart-forms smart-container wrap-2">
      
        <div class="form-header header-primary">
          <h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4>
        </div>
        
        <form method="post" action="/" id="contact">
          <div class="form-body">
          
           <!-- OUR FORM ELEMENTS WILL GO HERE -->                                                
            
          </div>
          <div class="form-footer">
            <button type="submit" class="button btn-primary">Confirm Booking</button>
            <button type="reset" class="button">Cancel</button>
          </div>
          
        </form>
        
      </div>
    </div>

    到目前为止,我们已经将所有标记添加到了页面中,您应该得到与下图类似的内容。

    预订表格的页眉和页脚

    建立表单组件

    现在,将我们的实际表单元素添加到预订表单中。 这是您需要这样做的标记。 它将进入带有form-body类的div标签内。

    <div class="section">
      <label for="guestname" class="field-label">Please Enter Your Name</label>
      <label for="guestname" class="field prepend-icon">
        <input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe">
        <span class="field-icon"><i class="fa fa-user"></i></span>  
      </label>
    </div>
                  
    <div class="frm-row">
      <div class="section colm colm6">
        <label for="guestemail" class="field-label">Email Address</label>
        <label for="guestemail" class="field prepend-icon">
          <input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com">
          <span class="field-icon"><i class="fa fa-envelope"></i></span>  
        </label>
      </div>
      
      <div class="section colm colm6">
        <label for="guestelephone" class="field-label">Telephone / Mobile</label>
        <label for="guestelephone" class="field prepend-icon">
          <input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number">
          <span class="field-icon"><i class="fa fa-phone-square"></i></span>  
        </label>
      </div>
    </div>
    
    <div class="frm-row">
      <div class="section colm colm6">
        <label for="adults" class="field-label">Number of Adults</label>
        <label for="adults" class="field prepend-icon">
          <input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults">
          <span class="field-icon"><i class="fa fa-users"></i></span>  
        </label>
      </div>
      
      <div class="section colm colm6">
        <label for="children" class="field-label">Number of Children</label>
        <label for="children" class="field prepend-icon">
          <input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children">
          <span class="field-icon"><i class="fa fa-users"></i></span>  
        </label>
      </div>
    </div>
    
    <div class="frm-row">
      <div class="section colm colm6">
        <label for="checkin" class="field-label">Check-in Date</label>
        <label for="checkin" class="field prepend-icon">
          <input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy">
          <span class="field-icon"><i class="fa fa-calendar"></i></span>  
        </label>
      </div>
      
      <div class="section colm colm6">
        <label for="checkout" class="field-label">Check-out Date</label>
        <label for="checkout" class="field prepend-icon">
          <input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy">
          <span class="field-icon"><i class="fa fa-calendar"></i></span>  
        </label>
      </div>
    </div>
    
    <div class="spacer-t20 spacer-b30">
      <div class="tagline"><span>Please answer these questions for a pleasant stay</span></div>
    </div>
    
    <div class="frm-row">
      <div class="option-group field">
      
        <div class="section colm colm6">
          <label class="switch">
            <input type="checkbox" name="switch1" id="switch1" value="switch1">
            <span class="switch-label" data-on="YES" data-off="NO"></span>
            <span>Will you be bringing a pet?</span>
          </label>
        </div>
            
        <div class="section colm colm6">
          <label class="switch">
            <input type="checkbox" name="switch2" id="switch2" value="switch2">
            <span class="switch-label" data-on="YES" data-off="NO"></span>
            <span>Do you need us to pick you up?</span>
          </label>
        </div>
                  
      </div>
    </div>
    
    
    
    <div class="section">
      <label for="comment" class="field-label">Anything else we should know about?</label>
      <label for="comment" class="field prepend-icon">
        <textarea class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"></textarea>
        <span class="field-icon"><i class="fa fa-comments"></i></span>
        <span class="input-hint"> 
          <strong>Please:</strong> Be as descriptive as possible
        </span>   
      </label>
    </div>

    将所有标记添加到表单后,它现在应如下图所示。

    完整的预订表格

    现在看来似乎很多代码,但是您可以从不同的入门模板中复制大部分代码。 之后,您只需要对标记进行少量更改即可对其进行自定义。 例如,您可以轻松更改Font Awesome图标的类,以更准确地表示输入字段。

    重要的是要记住,在更改表单元素的某些属性时应格外小心,因为这会影响表单的整体外观或行为。 例如,您可以通过更改colm类来更改不同元素的宽度。 当一行中的两个输入元素具有类colm8colm4 ,它们的宽度之比为2:1。 如果数字加起来不等于12,那么您还将在该行中看到一些空格。

    每当您更改前端字段的name属性的值时,请确保更改后端PHP文件中的相应值。 这样,您将不会丢失用户提供的任何表单数据。

    在我们的预订表格中添加验证

    Smart Forms框架依靠核心jQuery和许多其他与jQuery相关的插件为您提供不同的功能,例如月份和时间选择器或拖放文件的功能。 您可以使用总共22个不同JavaScript文件来增强表单的功能。

    确保仅包括使您的特定表单起作用所需的文件。 文档中提到了每个文件的功能。 在我们的案例中,我们将需要包括核心jQuery文件,jQuery UI文件和表单验证文件。

    您只需将以下代码添加到您的网页即可包含所有JavaScript文件。 您可以将其放在文档的头部或正文的末尾。

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>

    添加文件后,需要添加一些代码以开始验证过程或将其他元素(例如日期范围选择器)添加到表单UI。 这是您需要添加的代码。

    <script type="text/javascript">
    $("#booking-form").validate();
    
    $("#checkin").datepicker({
    	defaultDate: "+1w",
    	changeMonth: false,
    	numberOfMonths: 1,
    	prevText: '<i class="fa fa-chevron-left"></i>',
    	nextText: '<i class="fa fa-chevron-right"></i>',
    	onClose: function( selectedDate ) {
    		$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
    	}
    });
    
    $("#checkout").datepicker({
    	defaultDate: "+1w",
    	changeMonth: false,
    	numberOfMonths: 1,
    	prevText: '<i class="fa fa-chevron-left"></i>',
    	nextText: '<i class="fa fa-chevron-right"></i>',			
    	onClose: function( selectedDate ) {
    		$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
    	}
    });
    </script>

    您将必须使用为booking-form设置的ID替换booking-form表单,然后它将自动开始验证字段。 下图显示了开始验证后默认情况下错误消息的显示方式。

    表单验证错误示例

    初始化日期选择器时,您可以传递几个选项。 他们将确定日历的用户界面,例如要显示的月份数或应该显示日历的日期。 例如,将defaultDate设置为+100w将在未来100周内打开日历。

    还有一点需要注意的是,在选择日期之后,签入日历会将签出日历的最小日期设置为所选日期。 这是通过附加在onClose事件上的回调函数完成的。 签出日历的功能类似,但是它设置了签入日历的最大日期。

    日期选择器日历UI

    最后的想法

    在本教程中,我们学习了如何使用CodeCanyon上的Smart Forms脚本创建预订表单。 在此过程中,我们介绍了一些基础知识,可帮助您快速入门并创建自己的独特表单。 如您所见,使用智能表单通过输入验证和其他增强功能可以轻松创建美观的表单。

    您可以使用Smart Forms框架创建更多功能,而不仅仅是预订表单。 创建标记和添加JavaScript功能的过程将与我们在此介绍的过程相似。 如果您感到困惑,详细的文档将为您提供帮助。 您还将获得六个月的免费支持,因此弄清楚如何进行表格工作将非常容易。

    翻译自: https://code.tutsplus.com/tutorials/how-to-create-a-web-booking-form-with-the-smart-forms-script--cms-33825

    展开全文
  • 邪恶的形式 展示柜 要查看展示应用,请按照以下步骤操作: 克隆仓库 运行./gradlew build (或Windows上的gradlew.bat build ) 将WAR文件从wicked-forms-showcase-wicket7/build/libs文件夹中wicked-forms-...
  • Forms that work(Web表单设计 创建高可用性的网页表单)英文版.pdf )
  • web 表单 回顾 在上一章节中,我们定义了一个简单的模板,使用占位符来虚拟了暂未实现的部分,比如用户以及文章等。 在本章我们将要讲述应用程序的特性之一–表单,我们将会详细讨论如何使用 web 表单Web 表单是...
  • Dynamics CRM - 前端 调用CRM Web API创建Web资源在表单中嵌入自定义页面 在Dynamics 365中我们如何嵌入自己定义的HTML页面呢? 通过条用CRM Web API对实体进行查询,显示到HTML中,再将网页引入Web资源,将Web资源...
  • 从JSON文件创建表单 您可以将自己的JSON文件作为表单上传到数据库。 他们必须延伸.json和strucure必须是: { " name " : " String " , " questions " : [ " Array of questions " ] } 每个问题
  • 在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能 创建语句格式: startTime = DateTimeField('计划开始时间', validators=[DataRequired('不可为空'),...
  • 内容 Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an... check the manual that corresponds to your MySQL server version for the right syntax to use n...
  • 经实践检验的实用建议将帮助你远离设计失误,创建出美观、高效的表单。 可贵的设计方法和技巧是赢得数据准确性和顾客满意度的制胜法宝。 包含大量实例——从细节展现(如标签对齐方式、必填字段)到视觉设计(如创建...
  • 让我们看看我们如何将Bootstrap CSS样式和JavaScript文件与使用Angular CLI生成的Angular项目集成,以及如何使用表单控件和类创建漂亮的表单以及如何使用表样式设置 HTML 表样式。对于Angular部分,我们将创建一个...
  • 首先创建一个表单域集合fieldset fieldset元素允许Web开发者将主题相关的表单组合在一起 <fieldset></fieldset> 要说明的是本例子中每个表单都被放在一个有序列表中,以及用了一个label标签,做说明 ...
  • betterFORM 可以用来轻松创建很多动态的 Web 2.0 的表单界面,可以自定义验证器、计算器、表单提交动作和事件处理等。 betterFORM 发布第四个 RC 版本,主要是bug修复和小改进。 项目地址:...
  • HTML5创建的简易web表单

    千次阅读 2016-08-11 17:19:04
    html> <!-- ! Excerpted from "HTML5 and CSS3", ! published by The Pragmatic Bookshelf. ! Copyrights apply to this code. It may not be used to create training material, ... courses, books, articles, a
  • Touch Forms pro Mac是一款非常好用的拖放式web表单创建工具。Touch Forms pro Mac通过内置的FTP上传器设计和发布Web表单到您的网站,建立自己的网站联系表格,调查,反馈表格,数据收集表格等。Touch Forms Pro 7...
  • web面试super 在过去的几年中,云服务的创新使托管静态网站变得非常方便。 由于它们不需要服务器,因此这些站点通常比动态站点更快,更安全且托管/维护成本... Web表单本质上是一个非常简单的应用程序。 用户与界面...
  • Web表单一直是Web设计和用户交互方面的热门话题。 造成这种情况的原因是广泛的,但是更明显的原因之一是表单是用户向应用程序中输入信息的最基本的方法。 在本文中,我们将讨论一些技术,这些技术可使您的表单响应...
  • web表单

    2019-07-03 17:13:00
     在microblog根目录下创建一个文件,存储flask扩展的所有配置,CSRF_ENABLED用于激活跨站点请求伪造, SECRET_KEY用于激活CSRF时生成一个加密的令牌,来验证一个表单。 配置文件的使用 转载于:...
  • AngularJS是Google 开源出来的一套 js 工具,为了克服HTML在构建应用上的不足而设计的,试图成为WEB应用中的一种端对端的解决方案,通过为开发者呈现一个更高层次的抽象来简化应用的开发,后面简称"ng...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,127
精华内容 1,250
关键字:

web创建表单