form的用法

form的用法(一)
HTML form用法

表单(FORM)标记(TAGS)

基本语法

表单的基本语法

<form action="url" method=*>

...

...

<input type=submit> <input type=reset>

</form>

*=GET, POST

表单中提供给用户的输入形式

<input type=* name=**>

*=text, password, checkbox, radio, image, hidden, submit, reset **=Symbolic Name for CGI script

文字输入和密码输入

*=text, password

<input type=*>

<input type=* value=**>

<form action=/cgi-bin/post-query method=POST>

您的姓名:

<input type=text name=姓名><br>

您的主页的网址:

<input type=text name=网址 value=

密码:

<input type=password name=密码><br>

<input type=submit value="发送"><input type=reset value="重设"> </form>

您的姓名:

您的主页的网址:

密码:

<input type=* size=**>

<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST>

<input type=text name=a01 size=40><br>

<input type=text name=a02 maxlength=5><br>

<input type=submit><input type=reset>

</form>

复选框(Checkbox) 和 单选框(RadioButton)

<input type=checkbox>

<input type=checkbox checked>

<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST>

<input type=checkbox name=水果1>

Banana<p>

<input type=checkbox name=水果2 checked>

Apple<p>

<input type=checkbox name=水果3 value=橘子>

Orange<p>

<input type=submit><input type=reset>

</form>

Banana

Apple

Orange

<input type=radio value=**>

<input type=radio value=** checked>

<form action=/cgi-bin/post-query method=POST>

<input type=radio name=水果>

Banana<p>

<input type=radio name=水果 checked>

Apple<p>

<input type=radio name=水果 value=橘子>

Orange<p>

<input type=submit><input type=reset>

</form>

Banana

Apple

Orange

图象坐标

在下面选则一个系数后，在图象上点一下，就知道什么是图象坐标了！ <input type=image src=url>

<form action=/cgi-bin/post-query method=POST>

<input type=image name=face src=f.gif><p>

<input type=radio name=zoom value=2 checked>x2

<input type=radio name=zoom value=4>x4

<input type=radio name=zoom value=6>x6<p>

<input type=reset>

</form>

x2 x4 x6

隐藏表单的元素

<input type=hidden value=*>

<form action=/cgi-bin/post-query method=POST> <input type=hidden name=add value=hoge@hoge.jp> Here is a hidden element. <p>

<input type=submit><input type=reset>

</form>

Here is a hidden element.

列表框(Selectable Menu)

基本语法

<select name=*>

<option> ...

</select>

<option selected>

<option value=**>

<form action=/cgi-bin/post-query method=POST> <select name=fruits>

<option>Banana

<option selected>Apple

<option value=My_Favorite>Orange </select><p>

<input type=submit><input type=reset> </form>

<select size=**>

<form action=/cgi-bin/post-query method=POST> <select name=fruits size=3>

<option>Banana

<option selected>Apple

<option value=My_Favorite>Orange <option>Peach

</select><p>

<input type=submit><input type=reset> </form>

<select size=** multiple>

注意，是用 Ctrl 键配合鼠标实现多选。

(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST> <select name=fruits size=3 multiple>

<option selected>Banana

<option selected>Apple

<option value=My_Favorite>Orange

form的用法(二)
html-form的用法

HTML中form的用法

2010-01-19 16:33:46| 分类： PHP MySQL |字号大中小订阅

表单（form）是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

<form>

<input>

<input>

</form>

输入

多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>First name:

<input type="text" name="firstname">

<br>Last name:

<input type="text" name="lastname">

</form>

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>

<input type="radio" name="sex" value="male">

Male

<input type="radio" name="sex" value="female">

Female</form>

注意，只能从中选取其一。

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>

<input type="checkbox" name="bike">

I have a bike<br>

<input type="checkbox" name="car">

I have a car</form>

浏览器显示如下： I have a bike I have a car

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input"

action="html_form_action.asp" method="get">

Username: <input type="text" name="user">

<input type="submit" value="Submit">

</form>

假如您在上面的文本框内键入几个字母，并且点击确认按钮，那么输入数据会被传送到名为 "html_form_action.asp" 的页面。那一页将显示出输入的结果。

下面是一个完整的form例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

</head>

<body>

<form action="first.php" method="post">

<fieldset><legend>Enter your information in the form below:</legend>

<p><b>Name:</b><input type="text" name="name" size="20" maxlength="40"/></p> <p><b>Email Address:</b><input type="text" name="email" size="40"

maxlength="60"/></p>【form的用法】

<p><b>Gender:</b><input type="radio" name="gender" value="M" />Male<input type="radio" name="gender"

value="F"/>Female</p>

<p><b>Age:</b>

<select name="age">

<option value="0-29">Under 30</option>

<option value="30-60">Between 30 and 60</option>

<option value="60+">Over 60</option>

</select></p>【form的用法】

<p><b>Comments:</b><textarea name="comments" rows="3" cols="40"></textarea></p>

</fieldset>

<div align="center"><input type="submit" name="submit" value="Submit My

Information"/></div>

</form>

</body>

</html>

form的用法(三)
form表单method方法的使用

一、get和post定义

form元素的method属性用来指定发送form的http方法；

使用get时，form数据集被附加到form元素的action属性所指定的URL后面；

使用post时，form数据集被包装在请求的body中并被发送。

使用get提交方式，生成URL：user.do?loginId=abc

get仅仅是拼接一个URL，然后直接向服务区请求数据，需要提交给服务器的数据集包含在URL中。 使用post提交方式，生成URL：user.do

post会把form的数据集，即loginId=abc这个键值对包装在请求的body中，发给服务器，然后向服务器请求数据。

二、get和Post的区别

1、安全性

如果用get提交一个验证用户名和密码的form，一般认为是不安全的，因为用户名和密码将出现在URL上，进而出现在浏览器的历史记录中。

显然，在对安全性有要求的情况下，应该使用post。

2、编码

get只能向服务器发送ASCII字符，而post则可以发送整个ISO 10646中的字符。

get和post对应的enctype属性有区别。enctype有两个值，默认值为application/x-

另一个是multipart/form-data（用于文件上传）只能用于post。

3、提交数据的长度。

IE将请求的URL长度限制为2083个字符，从而限制了get提交的数据长度，如果URL超出了这个限制，提交form时IE不会有任何反映。

4、缓存

由于一个get得到的结果直接对应到一个URL，所以get的结果页面有可能被浏览器缓存，而post一般不能。

5、引用和SEO

可以用一个URI引用一个get的结果页面，而post的结果则不能，所以必然不能被搜索引擎搜到。

最本质的区别：

1、Get是用来从服务器上获得数据，而post是用来向服务器上传递数据

如果采用Post方法，浏览器将会按照下面两步来发送数据。

首先浏览器将action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。

在服务器端，一旦Post样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码，用户特定的服务器会明确指定应用程序应该如何接受这些参数。

采用Get方法：

浏览器会直接与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据，然后直接在一个传输步骤中发送所有的表单数据。

2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。

三、正确的使用get和post

当且仅当form是幂等的时候，使用get。

幂等：多次相同的请求产生的副作用，和一次请求的副作用相同。

如果提交请求纯粹只是从服务器端获取数据而不是进行其他操作，并且多次提交不会有明显的副作用，应该使用get。

比如：搜索引擎的查询(/search?q=abc)和分页(user.do?page=1)

如果提交这个请求会产生其他操作和影响，就应该使用post。

比如：修改服务器上数据库中的数据；发送一封邮件；删除一个文件等【form的用法】

另一个要考虑因素是安全性。

若符合下列任一情况，则用post方法：

a.请求的结果有持续性的副作用，例如：数据库内添加新的数据行。

b.若使用get方法，则表单上收集的数据可能让URL过长。

c.要传送的数据不是采用ASCII编码。

若符合下列任一情况，则用get方法：

a.请求是为了查找资源，html表单数据仅用来搜索。

b.请求结果无持续性的副作用。

c.收集的数据及html表单内的输入字段名称的总长不超过1024个字符。

四、浏览器差异

IE6:URL长度限制为2083个字符；post之后，刷新页面不会自动重新post数据，会出现警告。 IE7和IE6相同。

Firefox：刷新页面不会自动重新post数据会出现警告。

post和get容易忽视的一点差别：

就是当method为get时，action属性中URL后面的参数是忽视的。

例如：

action=insert.jsp?name=tobby method=get,当我们提交之后真正的url中是没有name=tobby的，他会根据表单中的内容重新组装成一个url的，假如form中有一个文本框,<input type="text" name="address" value="wuhan">,那么url会变成insert.jsp?addresswuhan.

form的用法(四)
FORMDESIGNER使用指南

FORMDESIGNER使用指南

1. FormDesigner作用

FormDesigner是表单定义器，它作为一个辅助工具配合CAXA图文档的实施和使用。CAXA提供的FormDesigner是作为一个独立的工具出现的。

在CAXA图文档系统中，数据类型缺省地分成十二种类型，如零部件、文档、图纸页、版本、标准件等。这些类的属性是由FormDesigner定义的，它提供一种类似于VC++环境中对话框的定义模式，可以在这个对话框设置多种风格的文本框、编辑框和检查框等。对应的文本框表示对象的属性，编辑筐、检查框等表示属性的显示形式。在所有的控件上可以双击弹出它的属性编辑框，在这里确定控件的基本属性，如名称、数据类型，数据长度等。另外，FormDesigner中提供对对话框中所有控件进行布局的工具，如编辑框等高、等宽、左对齐、右对齐、水平等距、垂直等距等。

对话框编辑完成后，保存成XML文件，这些定义文件存放在CAXA图文档客户端的OBJDEFINE目录下，即可被CAXA图文档所调用。另一方面，定义的对象属性要能转换成数据库相应表的字段，这可在系统菜单中选择“刷新数据表”来修改对象对应的表。

在CAXA图文档中，所有对象属性的显示、编辑、处理都是通过加载相应的XML文件实现的。在显示界面中的，对象属性的外观显示形式与FormDesigner中完全一致，在对属性的进行有关的选择操作时，列表框中列出的是FormDesigner定义的有关对象的所有属性。

2. 对Form的详细说明

在CAXA图文档中，OBJDEFINE目录下以CAXA图文档开头的xml文件是系统定义的对象文件，这些对象的有些基本属性是不可改变和编辑的，主要是因为在CAXA图文档的逻辑处理过程中，有些属性被固化在应用程序中，不允许再修改，否则应用程序会出错。

文件夹（CAXA图文档Folder.xml）： 名称, 创建日期,描述

文档（CAXA图文档Document.xml）： 文件代号,名称,路径,物理位置,文件状态,文件类型,页面号,页面大小,复查员,创建日期,比较,描述,是否在线,crc 部门(CAXA图文档Group.xml)： *名称，描述

产品(CAXA图文档Product.xml)： 名称,产品代号,创建日期,创建人,描述,管理者,状态

产品大类(CAXA图文档ProductClass.xml)： 名称,内部编号,创建日期,描述,创建人

工作版本(CAXA图文档DocWorkRev.xml)： 修改人员,创建日期,版本号,文件大小,路径,备注,crc,来源

零部件(CAXA图文档PartRevision.xml)： 名称,零件类型,生产类型,处理类型,结构类型,物料编码,创建人,创建时间,描述,代号,材料,规格,重量,总装,状态

用户(CAXA图文档Person.xml)： 员工号,名称,口令,邮编,家庭住址,电话1,电话2,移动电话,e_mail,状态,描述

3. 注意事项

FormDesigner作为一个辅助工作，它的使用有较严格的定义。

1. 建议FormDesigner只在系统实施期间使用。FormDesigner设计后的结果要求

转化为后台关系数据库中的表，这个工作尽可能在需求分析阶段确定下来，一旦系统进入到正式运行期，数据库中存放了一定的数据，就不宜再进行初始化工作，因为数据表结构的更改可能会造成数据库现有数据的丢失。

2. 定制只限制在对象属性的维护上。CAXA图文档系统中有8个基本对象，这

些对象不能增加，也不能减少，否则会引起应用程序出错。但用户可以修改、增加、删除对象的属性，同时注意这些操作不适用于对象的固有属性。

3. FormDesigner是面向开发商和代理商的定制工具。目前，FormDesigner还有

很多不完善的地方，使用不当，会造成系统运行错误或数据丢失，带来很大的损失。对FormDesigner的使用要求对系统有比较全面的了解，这要通过细致的培训才能做到。在现阶段，FormDesigner是一个面向开发商和代理商的用来开发和实施的工具，而不是面向最终用户的一个实施工具。

4. 基本控件：

静态文本:

选择菜单“控件”－>

“静态文本”或工具条图标，鼠标光标会变成“十”，在form中可以拉出一个区域，点击右键后选择属性或直接双击可以修改静态文

本的内容。“标题”就是静态文本显示的内容，“控件窗体属性”可以修改静态文本的外观设置。

图：修改静态文本属性

编辑框：

选择菜单“控件”－>“编辑框”或工具条图标，鼠标光标会变成“十”，在form中可以拉出一个区域，点击右键后选择属性或直接双击可以修改编辑框内容。“属性名称”就是定义的这个属性的名称，“数据来源”是指该控件的内容与数据库关联的字段名，“数据类型”是这个字段的类型。

图：修改编辑框属性

组合框：

选择菜单“控件”－>“编辑框”或工具条图标，鼠标光标会变成“十”，在form中可以拉出一个区域，点击右键后选择属性或直接双击可以修改组合框内容。“属性名称”就是定义的这个属性的名称，“数据来源”是指该控件的内容与

数据库关联的字段名，“数据类型”是这个字段的类型，点击“控件窗体属性”的属性值，可以看到一个按钮，点击该按钮会出现编辑组合框属性的页面，可以把组合框的缺省字符串在这个界面中输入。

复选按钮

选择菜单“控件”－>“复选按钮”或工具条图标，鼠标光标会变成“十”，在form中可以拉出一个区域，点击右键后选择属性或直接双击可以修改复选按钮内容。“属性名称”就是定义的这个属性的名称，“数据来源”是指该控件的内容与数据库关联的字段名，“数据类型”是这个字段的类型，建议选择布尔值类型。

组框：

选择菜单“控件”－>“组框”或工具条图标，鼠标光标会变成“十”，在form中可以拉出一个区域，组框是作为美化界面的辅助控件，不能定义属性，显示的内容和静态文本一样定义。

Form属性：

在form上空白处双击可以显示属性页的定义：

其中，属性页标题可以在对象显示的时候作为TAB页的标题，字体设置可以设置FORM上的控件字体，标签设置的规则为英文的双引号中间的内容为属性名称，属性名称和属性名称之间用英文的分号格开，定义的最后也是英文的分号结束，其他的字符可以自由定义的常量字符。在CAXA图文档系统中的结构树和文档树上显示的对象名称就是用这个标签设置中定义的样式，用实际的属性值代入得到的字符串。

form的用法(五)
Extjs Form用法详解

Extjs Form 用法详解（适用于 Extjs5） Extjs Form 是一个比较常用的控件，主要用来显示和编辑数据的，今天这篇文章将介绍 Extjs Form 控件的详细用法，包括创建 Form、添加子项、加载和更新数据、验证等。 本文的示例代码适用于 Extjs 4.x 和 Extjs 5.x，在 Extjs 4.2.1 和 Extjs 5.0.1 中亲测可 用！ 本文由齐飞（youring2@gmail.com）原创，并发布在 /article/extjs-form-in-detail，转载请注明出处！推荐更多 Extjs 教程、Extjs5 教程 Form 和 Form Basic Extjs Form 和 Form Basic 是两个东西，Form 提供界面的展示，而 Form Basic 则提供数据 的处理、验证等功能。每一个 Form Panel 在创建的时候，都会绑定一个 Form Basic，我们可 以通过方法 getForm 来获取： form.getForm() 在 API 方面，Form 的 config 中没有显示 Form Basic 的 config，但是 Form Basic 的 config 在 Form 的 config 中完全有效， 也就是说， 当我们使用 Extjs Form 的时候， 不仅仅要查看 Form 的 API 文档，还要浏览相关的 Form Basic 的文档。 创建 Extjs Form 控件 var form = Ext.create("Ext.form.Panel", { width: 500, height: 300, margin: 20, title: "Form", renderTo: Ext.getBody(), collapsible: true, //可折叠 autoScroll: true, //自动创建滚动条 defaultType: 'textfield', defaults: { anchor: '100%', }, fieldDefaults: { labelWidth: 80, labelAlign: "left", flex: 1,

margin: 5 }, items: [ { xtype: "container", layout: "hbox", items: [ { xtype: "textfield", name: "name", fieldLabel: " 姓名", allowBlank: false }, { xtype: "numberfield", name: "age", fieldLabel: " 年龄", decimalPrecision: 0, vtype: "age" } ] }, { xtype: "container", layout: "hbox", items: [ { xtype: "textfield", name: "phone", fieldLabel: " 电话", allowBlank: false, emptyText: "电话或手机号码" }, { xtype: "textfield", name: "phone", fieldLabel: " 邮箱", allowBlank: false, emptyText: "Email 地址", vtype: "email" } ] }, { xtype: "textareafield", name: "remark", fieldLabel: "备注", height: 50 } ], buttons: [ { xtype: "button", text: "保存" } ] }); 以上代码将创建一个 Form 表单，效果如下：

Extjs Form 布局 在 Extjs Form 中，默认的布局方式是 layout: 'anchor'，具体的 Extjs 布局可以参考我的 Extjs 布局系统详解这篇文章。 anchor 默认每行只显示一个控件，如果我们要在一行中显示多个，需要将这些控件放在一个 container 中，并设置 container 的 layout 为 hbox。 Extjs Form 加载数据 Form 可以加载 Model 数据，也可以加载 Json 数据，这样我们可以方便的将 json 或者 record 数据显示在 Extjs Form 控件中。 加载 Record 数据 Extjs Form 通过方法 loadRecord 加载 record，代码如下： var userRecord = Ext.create("MyApp.model.User", { name: "Tom", age: 25, phone: "123456" });

form.loadRecord(userRecord); 加载 Json 数据 Extjs Form 可以通过调用 formbasic 的 setValues 方法来加载 json 数据，代码如下： var data = { name: "Tom", age: 25, phone: "123456" }; form.getForm().setValues(data); Extjs Form 获取与更新数据 通过上面的方法，我们可以为 Form 加载 record 或 json 数据。当我们完成编辑之后，还需要 获取编辑后的数据，或者将编辑后的数据更新到对应的 record 中，Extjs Form 提供了相应的 方法来完成这些操作。 如果 Extjs Form 加载的是 record： form.updateRecord(); 如果 Extjs Form 加载的是 json 数据： form.getForm().getValues() Extjs Form 异步加载与提交 Extjs Form 除了可以加载页面中已存在的数据外，还可以通过 Ajax 的方式异步加载与提交数 据。这种方法不太常用。 异步加载 form.getForm().load({ url: "form-data.ashx" }); 服务器返回的数据格式如下： { success:true,

data:{ name: "Tom", age: 25, phone: "123456" } } 异步提交 form.submit({ url: "form-submit.ashx", success: function (form, action) { Ext.Msg.alert('Success', action.result.msg); } }); submit 方法提交的数据为 Form 中的所有 value，可以在服务器端获取到。 本文由齐飞（youring2@gmail.com）原创，并发布在 /article/extjs-form-in-detail，转载请注明出处！推荐更多 Extjs 教程、Extjs5 教程 Extjs Form 验证 在所有开发语言中，客户端验证是必不可少的。Extjs Form 也提供了客户端验证机制，我们可 以通过 vtype 来实现客户端验证。接下来我们详细的了解一下 Extjs 的客户端验证。 必填项，就是不能为空（allowBlank） 效果： 代码： { xtype: "textfield", name: "UserName", fieldLabel: "用户名",

form的用法(六)
form是什么意思_form的用法及例句

form是什么意思呢？下面21教育小编为各位英语学生准备了这个英语单词的常用意思翻译及例句：
用作n.翻译为:形式；形状；表格；良好的健康状态；表现状态；常规
form的用法和例句

	原文	翻译
Playing basketball is one form of physical exercise.	打篮球是体育活动的一种形式。
The form of a building grows out of its use.	建筑物的形式取决于建筑物的用途。
It has the irregular form of an ink blot.	它具有不规则的水渍形状。
I've got no record of this horse's form.	我没有这匹马的情况记录。
David was certainly out of form.	大卫那时竞技状态确实不好。
After six months training, the whole team is in superb form.	全队经过六个月的训练竞技状态极佳。
Judging by recent form, he should easily pass the exam.	从他最近的表现来看，他应该很容易考及格。
What's the form when you apply for a research grant?	申请科研补助金按常规应该怎么办?

用作动词 (v.)

	原文	翻译
A plan began to form in his head.	一项计划在他脑子中形成。
I cannot form any opinion about it.	我对此还不能形成什么看法。
Caves form when water infiltrates trmestone.	水渗透石灰石则形成洞穴。
He determined to form a club.	他决心成立一个俱乐部。
France and Germany agreed to form a joint army corps.	法国和德国同意建立一支联合军队。