九、表单Form

最新推荐文章于 2022-03-07 18:34:01 发布
最新推荐文章于 2022-03-07 18:34:01 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ExtJS 文章标签： stylesheet function email layout 照片 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xwebsite/article/details/7992169

表单内容非常丰富，包含多种控件，如textfield、combobox、datefield、textarea等。现新建一个SimpleForm.html网页，其内容如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">

   <title>Form表单</title>

   <link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>

    <scripttype="text/javascript"src="bootstrap.js"></script>

    <script type="text/javascript"src="SimpleForm.js"></script>

</head>

<body>

</body>

</html>

然后新建一个SimpleForm.js文件，在JS文件中添加如下代码：

Ext.onReady(function(){

      var form;

    var myViewport = Ext.create('Ext.Viewport',{

       layout:'border',

       items:[ form = Ext.create('Ext.form.FormPanel', {

       title:'用户基本信息',

       layout: 'absolute',

       defaultType: 'textfield',//默认类型为文本框

       autoScroll :true,

       width:400,

       items: [{

          name:'name',       //定义变量名称

          xtype: 'textfield', //控件类型，此处为文本输入框                  

           fieldLabel: '姓名', //显示Label

           labelWidth: 55,     //Label的宽度

           fieldWidth: 50,     //输入框宽度

           allowBlank: false,  //不允许为空

           emptyText:'请输入姓名',  //空的时候显示文字

           x: 5,

           y: 5,

           anchor: '-5'  // 锚宽

       }, {

           name:'pwd',    //定义变量名称

          xtype: 'textfield', //控件类型，此处为文本输入框           

           fieldLabel: '密码', //显示Label

           labelWidth: 55,     //Label的宽度

           fieldWidth: 50,     //输入框宽度

           allowBlank: false,  //不允许为空

           emptyText:'请输入密码',  //空的时候显示文字

           x: 5,

           y: 35,

           anchor: '-5',  // 锚宽

           inputType:'password'  //输入类型为密码

       }, {

           name:'emailAdd',    //定义变量名称

          xtype: 'textfield', //控件类型，此处为文本输入框           

           fieldLabel: 'Email', //显示Label

           labelWidth: 55,     //Label的宽度

           fieldWidth: 50,     //输入框宽度

           allowBlank: false,  //不允许为空

           emptyText:'请输入邮箱',  //空的时候显示文字

           x: 5,

           y: 65,

           anchor: '-5',  // 锚宽

           vtype:'email'  //值类型为email

       }, {

           name:'birthday',    //定义变量名称

          xtype: 'datefield', //控件类型，此处为文本输入框           

           fieldLabel: '出生时间', //显示Label

           labelWidth: 55,     //Label的宽度

           fieldWidth: 50,     //输入框宽度

           emptyText:'请输入出生时间',  //空的时候显示文字

           x: 5,

           y: 95,

           anchor: '-5'  // 锚宽 

       }, {

           name:'filePath',    //定义变量名称

          xtype: 'filefield', //控件类型，此处为文本输入框           

            fieldLabel: '照片', //显示Label

           labelWidth: 55,     //Label的宽度

           fieldWidth: 50,     //输入框宽度

           emptyText:'请选择照片文件',  //空的时候显示文字

           buttonText:'浏览...',      //浏览按钮显示的文字内容

           x: 5,

           y: 125,

            anchor: '-5'  // 锚宽 

       }, {

           x:5,

           y: 155,

           xtype: 'textarea',

           style: 'margin:0',

           name: 'msg',

           anchor: '-5-5'  // anchor width and height

       }

       ],

       buttons: [{

           text: '确定',

           listeners:{

             "click":function(){

                 //提交表单，此处省略

                 Ext.Msg.alert('提交表单','提交表单成功');

                 this.up('form').getForm().reset();//表单重置

             }  

           }

       },{

           text: '取消',

           listeners:{

             "click":function(){

                 this.up('form').getForm().reset();//表单重置

             }

           }

       }]

       })]

    });

});

创建的这个表单中包括textfield、datefield、filefield和textarea，用于一般的文本输入、密码输入、邮箱验证、日期输入、文件上传输入等。各控件对应的一些常用属性在以上代码的注释中都已经说明。保存后浏览该网页，其结果如下图所示：



js 提交form表单和设置form表单请求路径的实现方法
01-19
form表单ID：postform 设置表单请求url document.postform.action = SaveReturnInfo; 提交form表单 document.getElementById(postform).submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径...
微信小程序 表单Form实例详解（附源码）
12-29
微信小程序 表单Form实例 表单Form的应用很广泛，我们可以利用form设计登录注册，也可以设计一种答题问卷的形式，今天主要讲一下form的使用 form表单，将组件内输入的”switch”,”input”,”checkbox”,”slider”,...
Jquery提交表单 Form.js官方插件介绍
weixin_30724853的博客
08-06 188
[JQuery框架应用]：form.js官方插件介绍 我正在研究JQuery框架，其下的插件十分丰富，使用十分简单，功能也十分强大。 先说说常用的Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。 1、最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2、Form插件下载 form.js 3、For...
form表单
JiuMeilove的博客
09-02 4万+
form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)fieldset标签 标签 form表单 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程
JS提交表单form
daponi的博客
09-02 7093
<table class="table table-striped table-sm"> <tbody> <tr th:each="emp:${emps}"> <td th:text="${emp.id}"></td> <td>[[${emp.lastName}]]</td&gt...
form表单字段默认值
爱好jyh的博客
10-17 6256
form表单中input的text类型字段如果不填值的话，默认值为空串，即“”； 我现在的需求是：让不填的字段值为 null。 实现方式：将这个字段的disabled设为true。原理是设置了这个属性提交的表单中就不会有这个字段了。 document.XXform表单名.x字段=true; ...
form表单的提交
weixin_44543308的博客
04-03 1万+
开发工具与关键技术：MVC JQuery 的 form表单的提交 作者：沈金凤 年级：18级（5）班 撰写日期：2019年4月2日 一、Form表单有两个属性分别是：“action”和“method”: Action: 的值是URL 就是当提交表单时向某个地方（要提交到某处的地址）发送表单数据 Method: 的值是 get和 post 就是用来提交表单的方式 二、Method中的 get 和 ...
form表单的属性
liangtaox8的博客
11-21 1万+
form表单HTML标签、属性、属性值： （单行文本输入框） （密码输入框） （单选框） （多选框） （提交按钮） （重置按钮） 或者按钮（空按钮） （下拉框选） （多行文本框） （1） 是表单的标签，所有的需要写在form里面才能今 进行提交； 1：name=”” form中的name属性主要是对这个form进行标记； 2：m...
form表单文件上传
小菜鸟的博客
04-25 3万+
form表单文件上传 form表单文件上传的ajax方法与文本上传有一些不一样 首先form表单的enctype属性写为**“multipart/form-data”** 默认是application/x-www-form-urlencoded <form class="layui-form" id="authorization-upload" enctype="multipart/fo...
HTML中Form表单的使用
热门推荐
pan_junbiao的博客
06-20 5万+
1、form表单标记 表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下： <form action="url" method="get | post" name="formName" onsubmit="" target=""> </for...
form基础表单总结
qq_48113035的博客
03-07 1万+
1.
小程序极速实战开发《九》form表单
03-29
表单中 formType 为 submit 的<button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。   组件用法： 重置:<button formType="reset">Reset</button>  ...
jsp form表单方法示例
01-08
1.代码： 代码如下: <%– Document : index Created on : 2009-10-4, 13:56:46 Author : lucifer –%> <!DOCTYPE HTML PUBLIC “-//W3C//DTD ... <head> <title>... [removed] function giveFocus
如何防止INPUT按回车自动提交表单FORM
11-29
在网页设计中，表单（`<form>`）是用户与服务器进行交互的重要元素，而输入框（`<input>`）则是用户输入数据的主要界面组件。然而，浏览器默认的行为是，当用户在单个输入框中按下回车键时，会触发表单的提交事件。...
一、ExtJS4.1安装与配置
肖泽云
09-18 2372
1、首先，在官方网站下载http://www.sencha.com/products/extjs/，下载最新版本的ExtJS，下载之后将文件解压，如下图所示。 2、下载开发工具（主要是Javascript的智能提示）Spket，如果已经安装了Eclipse，则只需要下载Spket的Eclipse插件即可，下载地址http://www.spket.com/，下载直接解压，有两个文件夹（fe
四、从XML读取数据表格
肖泽云
09-18 2354
XML是一种常见的数据，其应用也非常广泛。现在新建一个名为xmlgrid.html网页，其内容如下： XML表格           然后新建一个xmlgrid.xml文件，其内容如下： 张三 男 2012001 170 1985 9/1 12:00am 王芳 女 2012003 160 1985 10/
十二、ExtJS与Webservice应用
肖泽云
09-18 2262
Webservice与ExtJS结合的应用中有许多细节值得注意，下面就从Visual Studio创建一个Webservice项目开始，首先启动Visual Studio并新建一个“Asp.Net Web服务应用程序”或“Asp.Net Web应用程序”，新建项目命名为“TestWebService”，如下图所示： 打开项目中默认新建的Service1.asmx文件（如果没有asmx，则
六、ComboBox控件
肖泽云
09-18 1604
首先新建一个ComboBox.html网页，其内容如下： ComboBox控件         width=”100%” height=500/> 然后新建一个ComboBox.js文件，其内容如下： Ext.onReady(function(){     //1   定义数据模型 Ext.define(‘myDataModel’, {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值