form表单属性介绍

最新推荐文章于 2022-02-10 13:38:45 发布
最新推荐文章于 2022-02-10 13:38:45 发布
阅读量147 收藏
点赞数
分类专栏： ExtJS 文章标签： EXT CSS JavaScript prototype HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_9841/article/details/82036856
版权 
<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="./../ext/ext-all.js"></script>
	<style type="text/css">
		.allow-float {clear:none!important;}
		.stop-float {clear:both!important;}
		.float-left {float:left;}
	</style>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';
			var form = new Ext.form.FormPanel({
				title: '提示信息（qtip）',
				labelSeparator: ':',
				bodyStyle: 'padding:5 5 5 5',
				height: 500,
				width: 300,
				frame: true,
				labelWidth: 60,
				labelAlign: 'right',
				applyTo: 'form',
				items:[
				       	new Ext.form.TextField({
				       		fieldLabel: '姓名',
				       		id: 'userName',
				       		selectOnFocus: true,
				       		allowBlank: false,
				       		regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
				       		regexText: '用户名格式错误',
				       		blankText: '请填写用户名'
				       	}),
				       	new Ext.form.TextField({
				       		fieldLabel: '密码',
				       		allowBlank: false,
				       		blankText: '请填写密码',
				       		inputType: 'password'
				       	}),
				       	new Ext.form.TextArea({
				       		id: 'memo',
				       		width: 150,
				       		fieldLabel: '备注'
				       	}),
				       	new Ext.form.NumberField({
				       		fieldLabel: '整数',
				       		allowDecimals: false,	//不允许输入小数
				       		nanText: '请输入有效的整数', //无效数字提示
				       		allowNegative: false		//不允许输入负数
				       	}),
				    	new Ext.form.NumberField({
				       		fieldLabel: '小数',
				       		decimalPrecision: 2,	//精确到小数点后两位
				       		allowDecimals: true,	//允许输入小数
				       		nanText: '请输入有效的小数', //无效数字提示
				       		allowNegative: false		//不允许输入负数
				       	}),
				    	new Ext.form.NumberField({
				       		fieldLabel: '数字限制',
				       		baseChars: '12345' //输入数字范围
				       	}),
				       	new Ext.form.NumberField({
				       		fieldLabel: '数值限制',
				       		maxValue: 100,	//最大值
				       		minValue: 50,	//最小值
				       		minText: '小了',
				       		maxText: '大了'				       
				       	}),
				       	new Ext.form.Radio({
				       		name: 'sex',
				       		fieldLabel: '性别',
				       		boxLabel: '男'
				       	}),
				    	new Ext.form.Radio({
				       		name: 'sex',
				       		fieldLabel: '性别',
				       		boxLabel: '女'
				       	}),
				    	new Ext.form.Checkbox({
				       		name: 'swim',
				       		fieldLabel: '爱好',
				       		boxLabel: '游泳'
				       	}),
				       	new Ext.form.Checkbox({
				       		name: 'walk',
				       		fieldLabel: '爱好',
				       		boxLabel: '散步'
				       	}),
				       	new Ext.form.Radio({
				       		name: 'gender',
				       		itemCls: 'float-left',
				       		clearCls: 'allow-float',
				       		fieldLabel: '性别',
				       		boxLabel: '男'
				       	}),
				    	new Ext.form.Radio({
				       		name: 'gender',
				       		clearCls: 'stop-float',
				       		hideLabel: true,
				       		boxLabel: '女'
				       	}),
				    	new Ext.form.Checkbox({
				       		name: 'hob',
				     		itemCls: 'float-left',
				       		clearCls: 'allow-float',
				       		fieldLabel: '爱好',
				       		boxLabel: '游泳'
				       	}),
				       	new Ext.form.Checkbox({
				       		name: 'inter',
				       		clearCls: 'stop-float',
				       		hideLabel: true,
				       		boxLabel: '散步'
				       	}),
				       	new Ext.form.TriggerField({
				       		id: 'center',
				       		fieldLabel: '触发字段',
				       		hideTriggerClick: false,
				       		onTriggerClick : function(e){
				       			var center = form.findById("center");
				       			alert(center.getValue());
				       		}
				       	})
				       	
			
				       ],
				buttons:[{
					text: '确定',
					handler: showValue
				}]
			});
			function showValue(){
				var memo = form.findById("memo");
				alert(memo.getValue());
			}
		});
	</script>
</HEAD>
<body id="form">
</body>
</HTML>
 
iteye_9841
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FORM属性及介绍
糖果爸比
02-12 1165
1. action 一个处理这个form信息的程序所在的URL。这个值可以被 或者 元素中的 formaction 属性重载（覆盖）。 2. method 浏览器使用这种 HTTP 方式来提交 form. 可能的值有: post: 指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器. get: 指的是 HTTP GET 方法; 表单数据会附加在 actio...
Form表单属性说明
dibian7566的博客
04-13 901
我们可以用<form>...</form>来创建一个表单向服务器提交数据，当然，仅仅是使用form标签是不行的，单纯的form标签没有任何作用。我们通过设置form标签的属性值以及为它添加子元素，从而达到上传数据以及和服务器进行通讯交互的目的。 <form>标签的属性规定了当前网页上传数据的地址和方式。 1.action属性 form标签的...
form表单的属性
hhthwx的博客
10-30 2336
Form的属性method属性：规定用于发送 form-data 的 HTTP 方法。实际上就是请求的方式。 name属性：表单的名称。 action属性：指定表单请求的路径 target属性：指定action的Url在哪里打开method属性form表单是的HTML中常用的标签。主要用来提交参数与后台数据进行交互。提交表单的方式有两种（主要通过method属性控制）：①GET方式：最常
form的属性说明
bazhuang
05-16 338
form在页面操作的时候是一个比较重要的标签了，那么这里就介绍一下这个标签里面的几个重要属性吧。 一般我们常用到的是action,method。因为html没有一个严格的语法约束，这些都可以不写，那么也就意味着得有一个默认处理逻辑。 action如果没写，那么就是采用当前页面的url进行提交，method默认是get方式。相信这2个大家都已经很熟悉了。 这里主要是说一下其他几个： 1、e...
【HTML基础】form表单常用的7种属性和9种元素详解（含在线练习网址）
Fighting_hawk的博客
02-10 1万+
1. 掌握form表单的作用：提交数据。 2. 掌握form表单7种常用属性的作用与语法。 3. 掌握form表单9种常用元素的作用与语法。
HTML中Form表单的method属性使用介绍
09-28
`method`属性是`<form>`标签的一个关键属性，它定义了如何将这些数据发送到服务器。在HTML中，`method`属性有两个主要值：`GET`和`POST`。 1. `GET`方法： - `GET`方法是最常见的提交方式，它将表单数据附加到`...
jquery动态改变form属性提交表单
10-25
在js中动态改变form的属性，满足不同条件的form提交需求，下面有个不错的示例，大家可以参考下
form表单中什么隐藏属性可以随表单提交
09-28
主要介绍了关于form表单提交什么隐藏属性也可以提交数据,需要的朋友可以参考下
Form表单标签的Enctype属性的作用及应用示例介绍
09-28
其中一个重要的属性是`enctype`，它定义了在表单提交时浏览器如何编码表单数据。`enctype`属性对于特定类型的表单数据，特别是涉及到文件上传的情况，具有至关重要的作用。 `enctype`属性主要有以下三种编码类型： ...
动态设置form表单的action属性的值的简单方法
09-02
在网页开发中，表单（Form）是用户与服务器交互的重要元素，而表单的`action`属性则是定义了表单提交后数据处理的URL。动态设置`action`属性的值，可以使得表单根据不同的条件提交到不同的处理程序，为用户提供更...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
CAINIAOQIANDUAN的博客
08-11 2万+
form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值： （单行文本输入框） （密码输入框） （单选框） （多选框） （提交按钮） （重置按钮） 或者按钮（空按钮） （下拉框选） （多行文本框） （1） 是表单的标签，所有的需要写在f...
form表单中几种属性
weixin_44001985的博客
05-02 9134
表单的主要功能是收集信息，一般分两部分：1.体现表单元素的HTML代码；2.客户端脚本 ，或是服务器用来处理用户所填写信息的程序。 action就是你表单要提交的地址。地址可以是请求后台的地址，如Servlet,Struts 等；也可以是提交到另一个页面的地址，如HTML，jsp等。 method是将表单的数据从浏览器传送到服务器的方法。即开始时浏...
FORM表单及其属性
zhaolimulin的博客
04-07 4735
html> html lang="en"> head> meta charset="UTF-8"> h1 style="text-align: center">表单formh1> title>css常用选择器title> head> body> form action="contact04.html" method="get" id="ddl"> 用来指定数据要提交
form表单的提交方式
dxj124的博客
11-20 1130
form表单的提交方式：  &lt;form name="formMain" id="formMain" method="post" onsubmit="prepSubmit" enctype="multipart/form-data"    action="douban.php"   target="PostIfr"&gt; onsubmit:
表单form标签的属性、值以及描述
请叫我二狗哥
03-28 4238
属性 值 描述 action URL 提交表单时，向何处发送表单数据 method get、post 设置表单以何种方式发送到表单页面 name form_name 表单的名称 target _blank、_self _parent、_top 在何处打开action URL enctype ...
FORM表单的几大属性
static_coder的博客
12-28 1万+
FORM表单的几大属性问题引入 在做一个活动支付项目的时候，提交订单（form表单）跳转支付页面发现没有反应。经过断点排查发现断点也进了，不报错。但是返回的就是空白页，让人很纠结。 进过反复测试，才发现是杀毒软件拦截了form表单的请求。如何来解决这个问题呢？下来我们来看看Form表单的属性就会明白了。 FORM的属性 method属性：规定用于发送 form-data 的 HTTP
HTML-form表单+iframe
weixin_47345929的博客
11-24 1669
form 表单标签 form表单是标签是所有标签最核心标签之一，它是用来实现前后端交互的一个重要标签 常用属性： name：表单名称 action：表单数据提交的地方（通常是一个后台文件名（.jsp/.php/.asp/.aspx/.py等），或网址）。如果是#，表示提交到当前文件下。 method：前端提交数据到后台的方法，主要有get和post。默认的是get。 用get提交，数据会直接暴露出来，用past不会暴露显示的是action的值 表单元素有： input类：主要完成输入,选择或发出指令根据
form表单的各种属性简单列举
zjbkzj的博客
05-19 4378
form表单的各种属性列举
html中form表单的使用方法和介绍
热门推荐
王永存
10-04 8万+
form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能：用于搜集不同类型的用户输入的内容   有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。 第2节、常用的表单元素 ü  form   表单 ü  input   表单元素，表单项 ü  select和option  下拉菜单 ü  tex

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值