精华内容
下载资源
问答
  • 表单form在整个页面居中解决方法
    千次阅读
    2021-06-09 08:40:40

    让表单form在整个页面居中

    整个页面就一个表单,很简单

    我用过的方法:

    1、在外面套一层

    但是只能水平居中,不能垂直居中

    2、在外面套一层

    同上

    3、margin:300px;

    成功,但是,这只是相对于我这个显示屏来说,如果换一个不一样尺寸的呢

    所以怎样让一个表单上下左右居中呢

    ------解决思路----------------------

    vertical-align:middle; 试试呢

    ------解决思路----------------------

    垂直居中是要自己获取当前浏览器的高,然后通过计算后得到位置的,网上有相关文章你可以搜索下

    ------解决思路----------------------

    另外说一句,如果你有下拉框,那你就得取页面的高度而不是浏览器的

    ------解决思路----------------------

    你是想做一个弹出层效果?

    ------解决思路----------------------

    水平居中:margin:0px auto;左右auto即可。

    垂直居中:(jquery或js获取浏览器窗口高 - form区高) /2,然后让form加css,margin-top为刚计算的高度

    ------解决思路----------------------

    body {

    height: 100%;

    width: 100%;

    border: none;

    overflow-x: hidden;

    }

    #cardlist{

    height:99%;

    overflow-x: hidden;

    }

    window.onresize = function () {

    //var w = window.innerWidth

    ------解决思路----------------------

    document.documentElement.clientWidth

    ------解决思路----------------------

    document.body.clientWidth;

    var h = window.innerHeight

    ------解决思路----------------------

    document.documentElement.clientHeight

    ------解决思路----------------------

    document.body.clientHeight;

    //document.getElementById("这里放id").style.width = w + "px";

    document.getElementById("cardlist").style.height = h-36 + "px";

    }

    这是获取窗体尺寸。再用6楼的方法算一下试试。

    ------解决思路----------------------

    看一下 silverlight 项目自动产生的页面就明白了:

    html>

    html, body {

    height: 100%;

    overflow: auto;

    }

    body {

    padding: 0;

    margin: 0;

    }

    #silverlightControlHost {

    height: 100%;

    text-align: center;

    }

    ------解决思路----------------------

    引用:水平居中:margin:0px auto;左右auto即可。

    垂直居中:(jquery或js获取浏览器窗口高 - form区高) /2,然后让form加css,margin-top为刚计算的高度

    margin:0px auto,这个是正解,垂直居中一般没啥必要,如果需要,就需要通过计算高度来进行设置

    ------解决思路----------------------

    width: 980px;

    margin: 0 auto;

    top: 50%;

    left: 50%;

    position: absolute;

    margin: -190px 0 0 -540px;

    magin部分自己慢慢调整

    ------解决思路----------------------

    引用:width: 980px;

    margin: 0 auto;

    top: 50%;

    left: 50%;

    position: absolute;

    margin: -190px 0 0 -540px;

    magin部分自己慢慢调整

    这是绝对定位的水平居中方法,margin-left的尺寸为总宽的一半

    更多相关内容
  • 今天使用antd的Form组件时,遇到一个需求,“提交完表单之后需要重置Input框”; 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。 错误原因 React Hook "Form.use...

    • 今天使用antd的Form组件时,遇到一个需求,“提交完表单之后需要重置Input框”;
    • 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。

    错误原因

    React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function
    

    在这里插入图片描述
    翻译过来大概就是:
    · 这是由于useForm 是 React Hooks 的实现,只能用于函数组件 如果是在 Class 组件 下。

    解决办法 (一共三个步骤)

    需要通过 ref 获取数据域,通过ref获取的控制实例可使用API-FormInstance提供的所有方法,formRef = React.createRef();

    话说完了,开始撸代码:

    import React, { Component } from 'react'
    import { Form, Input, Button } from 'antd';
    
    export default class Test extends Component {
    	// 1. ---- 存储Form对象
        formRef = React.createRef();
    	
    	// 
        onFinish = (formValue) => {
            // ... 
            // 3. ---- 设置Form.Item 组件的值 (也就是输入框中的值), 键值需要和Form.Item中的name值对应
            this.formRef.current.setFieldsValue({
                "username": "",
                "des": ""
            })
        }
    
        render() {
            return (
                <div className="comment-add">
                    <Form
                        name="CommentAddForm"
                        onFinish={this.onFinish}
                        // 2. ---- 这里需要用 ref 注册一下
                        ref={this.formRef}
                    >
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[{ required: true, message: '请输入用户名!' }]}
                        >
                            <Input />
                        </Form.Item>
    
                        <Form.Item
                            label="评论内容"
                            name="des"
                            rules={[{ required: true, message: '请输入评论内容!' }]}
                        >
                            <Input.TextArea />
                        </Form.Item>
    
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="btn-submit">
                                Add once
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            )
        }
    }
    
    
    展开全文
  • 微信小程序基础之表单Form的使用

    万次阅读 多人点赞 2016-12-20 14:11:03
    表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据...

    表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用

    form表单,将组件内输入的"switch","input","checkbox","slider","radio","picker"的值进行提交,数据的格式为:name:value,所以表单中控件都需要添加name属性,否则找不到对应控件的值。其主要属性:

    主要代码,创建一个form表单:

    <!--pages/index/Component/FormM/FormM.wxml-->
    <view class="viewTitle">
        <text class="view-Name">form表单</text>
        <view class="lineView"></view>
    </view>
    <!--这里用form,name=“nameName1”可以作为form的属性进行
    (e.detail.value.nameName1)调用,
    form自带有提交和重置按钮,会自动获取表单中所有控件值的改变-->
    <form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">
        <view class="section section_gap">
          <view class="section__title">switch开关</view>
          <switch name="switch"/>
        </view>
        <view class="section section_gap">
          <view class="section__title">slider滑块</view>
          <slider value="50" name="slider" show-value ></slider>
        </view>
        <view class="section">
          <view class="section__title">input输入框</view>
          <input name="input" style="background-color: #FFFFFF" placeholder="请在这里输入" />
        </view>
        <view class="section section_gap">
          <view class="section__title">radio单选</view>
          <radio-group name="radio-group">
            <label><radio value="radio1"/>radio1</label>
            <label><radio value="radio2"/>radio2</label>
          </radio-group>
        </view>
        <view class="section section_gap">
          <view class="section__title">checkbox多选</view>
          <checkbox-group name="checkbox">
            <label><checkbox value="checkbox1"/>checkbox1</label>
            <label><checkbox value="checkbox2"/>checkbox2</label>
          </checkbox-group>
        </view>
        <view class="section">
          <view class="section__title">地区选择器</view>
          <picker name="areaPicker" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
            <view class="picker">
              当前选择:{{array[index]}}
            </view>
          </picker>
        </view>
        <view class="section">
          <view class="section__title">时间选择器</view>
          <picker name="timePicker" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
            <view class="picker">
              当前选择: {{time}}
            </view>
          </picker>
        </view>
        <view class="section">
          <view class="section__title">日期选择器</view>
          <picker name="datePicker" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
            <view class="picker">
              当前选择: {{date}}
            </view>
          </picker>
        </view>
        <view class="btn-area">
          <button form-type="submit">Submit提交</button>
          <button form-type="reset">Reset重置</button>
        </view>
      </form>

    如何获取form内部的控件的值,就需要用到form的相关属性,代码如下

    // pages/index/Component/FormM/FormM.js
    Page({
      //初始化数据
      data: {
        array: ['大中国', '美国', '巴西', '小日本'],
        index: 0,
        date: '2016-12-20',
        time: '11:19',
        allValue:''
      },
      //表单提交按钮
      formSubmit: function(e) {
        console.log('form发生了submit事件,携带数据为:', e.detail.value)
        this.setData({
          allValue:e.detail.value
        })
      },
      //表单重置按钮
      formReset: function(e) {
        console.log('form发生了reset事件,携带数据为:', e.detail.value)
        this.setData({
          allValue:''
        })
      },
      //---------------------与选择器相关的方法
      //地区选择
      bindPickerChange: function(e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          index: e.detail.value
        })
      },
      //日期选择
      bindDateChange: function(e) {
        this.setData({
          date: e.detail.value
        })
      },
      //时间选择
      bindTimeChange: function(e) {
        this.setData({
          time: e.detail.value
        })
      },

    })

    效果图:(源码下载:https://github.com/hbblzjy/WX-form-Demo4)

            

    输出表单中的结果值:



    展开全文
  • 表单form背景设置

    万次阅读 2018-11-12 11:48:05
    &lt;style&gt; body{background-color: #006A0F;} html{background-color: #F0FF00;} table{background-color: #9E0002} &lt;/style&gt; ...background-image: url(images/bg...

    <style>
    body{background-color: #006A0F;}
    html{background-color: #F0FF00;}
    table{background-color: #9E0002}
    </style>

    html{background-color: #F0FF00;//背景颜色
    background-image: url(images/bg01.gif);//背景图片
    background-repeat: no-repeat;//属性里可以是一张,可以是竖向复制,可以是横向复制
    background-position: bottom;//背景图片的位置background-position:bottom left;中间偏左...还可以写具体位置background-                                                               position:100px 50px(左边;上边)第一个值的正负代表左右,第二个值的正负代表上下

    background-attachment:scroll;//背景固定}

    简写background:#FF0004 url(images/project_liutao_02.jpg) no-repeat bottom center fixed;
    height: 100%;}

    展开全文
  • 表单form在整个页面居中

    万次阅读 2019-01-10 14:12:11
    表单form在整个页面居中
  • element-ui 表单 form 回车 enter 触发查询 在 el-form 上添加 @keyup.enter.native="onQuery" vue+elementUI在输入框中按回车键会刷新页面的问题原因: 参考element-ui文档: W3C 标准中有如下规定: ...
  • 目的:Vue 中 把表单form数据 转化成json格式的数据 第一步:创建一个数据集(就是你表单需要的数据) 如果你表单都是一些正常的数据,比如 text 什么的。你定义好数据集,就去用 v-model 绑定数据。这样就可以...
  • JS提交表单form

    千次阅读 2019-09-02 14:13:03
    form表单的代码写在外面并用JS来进行提交,减少重复生成form,如下: < table class = " table table-striped table-sm " > < tbody > < tr th: each = " emp:${emps} " > <!--省略中间的代码--...
  • Bootstrap4 表单form-control以及表单控件

    万次阅读 2018-03-23 14:59:25
    Bootstrap4 表单布局堆叠表单 (全屏宽度):垂直方向Bootstrap4 支持以下表单控件:inputtextareacheckboxradioselectBootstrap InputBootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-...
  • 原因如下:
  • Flutter:表单Form

    千次阅读 2019-05-13 13:31:03
    正式向服务器提交数据前,都会对...所以,Flutter提供了一个Form widget,可以对输入框进行分组,然后进行一些统一的操作。 Form: Form继承自StatefulWidget对象,它对应的状态类为FormState。 其定义: Form(...
  • HTML中的表单Form实现居中效果

    千次阅读 2021-06-14 02:39:41
    之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面分享一下我所经历过程中的...
  • form表单

    千次阅读 2020-12-20 21:40:37
    form表单 form表单是一个包含表单元素的区域,允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。是前后端交互的重要标签。 表单组件主要包括: input:输入,选择或发出指令 textarea...
  • 表单Form提交数据和PHP数据处理

    万次阅读 2015-12-14 00:59:03
    表单、PHP
  • 表单form action的url写法

    千次阅读 2016-09-23 22:13:15
    在写web页面时,标签 是很常见的元素,它的一个属性是action,用来标识将表单交给谁去处理。很显然,这里有一个地址的问题,而且是在服务器这边的地址。比如服务器内的一个servlet。 那么这个地址怎么写? ...
  • js动态添加表单form元素

    万次阅读 2016-11-26 15:09:14
    动态添加表单元素      function AddElement(mytype){  var mytype,TemO=document.getElementById("add");  var newInput = document.createElement("input"); newInput.type=mytype; newInput.name=...
  • Layui之表单form

    万次阅读 2017-12-23 09:37:41
    1. 全家福代码以及效果图 ; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function() { layui.use('form', function() { var form = layui.
  • 使HTML中的表单Form实现居中效果

    万次阅读 多人点赞 2020-09-16 18:48:37
    使HTML中的表单Form居中 之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看。在经过了各种修改后,终于成功将表单居中,下面...
  • 第六章 表单标签 SpringMVC也提供了一组类似JSTL的标签,供我们在页面上简化开发。下面是个例子: &amp;amp;lt;form:form action=&amp;quot;${pageContext.request.contextPath }/emp&amp;quot; ...
  • Ant Design表单Form常用方法

    万次阅读 多人点赞 2020-05-11 17:55:50
    通过 Form.useForm表单数据域进行交互。用法: const [form] = Form.useForm(); 经 Form.useForm() 创建的 form 控制实例,常用方法如下: 1、form.setFieldsValue() 设置表单的值,更新对应的值,用法: form....
  • AutoComplete,ant design form表单
  • 表单Form中的action怎么填(Struts篇)

    千次阅读 2016-03-25 01:59:53
    今天突然发现,form中的action=“/login”居然是错误的。突发奇想,就想对url做个探究。 还有好多人是用${requestScope….},我也想做个实验,加深影响。 继续探究吧,想看最后结论,请下拉…(记得点赞,谢谢!) ...
  • 表单form的三种方式(demo-form实例)

    千次阅读 2018-10-16 16:29:17
    第一种:使用type=submit 可以直接提交   &lt;html&gt; &lt;head&gt; &lt;title&gt;submit直接提交&lt;/title&...-- 表单的提交方式一 --&...form m
  • vue表单form提交阻止跳转页面

    千次阅读 2020-04-09 11:59:17
    直接使用form的submit提交,页面会跳转,需要使用jquery-form阻止跳转 <form id="uploadForm" method="post" v-show="false" enctype="multipart/form-data" onsubmit="return false"> <input type=...
  • django2.2-form表单详解

    千次阅读 2021-10-14 15:13:50
    文章目录一、form组件二、form表单的基本语法1. form表单类的书写2. 校验数据3. 渲染表单标签三、展示错误信息1. 展示错误信息2. 自定义错误信息四、钩子函数(HOOK)五、字段参数和类型1. 核心参数`widget`参数`...
  • 表单元素一行显示时,由于屏幕宽度不够时,自动换行不好看...form 一个表单的简单写法: <form class="form-inline" id="search_form"> <div class="form-group"> <label>产品名称:</label...
  • 表单form中的submit事件

    万次阅读 2018-10-08 23:08:21
    在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。 但是onclick比onsubmit更早的被触发。 提交过程 1、用户点击按钮 —-&gt; 2、触发onclick事件 —-&...
  • form表单表单提交,formid

    千次阅读 2018-12-29 17:23:13
    1.在使用提交表单时,尽量使用form表单,提交时有event参数,好多参数都可通过event.detail.value(此时,表单的各个元素需要添加name属性,否则这里会打印不到)来获取,比较方便,而且可以减少页面变量的使用,...
  • 表单form的type种类

    千次阅读 2018-03-26 23:19:58
    Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 532,535
精华内容 213,014
关键字:

表单form

友情链接: Crypt-Decrypt-master.zip