表单 订阅
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。 展开全文
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
信息
对    象
文本框,密码框等
控件分类
Button Objx,Input Pro等
作    用
采集数据
中文名
表单
组    成
表单标签、表单域、表单按钮
外文名
Form
表单代码
功能:用于申明表单,定义采集数据的范围,也就是
里面包含的数据将被提交到服务器或者电子邮件里。语法:
. . .
属性解释见下表:action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.例如:表示表单将向以post的方式提交,提交的结果在新的页面显示,数据提交的媒体方式是默认的application/x-www-form-urlencoded方式;表单域表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式:文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。代码格式:属性解释:type="text"定义单行文本输入框;name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义文本框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。value属性定义文本框的初始值样例1:样例1代码:也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。代码格式:属性解释:name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;cols属性定义多行文本框的宽度,单位是单个字符宽度;rows属性定义多行文本框的高度,单位是单个字符宽度;wrap属性定义输入内容大于文本域时显示的方式,可选值如下:默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行; Virtual,允许文本自动换行。 Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。样例2:样例2代码:是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。代码格式:属性解释:type="password"定义密码框;name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义密码框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。样例3:样例3代码:隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式:属性解释:type="hidden"定义隐藏域;name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value属性定义隐藏域的值例如:复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。代码格式:属性解释:type="checkbox"定义复选框;name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value属性定义复选框的值样例4:样例4代码:xxxcom当需要访问者在单选项中选择唯一的答案时,就需要用到单选框了。代码格式:属性解释:type="radio"定义单选框;name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;value属性定义单选框的值,在同一组中,它们的域值必须是不同的。样例5:样例5代码:有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。代码格式:属性解释:type="file"定义文件上传框;name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义文件上传框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。样例6:样例6代码:下拉选择框允许你在一个有限的空间设置多种选项。代码格式:属性解释:size属性定义下拉选择框的行数;name属性定义下拉选择框的名称;multiple属性表示可以多选,如果不设置本属性,那么只能单选;value属性定义选择项的值;selected属性表示默认已经选择本选项。样例7:样例7代码:样例8:按Ctrl可以多选样例8代码:表单按钮控制表单的运作。1.3.1 提交按钮提交按钮用来将输入的信息提交到服务器。代码格式:属性解释:type="submit"定义提交按钮;name属性定义提交按钮的名称;value属性定义按钮的显示文字;样例9:样例9代码:1.3.2 复位按钮复位按钮用来重置表单。代码格式:属性解释:type="reset"定义复位按钮;name属性定义复位按钮的名称;value属性定义按钮的显示文字;样例10:样例10代码:1.3.3 一般按钮一般按钮用来控制其他定义了处理脚本的处理工作。代码格式:属性解释:type="button"定义一般按钮;name属性定义一般按钮的名称;value属性定义按钮的显示文字;onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为;样例11:样例11代码:二.表单表单是用来提交资料、意见,规范流程执行过程的格式。
收起全文
精华内容
参与话题
问答
  • 但是 我提交的是整个form表单的值 这个表单中有很多表单域的!就像注册一样要提交很多信息 但是目前$.post()这种方式是不是只带一个参数。就算可待多个参数,那么我是不是要在,{"":,"":.........将所有的信息都...
  • 防止表单重复提交(java实现)

    万次阅读 2020-05-19 18:04:04
    黑客或恶意用户使用postman等工具重复恶意提交表单(攻击网站)。 这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。 二、使用...

    一、场景

    1. 由于用户误操作,多次点击表单提交按钮。
    2. 由于网速等原因造成页面卡顿,用户重复刷新提交页面。
    3. 黑客或恶意用户使用postman等工具重复恶意提交表单(攻击网站)。

    这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。

    二、使用AOP自定义切入实现

    实现原理:

    自定义防止重复提交标记(@AvoidRepeatableCommit)。
    对需要防止重复提交的Congtroller里的mapping方法加上该注解。
    新增Aspect切入点,为@AvoidRepeatableCommit加入切入点。
    每次提交表单时,Aspect都会保存当前key到reids(须设置过期时间)。
    重复提交时Aspect会判断当前redis是否有该key,若有则拦截。
    自定义标签:

    package com.wlsj.product.suport;
    
    import java.lang.annotation.ElementType;
    import java.lang.annotation.Retention;
    import java.lang.annotation.RetentionPolicy;
    import java.lang.annotation.Target;
    
    /**
     * Created by dell on 2020/5/19.
     */
    @Target(ElementType.METHOD)
    @Retention(RetentionPolicy.RUNTIME)
    public @interface AvoidRepeatableCommit {
        /**
         * 指定时间内不可重复提交,单位毫秒
         */
        long timeout() default 3000;
    }

    自定义切入点Aspect:

    package com.wlsj.product.suport;
    
    import com.wlsj.product.utils.HttpUtil;
    import lombok.extern.slf4j.Slf4j;
    import org.apache.commons.lang.StringUtils;
    import org.aspectj.lang.ProceedingJoinPoint;
    import org.aspectj.lang.annotation.Around;
    import org.aspectj.lang.annotation.Aspect;
    import org.aspectj.lang.reflect.MethodSignature;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.data.redis.core.RedisTemplate;
    import org.springframework.stereotype.Component;
    import org.springframework.web.context.request.RequestContextHolder;
    import org.springframework.web.context.request.ServletRequestAttributes;
    
    import javax.servlet.http.HttpServletRequest;
    import java.lang.reflect.Method;
    import java.util.UUID;
    import java.util.concurrent.TimeUnit;
    
    /**
     * <h3>product-jzfp</h3>
     * <p></p>
     *
     * @author : 你的名字
     * @date : 2020-05-19 16:40
     **/
    @Aspect
    @Component
    @Slf4j
    public class AvoidRepeatableCommitAspect {
        @Autowired
        private RedisTemplate redisTemplate;
        private static Logger logger = LoggerFactory.getLogger(AvoidRepeatableCommitAspect.class);
    
        /**
         * @param point
         */
        @Around("@annotation(com.wlsj.product.suport.AvoidRepeatableCommit)")
        public Object around(ProceedingJoinPoint point) throws Throwable {
    
            HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes()).getRequest();
            String ip = HttpUtil.getIpAddr(request);
            //获取注解
            MethodSignature signature = (MethodSignature) point.getSignature();
            Method method = signature.getMethod();
            //目标类、方法
            String className = method.getDeclaringClass().getName();
            String name = method.getName();
            String ipKey = String.format("%s#%s", className, name);
            int hashCode = Math.abs(ipKey.hashCode());
    
            String key = AopConstants.REDIS_ROOT + String.format("%s_%d", ip, hashCode);
    
            logger.info("ipKey={},hashCode={},key={}", ipKey, hashCode, key);
            AvoidRepeatableCommit avoidRepeatableCommit = method.getAnnotation(AvoidRepeatableCommit.class);
            long timeout = avoidRepeatableCommit.timeout();
            if (timeout < 0) {
                timeout = 3 * AopConstants.SECOND;
            }
            String value = (String) redisTemplate.opsForValue().get(key);
            if (StringUtils.isNotBlank(value)) {
    
                return "请勿重复提交";
            }
            redisTemplate.opsForValue().set(key, UUID.randomUUID().toString(), timeout, TimeUnit.MILLISECONDS);
            //执行方法
            Object object = point.proceed();
    
            return object;
        }
    
    }
    

    常量类:

    package com.wlsj.product.suport;
    
    /**
     * <h3>product-jzfp</h3>
     * <p></p>
     *
     * @author : 你的名字
     * @date : 2020-05-19 16:42
     **/
    public class AopConstants {
        public static final String REDIS_ROOT="WX:ccx-:";
    
        public static final long DAY = 1000L*60*60*24;
    
        public static final long HOUR = 1000L*60*60;
    
        public static final long MINUTE = 1000L*60;
    
        public static final long MINUTE_10 = 1000L*60*10;
    
        public static final long HALF_HOUR = 1000L*60*30;
    
        public static final long SECOND = 1000L;
    }
    

    三、使用方法:

     

    展开全文
  • HTML表单: ``` ${CTX}/sys/user/test2.do" method="post"> <input name="sysUser.fdUsername"><br> <input name="sysUser.fdPassword"><br> 提交test2"> ``` 像这种需求能实现吗?
  • 定义一个函数: function sumbit_sure(){ var gnl=confirm("确定要提交?"); if (gnl==true){ return true; }else{ return false; } } 然后在form的onsubmit里调用就可以了...<form action="2.html" onsubmit="return

    没想到有这么多人浏览这个文章,看来网络的文章害人不浅啊,我重新把代码格式化了,大家好好看吧。

    感谢网友提醒,把οnsubmit="return sumbit_sure()" 改过来了。

    ===========================

    定义一个函数:

     

    <script language="javascript">
    function sumbit_sure(){
    var gnl=confirm("确定要提交?");
    if (gnl==true){
    return true;
    }else{
    return false;
    }
    }
    < /script>

     

     

     

     

     

    然后在form的onsubmit里调用就可以了:

     

    </html>
    <body>
    <form action="2.html" onsubmit="return sumbit_sure()">
    点击我提交<br>
    <input type="text" name="text" value="text"><br>
    <input type="submit">
    </form>
    </body>
    < /html>

     

     

     

     

     

    网上一大堆说在input 的onclick里调用的,都是TMD扯淡,害我绕半天!

    展开全文
  • JS 提交表单后清空表单

    千次阅读 2019-06-23 17:07:03
    清空表单是比较常见的场景,表单本身就有reset事件作用于清空表单,但是reset事件需要点击按钮才能触发,我们现在想不触达按钮在表单提交的submit事件内,当提交表单成功后清空表单中 value 。 下面来看代码,很...

    开发交流QQ群:  173683895   173683895   526474645  人满的请加其它群

    清空表单是比较常见的场景,表单本身就有reset事件作用于清空表单,但是reset事件需要点击按钮才能触发,我们现在想不触达按钮在表单提交的submit事件内,当提交表单成功后清空表单中 value 。

    下面来看代码,很简单

    以微信小程序为示例

    <!--index.wxml-->
    <form class='form' bindsubmit='formSubmit' bindreset='formReset'>
      <input name='name' value='{{name}}' placeholder='请输入姓名'></input>
      <input name='phone' value='{{phone}}' placeholder='请输入电话'></input>
      <input name='gender' value='{{gender}}' placeholder='请输入性别'></input>
      <input name='age' value='{{age}}' placeholder='请输入年龄'></input>
      <button bindtap="sendMessage" type='primary' formType="submit">开始</button>
    </form>

    js

      formSubmit(e){
        console.log(e)
        for (var i in e.detail.value){
          this.setData({
            [i]:''
          })
        }
      },

    这就实现了。

    效果图

    展开全文
  • 在使用AntDesign的时候,在Form表单中提交数据的时候,将会获取到什么值?? 如下面代码: ``` {...formItemLayout} label={TemplateLang.EditFilterFieldForm[0].label} > {getFieldDecorator('...
  • 整个页面就一个表单,很简单 我用过的方法: 1、在外面套一层<div style="width:100%;text-align:center"></div> 但是只能水平居中,不能垂直居中 2、在外面套一层</center> 同上 3、...
  • HTML防止input回车提交表单

    万次阅读 多人点赞 2015-03-28 11:01:54
    最近在做一个小需求时,发现了一个问题:当form表单中,存在一个button,在input中按回车会自动触发form提交,很是郁闷,经过查询资料,特总结如下: 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的...

    最近在做一个小需求时,发现了一个问题:当form表单中,存在一个button,在input中按回车会自动触发form提交,很是郁闷,经过查询资料,特总结如下:

    自动提交情况说明:

    1. 默认情况下,单个输入框,无论按钮的type="submit"还是type="button"类型,回车即提交。
    2. 当type="submit"时,无论有几个type="text"输入框,回车均表示提交。(<button>按钮默认的type为submit)
    3. 当type="button"时,且存在多个输入框,回车不提交。(button)

    解决方案:

    1. 解决单个输入框的回车即提交问题,可以增加一个隐藏的input="text" display='none'; 然后type类型为button。
    2. 在form表单或input中加入:οnkeydοwn="if(event.keyCode==13){return false;}"

    实例一:

    <!-- enter会自动提交数据 -->
    <form action="www.baidu.com" method="post">
    	<input type="text" value="" />
    	<input type="text" value="" />
    	<button>提交</button>
    	<!--等价于<button type="submit">提交</button>或<input type='submit' value='提交'>-->
    </form>

    实例二:

    <!-- enter不会自动提交数据 -->
    <form action="www.baidu.com" method="post">
    	<input type="text" value="" />
    	<input type="text" value="" />
    	<button type="button">提交</button>
    	<!-- 等价于<input type='button' value='提交'> -->
    </form>

    实例三:

    <!-- enter不会自动提交数据 -->
    <form action="www.baidu.com" method="post" onkeydown="if(event.keyCode==13){return false;}">
    	<input type="text" value="" />
    	<input type="text" value="" />
    	<button>提交</button>
    	<!-- 或在对应input上添加,同时建议取消自动填充,因为mac下会有问题<input type="text" value="" autocomplete="off" onkeydown="if(event.keyCode==13){return false;}" /> -->
    </form>

     

    展开全文
  • HTML简单注册界面——含表单验证

    万次阅读 多人点赞 2018-10-28 14:43:47
    最近学习HTML表单,感慨万千。虽然看起来好像不难学,但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面,只有“注册账号、密码、重输密码”三个文本框,还包含了原生JavaScript验证。(记一下,也...
  • Bootstrap3 横向表单/水平表单

    千次阅读 2019-05-07 16:04:08
    横向表单 通过为表单添加.form-horizontal类,并联合使用 Bootstrap的栅格类,便可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加....
  • 办法1.同一个页面中建立两个表单 各自提交: <!-- 表单内容 --> <!-- 表单内容 --> 办
  • 我要做一个表单设计器,用bootstrap做的,在提交的时候,把表单的html代码存入数据库。然后在使用的时候,把设计的表单html代码整个调用出来,显示的表单给用户填表数据。实际使用中,用户提交数据,对应的数据存入...
  • 这篇文件主要介绍通过springboot 去创建和提交一个表单。创建工程涉及了 web,加上spring-boot-starter-web和spring-boot-starter-thymeleaf的起步依赖
  • 本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖。
  • 【JSP】表单提交与表单验证

    万次阅读 2013-01-25 17:21:54
    (1)使用form表单提交数据,提交后的数据将会在另一个jsp页面进行处理。也可以实现不跳转,同时使用ajax进行局部更新,这里暂不进行说明。 (2)提交表单前需要进行数据验证时,响应在form中onsubmit事件,数据合法则...
  • Activiti,自定义表单,外置表单,工作流,微服务,子系统

    万次阅读 多人点赞 2019-12-04 22:35:58
    百度,csdn找了半个月,没有一篇文章将 activiti 外置表单 讲透彻的,无奈,自己亲手写了一套,祭出这套大杀器,开放给广大网友。 系统特色 本工作流系统,具有以下特色: 微服务子系统 ,独立系统,独立逻辑,独立...
  • 正在开发一个web项目,但是对表单提交很纠结,情况是这样的:我的表单有很多元素,而且每个都需要一一验证,这些验证我都是单写的js函数,当元素失去焦点时进行验证。但到最后不知道如何提交表单?我是想做成:当...
  • python+selenium 自动填写表单并提交

    万次阅读 多人点赞 2018-03-08 16:22:30
    一.为了解决繁琐、重复的操作步骤,然机器代替人来做 准备:python 3.6 +selenium + chromedriver2.35 chromedriver 要兼容本地的chrome 对应版本号 ... ChromeDriver ... ...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: <form bindsubmit='form...* <...
  • Vant-UI 表单组件(Field组件):验证表单元素&amp;amp;amp;&amp;amp;amp;表单提交:
  • 表单类型 标签和控件放在一个里 所有的文本元素input、textarea、select 隐藏标签 向标签添加 垂直基本表单 role = “form” class = “form-group” class = “form-control” 内联表单 role = ...
  • 动态表单 (一)动态表单的定义

    千次阅读 热门讨论 2013-12-10 11:05:25
    什么是动态表单?  根据爱因斯坦相对论有动态表单说明是有静态表单的存在,生活中乃至世界任何两个有质量的物体都是运动的,这只是相对论的狭隘解析即狭义相对论,平常我们讨论的也往往是狭义相对论,这一理论的...
  • 这篇文篇主要简述如何在springboot中验证表单信息。在springmvc工程中,需要检查表单信息,表单信息验证主要通过注解的形式。构建工程创建一个springboot工程,由于用到了 web 、thymeleaf、validator、el,引入相应...
  • 表单表单控件以及表单域详解

    千次阅读 2019-03-28 13:06:08
    表单域:存放表单的区域。把表单控件里面的信息全部收集提交。 表单控件 input表单控件: 1.是个单标签 </input> 2.input可以通过type(类型)属性来变换形状 单选按钮注意: <body> <p>...
  • HTML 表单按钮

    万次阅读 2018-04-13 20:11:53
    表单按钮表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...
  • 每次表单参数为需要下载的文件名称,需要在button的click事件中将所有产生的这 些文件下载下来,所以需要循环提交表单,不知道这个应该怎么解决 $.ajax({…… ,success:function(result){ table.rows('.selected...
  • form表单提交,前端验证

    万次阅读 多人点赞 2017-04-30 18:09:42
    Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button 定义按钮,没有任何行为。多数情况下,用于通过javascript启动脚本 Input type=submit 定义...

空空如也

1 2 3 4 5 ... 20
收藏数 232,612
精华内容 93,044
关键字:

表单