程序允许用户输入数据才能发挥更多的作用,就是简单如选项选择也会给用户带来很大的方便。WML也提供了各种各样的数据输入机制。在WML上的数据输入原则只有一个:简单简单再简单。
<input> 简单文本输入[TOP] 输入数据最简单的途径是<input>,它允许用户输入字符串(可以进行一些规格化操作),并把输入结果保存到一个变量里。用户具体的输入方式跟所使用的终端有关。
<input emptyok="true | flase" format="STRING" maxlength="NUMBER" name="STRING" size="NUMBER" tabindex="NUMBER" title="STRING" type="text | password" value="STRING" xml:lang="STRING" /> |
| 掩码 |
允许输入的字符 |
| A |
大写字母和标点符号 |
| a |
小写字母和标点符号 |
| N |
数字 |
| X |
大写字母、标点符号和数字 |
| x |
小写字母、标点符号和数字 |
| M |
所有字符,但是所有字母转换成大写 |
| m |
所有字符,但是所有字母转换成小写 |
| \c |
直接显示c所代表的字符,不需要输入 |
| *f |
f代表上面掩码中的一个,字符数不限 |
| nf |
f代表上面掩码中的一个,重复n次,n取值1~9 |
emptyok:如果设为true,则用户可以不输入任何字符。一般情况下带有format属性的input要求用户必须按照一定格式输入数据(有时不允许输入空字符串,比如日期),所以此属性默认值为false; format:输入掩码,用来规定用户输入格式; maxlength:输入字符串的最大长度,默认为无限; name:必选。存储输入数据的变量名称。如果该变量已经定义并且其值复合输入格式,则变量的值直接作为input的默认值,否则取value属性的值作为默认值; size:输入区的宽度; tabindex:CARD中输入元素的tab顺序号; title:输入区的提示字符串; type:输入类型,默认为word。如果为password,则用户输入字符显示成“*”; value:input的默认值,如果name指定的变量可用,本属性被忽略; xml:lang:语言编码。
下面的例子演示了简单的用户输入:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="User Login"> <p> User Name: <input name="user" maxlength="10" tabindex="1" /><br/> Country: <input name="country" maxlength="2" emptyok="true" value="CN" tabindex="2" /><br/> Password: <input name="password" maxlength="8" type="password" tabindex="3" /><br/> </p> </card>
</wml> |
显示结果如下:[TOP]
|
输入前: |
入后: |
---- User login ---- User Name:[] Country:[CN] Password:[]
| |
---- User login ---- User Name:[wap86] Country:[CN] Password:[*******]
| |
<fieldset> 复合数据输入 [TOP] 一般来说,很少再一个CARD里放很多个数据输入元素。因为大多数WAP终端屏幕很小,不能在一个屏幕上显示很多输入区。所以,终端必须决定如何处理用户输入界面,比如元素是否因该显示成上下滚动的列表。也许一个页面上显示一个输入是最直观的方式。每个用户终端有不同的方式处理这个问题。其实WML已经提供了两种途径来达到最佳效果。
第一个途径就是CARD元素的ordered属性。通常,ordered设为true,表示CARD里的内容表现为一个线性列表,也许会显示很多页,就象前面那个例子。但是如果你把ordered设为false,则某些终端会把输入列表先列出来,如果你的输入项目不是很多的话(比如email,包括地址、主题和内容),可以在一个屏幕上显示出来。不过,然而,但是,非常可惜,目前国内市面有售的手机几乎都不支持。
如果你碰到更复杂的情况,那就要用到第二种方法:<fieldset>元素。它可以帮助你组织一系列文字和输入框,可以形成多个组。它告诉用户终端这些元素之间的关系以便更好地显示并引导用户输入。这种做法看起来有点象虚拟的页面,可以让用户分层输入。
<fieldset>的语法如下:
<fieldset title="STRING" xml:lang="STRING" <a>, <anchor>, <do>, <img>, 数据输入元素, 文本 </fieldset> |
title:用来在用户终端上显示的组名称; xml:lang:语言编码。
<fieldset>有两点需要注意:1、可以嵌套;2、只能使用上面所列出的几种元素类型。
下面例子演示了使用<fieldset>进行数据输入:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml> <card ordered="false">
<do type="accept"> <go href="register.asp" method="post"> <postfield name="fname" value="$fname"/> <postfield name="lname" value="$lname"/> <postfield name="address" value="$address"/> <postfield name="city" value="$city"/> <postfield name="province" value="$province"/> <postfield name="country" value="$country"/> <postfield name="postno" value="$postno"/> <postfield name="phone" value="$phone"/> <postfield name="fax" value="$fax"/> <postfield name="email" value="$email"/> </go> </do>
<p>
<fieldset title="Name"> First Name: <input name="fname" maxlength="10" emptyok="false"/><br/> Last Name: <input name="lname" maxlength="10" emptyok="false"/><br/> </fieldset>
<fieldset title="Address"> Address: <input name="address" maxlength="50" emptyok="false"/><br/> city: <input name="city" maxlength="30" emptyok="false"/><br/> province: <input name="province" maxlength="30" emptyok="false"/><br/> country: <input name="country" maxlength="30" emptyok="false"/><br/> Post NO: <input name="postno" maxlength="6" emptyok="false"/><br/> </fieldset>
<fieldset title="Contact"> Phone: <input name="phone" maxlength="30" emptyok="false"/><br/> Fax: <input name="fax" maxlength="30"/><br/> Email: <input name="email" maxlength="30" emptyok="false"/><br/> </fieldset>
</p> </card> </wml> |
<select>、<option> 选择 [TOP] 在WML中可以定义输入选项。选项可以嵌套,可以定义默认值,也可以在用户做出选择时触发任务。 基本的选项列表用<select>定义,语法如下:
<select iname="STRING" ivalue="STRING" multiple="true | false" name="STRING" tabindex="NUMBER" title="STRING" value="STRING" xml:lang="STRING" > <option>, <optgroup> </select> |
iname:保存用户选择索引值的变量。索引值表示选项在<select>中的顺序,从1开始计算。0代表用户没有选择; ivalue:保存默认选择索引值的变量。只有iname属性没有指定的时候,这个属性才起作用; name:保存用户选择文本的变量。 value:保存默认选择文本的变量。只有name属性没有指定的时候,这个属性才起作用; multiple:是否允许多重选择。如果为true,用户就可以一次选择多个选项。这时候<select>也会在name指定的变量里保存多个选择,用分号(;)分开,同样也适用于iname; title:用来显示的标题; tabindex:CARD中输入元素的tab顺序号; xml:lang:语言编码。
选项内的单独选择项用<option>定义,语法如下:
<option onpick="URL" title="STRING" value="STRING" xml:lang="STRING" > 文本, <onevent> </option> |
onpick:<option>被选择或取消选择时转向的地址。对于多重选择来说,所有<option>都被选择或取消选择时激发onpick事件; title:用来显示的标题; value:返回给<select>中name属性的文字。 xml:lang:语言编码。
下面的例子演示了<select>、<option>的用法:
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="maincard" title="About you"> <do type="accept"> <go href="register.asp" method="post"> <postfield name="sex" value="$sex" /> <postfield name="income" value="$income" /> <postfield name="hobbies" value="$hobbies" /> </go> </do> <p> Tell me about you: <select> <option onpick="#sexcard">Sex: $sex</option> <option onpick="#incomecard">Income: $income</option> <option onpick="#hobbiescard">Hobbies: $hobbies</option> </select> </p> </card>
<card id="sexcard" title="Sex"> <p> What''s your sex? <select name="sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </p> </card>
<card id="incomecard" title="Income"> <p> How much do you earn? <select name="income"> <option value="0-1000">0-1000</option> <option value="1001-5000">1001-5000</option> <option value="5001-10000">5001-10000</option> <option value="over 10000">over 10000</option> </select> </p> </card>
<card id="hobbiescard" title="Hobbies"> <p> What''s your hobbies? <select name="hobbies" multiple="true"> <option value="Computer">Computer</option> <option value="Sport">Sports</option> <option value="Book">Book</option> <option value="Entertainment">Entertainment</option> </select> </p> </card>
</wml> |
|
主画面: |
Income CARD: |
----- About you ---- Tell me about you: 1>Sex: 2 Income: 3 Hobbies:
OK
| |
------ Income ------ How much do you earn? 1>0-1000 2 1001-5000 3 5001-10000 4 over 10000
OK | |
|
Hobbies CARD: |
|
----- Hobbies ----- What''s your hobbies? 1>Computer 2 Sports 3 Book 4 Entertainment
OK | |
|
<optgroup>复选框 [TOP] <optgroup>更进一步,可以对<option>进行分组,语法如下:
<optgroup title="STRING" xml:lang="STRING" > <optgroup>, <option> </optgroup> |
title:用来显示的标题; xml:lang:语言编码。
下面的例子把前面例子里的hobbiescard作了改动,提供更多的选择内容:
<card id="hobbiescard" title="Hobbies"> <p> What''s your hobbies? <select name="hobbies" multiple="true"> <optgroup title="Computer"> <option value="Software">Software</option> <option value="Hardware">Hardware</option> </optgroup> <optgroup title="Sports"> <option value="Swimming">Swimming</option> <option value="Skiiing">Skiiing</option> <option value="Bicycle">Bicycle</option> <option value="Tennis">Tennis</option> </optgroup> <optgroup title="Book"> <option value="Literature">Literature</option> <option value="Technology">Technology</option> </optgroup> <optgroup title="Entertainment"> <option value="Films">Films</option> <option value="TV">TV</option> <option value="Dancing">Dancing</option> <option value="Bar">Bar</option> </optgroup> </select> </p> </card> | Hobbies CARD:
------ Hobbies ----- What''s your hobbies? 1 Computer 2>Sports 3 Book 4 Entertainment
OK |
|