« 一个简单的采用XML的在线人员统计类利用sql查询创建access数据表或者修改字段属性的参考 »

wap网站(wml)中的表单控件

对表单的控制能力可以证明一个HTML设计者是否够专业,而且很多交互功能也必须依赖表单。WML没有表单属性,但是WML可以直接使用控件,同样可以达到使用表单的效果。因此,使用控件的水平可以体现一个WML设计者的制作水平。

WML控件有Select List和Input Box两个系列,每个系列另外包含几个子系列,基本可以满足表单设计的需求。

选择列表控件(Select List)
  Select有两对很重要也很容易混淆的属性:name, value , iname , ivalue。这四个属性的区别和用途不太容易描述清除,看了后面的例子会很容易理解。

  每个Select是一个或多个Option的集合,Option地结果返回给Select元素的name和iname。

  示例:

<select name="name" iname="iname value="value" ivalue="ivalue">
<option value="S">sina</option>
<option value="Y">yahoo</option>
</select>

相关属性:

1. multiple 这个布尔变量的值决定是否允许多重选择,值为True时Select控件允许复选,否则相反。

2. name & Value 这一组变量的主要作用是获取于该option的返回值,value提供name的缺省值。

3. iname & ivalue 与上一组参数功能相似,不同的是ivalue返回有效Option的序列号。被选中的控件用它的序号表示,0代表没有option被选中,假如第二个和第三个同时被选中就表示为 2;3

4. title 作为标题参数提供给浏览器,但是不同的浏览器处理方式有所不同,有些浏览器直接显示选项内容不显示标题,有的浏览器显示标题,按选择键进入选择界面。

5. tabindex 提供给浏览器的控件序号参数。

2、选项控件
  Option只有包含在Select内才有意义,无法单独使用。

  相关属性:

1. value Option的返回值,假如当前Option被选择,这个Value的值会被传送到Select元素的Name变量。

2. title 供浏览器显示的选项标题。

3. onpick 如果当前Option被点选,浏览器跳转到指定的Url。

示例1:

<card>
<p>Please choice your favourite Web.<br/>
 <select name="X">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
 </select>
<p>
</card>

上例是一个基本的单选列表,选择的结果被赋值给X。

示例2:

<card>
<p>Please choice all your favourite Web.<br/>
<select name="X" iname="I" ivalue="1;3" multiple="true">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
  <option value="N">netease</option>
</select>
<p>
</card>

上例是一个使用了iname和ivalue的多选列表,I被预置为 1;3 。假如用户选择了sina和yahoo,X被赋值为 S;Y,I被赋值为 1;2。假如用户不做任何选择,I等于1;3,X内容为空。

示例3:

<card>
<p>Jump to your favourite Web.<br/>
<select>
  <option onpick="http://wap.sina.com.cn">sina</option>
  <option onpick="http://wap.chnmobile.net">china mobile</option>
</select>
<p>
</card>

上例演示了Option的onpick功能,不管Option的状态如何,只要它被点选,浏览器就会跳转到指定的Url。

示例四:

<card>
<p>Please choice your favourite Web.<br/>
<select name="X">
  <option value="S">sina</option>
  <option value="Y">yahoo</option>
  <option value="S;Y">both</option>
</select>
<p>
</card>

上例演示了一个通过单选功能完成多选需求的示例。

文本框控件(Input)

<input name="name" title="title" type="type" value="value" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>

  用来输入文本,除了name属性是必要的,其他参数可选。

相关属性:

  title,该输入框的标题。
  type,默认值为text,如选择password,则输入的数据显示为*。
  name,指定了用来存储该输入文本的变量名字。
  value,与select的相同属性很相似,name用于存储变量数据,value用于提供缺省值。
  format,用来格式化输入的数据,可用的标记如下,使用时可用“一位数字标记”和“*标记”的形式,前者代表N个标记型字符,如3X,后者代表任意个(小于maxlength属性的值)标记型字符。

  标记 描述

  A   任何符号或者大写字母(不包括数字)
  a   任何符号或者小写字母(不包括数字)
  N   任何数字(不包括符号或者字母)
  X   任何符号、数字或者大写字母(不可改变为小写字母)
  x   任何符号、数字或者小写字母(不可改变为大写字母)
  M   任何符号、数字或者大写字母(可改变为小写字母)或者多个字符,默认为首字大写
  m   任何符号、数字或者小写字母(可改变为大写字母)或者多个字符,默认为首字小写

  maxlength属性,指定了用户可输入的最大字符长度,最大限制为256个字符。
  emptyok属性,表示用户可否不填输入框,默认为false,即要填。
  size属性,输入框显示长度,目前未被支持。
  tabindex属性,类似于在HTML表单中按TAB键后,焦点落在哪个选项上,该值决定了这个选择顺序,数字大的排在后面。目前未被支持。

示例:

<card>
<p>
 First name:
   <input type="text" name="first"/><br/>
 Last name:
   <input type="text" name="last"/><br/>
 Age:
   <Input type="text" name="age" format="3N"/>
</p>
</card>

分组选择控件(Optgroup)和复杂实例

相关Option分组产生层级,对最终用户来说可能没有什么意义,但是对于制作者来说,Option分组可以提供很多方便。

相关属性:

1. title 标题,通常这种标题无法被显示

示例:

<card>
<p> What OS You Use Now?
 <select name="OS">
  <optgroup title="microsoft">
   <option value="dos">dos</option>
   <option value="windows">windows</option>
  </optgroup>
  <optgroup title="others">
   <option value="unix">unix</option>
   <option value="linux">linux</option>
  </optgroup>
 </select>
</p>
</card>

上例演示了一个基本的Optgroup元素的应用,由于Optgroup没有变量参数,所以只能提供有限的应用。

一个比较复杂的例子:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>

<template>
  <do type="options" label="Back">
    <prev/>
  </do>
</template>

<card id="lists">
<p>
<select title="Pick Lists">
  <option onpick="#JY">Jin Yong</option>
  <option onpick="#GL">Gu Long</option>
</select>
</p>
</card>

<card id="JY">
<onevent type="onenterbackward">
  <prev/>
</onevent>
<do type="accept">
  <go href="#display_fav"/>
</do>
<p> Pick your fav Book:
<select name="fav" title="Stooges">
  <option value="Xiao">Xiao ao jiang hu</option>
  <option value="She">She diao ying xiong</option>
  <option value="Lu">Lu ding ji</option>
  <option value="Shen">Shen diao xia lv</option>
</select>
</p>
</card>

<card id="GL">
<onevent type="onenterbackward">
  <prev/>
</onevent>
<do type="accept">
  <go href="#display_fav"/>
</do>
<p> Pick your fav Book.
<select multiple="true" title="Gu Long" name="fav" >
  <option value="Gu">Gu xing zhuan</option>
  <option value="Da">Da di fei ying</option>
  <option value="Tian">Tian ya ming yue dao</option>
  <option value="feng">Lu xiao feng</option>
</select>
</p>
</card>

<card id="display_fav">
<p> Your fav was $fav. </p>
</card>
</wml>

控件组(Fieldset)和复杂示例
  Fieldset 提供了一种控件分组的功能,相对于Optgroup它的潜在价值更强了,但是需要客户端设备的支持才能获得显示效果。

  相关属性:

  title 标题

  综合示例:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>

<template>
  <do type="options" label="Back">
    <prev/>
  </do>
</template>

<card id="fields">
<p> Field Type:
 <select title="Field type">
  <option onpick="#nested">Nested</option>
  <option onpick="#password">Password</option>
 </select>
</p>
</card>

<card id="nested">
<onevent type="onenterbackward">
  <prev/>
</onevent>
<do type="accept" label="Done">
  <go href="#done"/>
</do>
<p>
<fieldset title="name">
  First Name:
    <input title="First" name="fname"/>
  Last Name:
    <input title="Last" name="lname"/>
</fieldset>
Gender:
<select title="Gender" name="gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>
</p>
</card>

<card id="done">
<p> $fname $lname is a $gender. </p>
</card>

<card id="password">
<onevent type="onenterbackward">
  <prev/>
</onevent>
<do type="accept" label="Done">
  <go href="#passwd_done"/>
</do>
<p> Input a password:<br/>
Min 3 chars.
<input title="Password" name="passwd" type="password" format="*m"/>
</p>
</card>

<card id="passwd_done">
  <p> Password was $passwd. </p>
</card>
</wml>


原创文章如转载,请注明:转载自悠悠博客 [ http://www.ajaxstu.com/ ]

相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。