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>
本文主题wap网站(wml)中的控件