wml_06 用户登陆界面 a标签 input标签使用和获取值

2009-12-29  分类：java_wml 标签:  作者:A-One


上几次视频都是一些显示方面数据， 并没有涉及到用户输入的， 都是输出给用户查看的数据。

一个网站也许只有查看数据功能就足够了， 但是更多都有 提供用户输入 然后进行操作。

例如： 网站数据过多， 都会提供一个常用的 搜索 功能，

这就要用户输入 要搜索的信息， 然后进行查找。

wml 也有这样的一个标签 input ， 就像 html 一样， 提供一个输入框。

先看看 input 这个标签在 手机上显示的样子吧， 呵呵。

我修改 上次视频的代码， 不重新写了。

============================================

例如现在假设 要做一个 用户登陆的界面

 <card id="c1" title="Login!">
  <p>
   Name:<input name="userName" />

  </p>
 </card>

然后用手机模拟器 进行浏览。

就是这样的一个登录框， 我把名字改短了， 好看一些。

奇怪， 不能输入东西， 我关闭一下 模拟器，再打开看看。

先点击模拟器 向下按钮。看到， 文本框边框变大了，说明焦点在文本框上

然后再点击中间的那个 按钮。  就可以看到 文本框中间 有一个竖线。

说明现在可以输入东西了。用键盘就可以输入东西。

====================================================

好现在 文本框有了， 那么 就是还差一个 登陆按钮。

在 wml 中， 不像 html 那样有提供按钮的， 基本都是一些链接，

例如<a> 标签，在 wml 语言中是支持的。

下面来使用一下 这个标签，做一个登陆按钮

   <a href="#c2">
    Login
   </a>

现在这样， 当点击 Login 就会 跳转到 card2 去。

同样要 点击 手机上面的 向下按钮 才会 选择到 Login 去的。

看到了吧， 这样就可以 点击 中间的确定 按钮了。点击后就显示另外一个card的信息了。

================================

现在我们想实现这样的一个功能， 当用户输入用户名后，

点击 Login 后， 在另外一个 卡片card上 显示 我们刚才 的用户信息

信息内容 ： Welcome + 用户名！

这样就要设置到 获取 用户值 的问题了，在 wml 中 相当方便

看我演示吧。

<p>Welcome , $(userName)</p>

只需使用 $(input的名字) 这样就可以获取 刚才输入的值了。

下面浏览一下 效果。 就是这样的效果了， 你输入的信息 会在另外

一张卡片上 被显示出来。

===============================

下面说一下 刚才的 input 标签， 如果你想做成 密码框的话

就要加入 type="password" 了

也就是<input type="password" name="password" />

这样你就会 看到 输入的东西 用 "*" 显示出来

input 标签还有很多属性，例如限制文本框的长度 size

还有 format ， 其中 format 中有很多可以限制用户 输入的，

例如只可以让 用户输入 大写，小写， 数字 等等。

这里我就不多说了， 有兴趣的朋友 可以网上查找一下 资料 或者 看看文档

好了， 我演示就到这里， 这个只是一个简单的 登陆，

还有就是在 本地显示 输入的信息， 真正的交互数据

应该发送到 后台， 然后经过后台和数据库里面的数据 进行比较，要验证

用户登陆信息， 然后再返回一个信息 给手机。。再显示出来

这个我们在以后会演示的。。。谢谢大家观看 8


“wml_06 用户登陆界面 a标签 input标签使用和获取值”没有评论

有任何疑问或建议，可以给作者留言：



公告：

  • 2010年5月之前的视频是文字解说演示，没有声音。
  • 2010年5月以后的视频全部带声音。

标签