zoukankan      html  css  js  c++  java

  • XHTML MP 基础（手机网站开发基础技术）

    1. 原文链接（英文）：http://www.developershome.com/wap/xhtmlmp/
    2. 同时推荐的文章（英文）http://mobiforge.com/starting/story/a-beginners-guide-mobile-web-development
    3. 更多关于WAP CSS的信息请访问：http://www.developershome.com/wap/wcss/
    4. 当你阅读完本文后肯定想看看一个完整的手机静态网站的实例吧！下面的链接可以下载到你需要的实例：
    5. http://mobiforge.com/starting/story/site-templates
    8. 一：XHTML MP的语法规则
    9. 我们知道，我们通常用电脑访问的网站的网页是用html构建的。类似的，现在WAP 2.0网站是用XHTML MP
    10. 构建，以供手持设备的访问，如手机、PDA等。
    11. XHTML MP是XHTML的子集，因此继承了它的语法。
    13. XHTML是更严格和简洁的HTML版本。现在来看看XHTML MP的语法规则：
    15. 1：标签必须正确闭合！
    16. <p>XHTML MP 教程 段落 1</p>
    17. <p>XHTML MP tutorial paragraph 2</p>
    18. <p>XHTML MP tutorial paragraph 3</p>
    19. 有些标签是不含内容的（开始标签和结束标签之间的东东，如上面的XHTML MP tutorial paragraph 1），
    20. 就必须用这种形式：Line break<br/>。请注意一定要加上 斜杠
    22. 2：标签和属性都必须是用小写
    23. 正确的写法：
    24. <p id="p1">XHTML MP tutorial paragraph 1</p>
    25. <p id="p2">XHTML MP tutorial paragraph 2</p>
    26. <p id="p3">XHTML MP tutorial paragraph 3</p>
    28. 3：属性的值必须放置在双引号内
    29. <p id="p1">XHTML MP tutorial paragraph 1</p>
    31. 4：不支持属性简写
    32. 在html中，如下写法是正确的：
    33. <input type="checkbox" checked />
    35. 而xhtml中必须这样写：
    36. <input type="checkbox" checked="checked" />
    38. 下面再举一个例子：
    39. <select multiple="multiple">
    40. <option>XHTML MP Tutorial Part 1</option>
    41. <option selected="selected">XHTML MP Tutorial Part 2</option>
    42. <option>XHTML MP Tutorial Part 3</option>
    43. </select>
    45. 5：标签的嵌套必须正确
    46. 不支持标签的重叠，所以下面的写法是错误的！
    47. <p><b>XHTML MP tutorial paragraph 1</p></b>
    48. 应该这样子写：
    49. <p><b>XHTML MP tutorial paragraph 1</b></p>
    50. 二：XHTML MP的 MIME类型 和 文件扩展名
    51. XHTML MP支持下面三种MIME类型
    52. 1.  application/vnd.wap.xhtml+xml
    53. 2.  application/xhtml+xml
    54. 3.  text/html
    55. 第一种类型是一些wap浏览器所需要的（如某些诺基亚S60浏览器），以便正确显示XHTML MP文档。
    56. 第二种是XHTML系列文档的类型
    57. 第三种是HTML文档的类型。这样用IE6就可以正常浏览这些文档，而如果遇到上面的两种类型就会弹出一个对话框
    58. 让你保存这些文档。
    59. 动态选择MIME类型
    60. 比如服务器端判断某个客户端请求可以处理application/vnd.wap.xhtml+xml MIME类型，那所有的XHTML MP文档就
    61. 都使用application/vnd.wap.xhtml+xml MIME类型发送给客户端。
    62. 要实现这个就必须通过服务器端编程，获取客户端HTTP请求的Header值，这里面的值包含客户端可以处理的所有MIME类型。
    63. 如果支持就设置XHTML MP的MIME类型为application/vnd.wap.xhtml+xml，如果支持其它的，就设置成其它的。
    64. 下面的例子是JSP的，但是你如果使用其它技术的话，原理是一样的，代码也是大同小异！
    65. <%
    66. String acceptHeader = request.getHeader("accept");
    68. if (acceptHeader.indexOf("application/vnd.wap.xhtml+xml") != -1)
    69. response.setContentType("application/vnd.wap.xhtml+xml");
    70. else if (acceptHeader.indexOf("application/xhtml+xml") != -1)
    71. response.setContentType("application/xhtml+xml");
    72. else
    73. response.setContentType("text/html");
    74. %>
    75. 这里的代码很简单，我就不多加解释了！
    76. 文件的扩展名
    77. 静态XHTML MP文档的典型扩展名包括：.xhtml、.html和.htm。当然，你也可以使用其它扩展名，只要你在
    78. WAP 服务配置文件里面设置清楚就OK了。如果你要使用服务器端技术（如JSP、PHP、ASP、SSI等），你就必须
    79. 使用相应的扩展名，如PHP使用.php，SSI使用.shtml。
    80. 三：XHTML MP文档结构
    81. 第一个例子    一个典型的ＸＨＴＭＬ　ＭＰ文档结构
    82. <?xml version="1.0"?>
    83. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    85. <html xmlns="http://www.w3.org/1999/xhtml">
    86. <head>
    87. <title>XHTML MP Tutorial</title>
    88. </head>
    90. <body>
    91. <p>Hello world. Welcome to our XHTML MP tutorial.</p>
    92. </body>
    93. </html>
    94. 讲解：
    95. <?xml version="1.0"?>
    96. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    97. 前面的预声明不是ＸＨＴＭＬ　ＭＰ元素的一部分，所以不必遵守ＸＨＴＭＬ　ＭＰ的约定。
    98. 剩下的内容和普通的ｈｔｍｌ没有什么不同了。
    99. 记住：ＸＨＴＭＬ　ＭＰ必须包含<html>, <head>, <title>, 和 <body>元素。
    100. 四：XML声明和字符编码
    101. <?xml version="1.0" encoding="UTF-8"?>
    102. 所有的XHTML MP文档都是XML文档，因此开始都会有一个XML声明。这里也可以指定文档的字符编码。
    103. 如果文档的字符编码是UTF-8 or UTF-16的话，其实可以省略掉。
    104. 虽然这个XML声明是可以省略的，但是我们不建议这么做，因此这样可能导致某些索爱的WAP浏览器产生错误。
    105. 五：DOCTYPE声明
    106. 这个<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    107. 声明是必须的。这个声明规定了DTD名称和URL。这个DTD包含标记语言的语法信息，可供验证工具验证你写的XHTML MP文档的语法正确性。
    108. 这些验证工具集成在很多IDE中了。
    109. 六：各标记简析
    110. <html>是XHTML MP的根标记。目前，该标记的xmlns属性只能是http://www.w3.org/1999/xhtml这个值，这个用来保证
    111. 严格遵守XHTML MP标准。但是即使缺失了这个标记，大部分浏览器还是能正常显示页面。
    112. <head>标记用来存放关于文档本身的信息。比如<title>和<link>,还有<meta>，这几个标记的功能和在传统的html里面的功能是一样的！
    113. 这里不再废话了。
    114. 还有<body>标记也不重复解释了。
    115. <p>标记的text-align属性已经被取消了，你可以在css中定义实现这个功能，如：
    116. p {
    117. text-align: right
    118. }
    119. 七：XHTML MP 的 Metadata
    120. 先看下面的例子：
    121. <head>
    122. <title>XHTML MP Tutorial</title>
    123. <meta name="author" content="Andrew"/>
    124. </head>
    125. WAP浏览器会自动忽略你自定义的meta属性（它不会显示在你的页面中），如这里的name，这并不会对你的页面的界面有任何影响。
    126. 八：XHTML MP的缓存控制
    127. 这里的缓存就是客户端用来临时存储XHTML文档的空间，如果浏览器发现缓存里面有这个页面了而且没有过期，那它就
    128. 直接显示这个页面，而不需要再次联网下载，这样节省了时间。
    129. 当然，你可以禁止缓存，你可以这样做：
    130. <head>
    131. <title>XHTML MP Tutorial</title>
    132. <meta http-equiv="Cache-Control"  content="no-cache"/>
    133. </head>
    134. 上面的也可以这样写：<meta http-equiv="Cache-Control" content="max-age=0"/>
    135. 如果你要设置缓存时间是300秒的话，可以这么做：
    136. <head>
    137. <title>XHTML MP Tutorial</title>
    138. <meta http-equiv="Cache-Control" content="max-age=300"/>
    139. </head>
    140. 还要注意的一点是，上面的设置和所用的设备是有关系的。有些wap浏览器是没有缓存的，所以你设置了也未必能起到作用。
    141. 面对这种情况，更好的方法是通过服务器端编程技术设置HTTP header和HTTP response。
    142. 九：XHTML MP的定时刷新
    143. <head>
    144. <title>XHTML MP Tutorial</title>
    145. <meta http-equiv="Cache-Control" content="no-cache"/>
    146. <meta http-equiv="refresh" content="15"/>
    147. </head>
    148. 上面的代码让页面每隔15秒刷新一次！
    149. 注意：必须包含这句：<meta http-equiv="Cache-Control" content="no-cache"/>，
    150. 如果没有的话，那可能刷新后只是看到缓存中的副本，并没有重新从服务器下载页面。
    152. 还有一个用法就是用来URL自动跳转，例子如下：
    153. <head>
    154. <title>XHTML MP Tutorial</title>
    155. <meta http-equiv="refresh" content="3;URL=http://blog.csdn.net/patriot074/"/>
    156. </head>
    157. 需要注意的是，不是所有浏览器都支持refresh，如：诺基亚 浏览器4.0和Ericsson T610 和 T68i
    158. 不过，阿佛使用的Windows Mobile手机是支持的，所以推荐使用。
    159. 随着智能手机的降价，上面的那些不支持的也很快要淘汰了吧。
    160. 十：注释
    161. 和html的一样啦：
    162. <!-- This is a comment in XHTML MP -->
    163. 十一：换行
    164. <BR/>, 例子：
    165. <body>
    166. <p>
    167. Line 1<br/>
    168.  Line 2<br/><br/>
    169.  Line 3
    170.  </p>
    171. </body>
    172. 十二：<hr/>标记
    173. 这个标记会给你的页面添加一条水平线。注意：
    174. 这个标记不能在<p></p>标记之间使用！！！
    175. 例子：
    176. <body>
    177. <p>
    178.  Table of Contents:<br/>
    179.  </p>
    180.  <hr/>
    181.  <p>
    182.  Part 1 XHTML MP Introduction<br/>
    183.  Part 2 Development of Wireless Markup Languages<br/>
    184.  Part 3 Advantages of XHTML MP<br/>
    185.  Part 4 WML Features Lost in XHTML MP
    186.  </p>
    187. </body>
    188. 十三：标题标记
    189. <h1>, <h2>, <h3>, <h4>, <h5>, 和 <h6>
    190. 浏览器将以不同的大小显示置于此标记中的文字，具体效果你可以测试下面的代码：
    191. <body>
    192. <h1>Level 1 Heading</h1>
    193.  <h2>Level 2 Heading</h2>
    194.  <h3>Level 3 Heading</h3>
    195.  <h4>Level 4 Heading</h4>
    196.  <h5>Level 5 Heading</h5>
    197.  <h6>Level 6 Heading</h6>
    198.  </body>
    200. 十四：文字样式
    201. 首先声明的是有些浏览器并不支持XHTML MP支持的标记。
    202. 例子：
    203. <body>
    204. <p>
    205.  <b>Bold</b><br/>
    206.  <i>Italic</i><br/>
    207.  <b><i>Bold italic</i></b><br/>
    208.  <small>Small</small><br/>
    209.  <big>Big</big><br/>
    210.  <em>Emphasis</em><br/>
    211.  <strong>Strong</strong>
    212.  </p>
    213.  </body>
    214. 你还可以通过WAP  CSS进行更精确的控制，比如把文字大小设置为12pt。
    215. 更多关于WAP CSS的信息请访问：（下面将不再重复声明）
    216. http://www.developershome.com/wap/wcss/
    217. 十五：预格式文本
    218. 在XHTML MP中，段落中的多个空格在手持设备中显示时只显示为一个空格。请看下面的例子：
    219. <body>
    220. <p> Hello, welcome 
    221. to 
    222. our
    223. XHTML MP tutorial. </p>
    224. </body>
    225. 为了能够保持你希望的格式，可以使用<pre>标签：
    226. <body>
    227. <pre> Hello, welcome 
    228. to 
    229. our
    230. XHTML MP tutorial. </pre>
    231. </body>
    232. 这样最后显示的格式就和上面代码中排列的一样了。
    233. 十六：列表标签
    234. 使用<ul>标签来建立无序列表，每个列表项前将显示一个小圆点。
    235. <li>标签用来包围每个列表项。
    236. 请看下面的例子：
    237. <body>
    238. <p>Table of Contents:</p>
    239.  <ul>
    240.  <li>Part 1 XHTML MP Introduction</li>
    241.  <li>Part 2 Development of Wireless Markup Languages</li>
    242.  <li>Part 3 Advantages of XHTML MP</li>
    243.  <li>Part 4 WML Features Lost in XHTML MP</li>
    244.  </ul>
    245. </body>
    246. 使用<ol>标签来建立有序列表，请看下面的例子：
    247. <body>
    248. <p>Table of Contents:</p>
    249.  <ol>
    250.  <li>XHTML MP Introduction</li>
    251.  <li>Development of Wireless Markup Languages</li>
    252.  <li>Advantages of XHTML MP</li>
    253.  <li>WML Features Lost in XHTML MP</li>
    254.  </ol>
    255. </body>
    256. 其中，在<ol>标签中可以设置start属性的值来决定列表序号的起始值，例如：
    257. <ol start="4">
    258. 通过WAP CSS你可以对列表的外观进行更精确的控制。例如，可以修改显示序号的方式，
    259. 比如使用i ,ii ,iii来替代1，2，3。
    260. 十七：显示图片
    261. 和HTML中一样，使用<img>标签来显示图片。height和width属性用来指定图片的高和宽（像素）。
    262. WAP2.0支持常用的GIF、JPG、PNG图像格式，当然这还跟用户所有设备有关，一些设备只能显示
    263. 其中的一部分格式。要想知道客户端支持的图片格式，很容易，和先前讲过的一样，可以通过检查
    264. HTTP Header，请看下面的代码：
    265. <?xml version="1.0"?>
    266. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    268. <html xmlns="http://www.w3.org/1999/xhtml">
    269. <head>
    270. <title>Image in XHTML MP</title>
    271. </head>
    273. <body>
    274. <p>
    275. <img src="monkey.gif" alt="coolMonkey" height="50" width="50" /><br/>
    276. Hello, welcome to our XHTML MP tutorial.
    277. </p>
    278. </body>
    279. </html>
    280. 其中alt属性在图片无法显示的时候会显示其设置的文本值。
    281. 十八：大图片问题
    282. 很多WAP浏览器没有水平滚动条（我的WM IE也是，但是它会自动缩放图片到合适尺寸）。因此如果图片超过设备的屏幕尺寸，
    283. 很多浏览器就只能显示局部图片，这样从用户看来很糟糕！还有注意的就是height和width属性设置只是影响外观，加载图片的时间
    284. 和图片大小有关，与你设置的height和width的值无关。使用大图片将让你的访问用户掏更多钱（并花费更多的时间）去支援移动，因为大图片带来大流量，
    285. 移动的疯狂收费已经吓住了不少潜在的客户（你不希望你的网站吓走用户吧）。阿佛的哥哥就是个例子，移动的1元包月5M套餐，
    286. 而他超过了流量（不少普通用户根本没有流量的概念），移动收了几十元，从此就再也不敢用手机GPRS上网了。
    287. 因此从优化XHTML MP页面图像的角度来看，控制图片的大小有下面几招：
    288. 1：使用PS等图片处理软件减小图片的尺寸，而不是传送大图片给无线设备，然后通过height和width来设定显示尺寸。
    289. 2：如果使用的GIF格式的图片，那么请使用小型颜色调色板，使用小型调色板会降低图片的质量，不过你可以在二者
    290. 之间做一个较好的平衡。
    291. 3：如果图片是JPG格式，你应该用合适压缩比率来压缩。这个平衡（图片尺寸和显示质量）也要你来控制。
    292. 4：期待移动降低上网资费并提高龟速网络（这仅仅是期待）。
    293. 更好的提高你的手机网站性能方式是先处理页面的文档请求，再接着处理图片的显示。但是如果构建这样的网站已经超过了本文要
    294. 描述的范围，如果你感兴趣的话请自行搜索关键字：Multipart messages
    295. 十九：表格
    296. 创建表格所使用的标签和HTML中使用的没有区别。所以请直接看下面的例子：
    297. <body>
    298. <table>
    299. <tr>
    300.   <td>Cell A</td>
    301.   <td>Cell B</td>
    302.   <td>Cell C</td>
    303. </tr>
    305. <tr>
    306.   <td>Cell D</td>
    307.   <td>Cell E</td>
    308.   <td rowspan="2">Cell F</td>
    309. </tr>
    311. <tr>
    312.   <td colspan="2">Cell G</td>
    313. </tr>
    314. </table>
    315. </body>
    316. 这里显示出来的效果是不带边框的表格。如果你要显示，可以使用WAP CSS来控制。
    317. 在<head>标签里面加入如下代码：
    318. <style>
    319.     td {
    320.   border: thin solid black
    321. }
    322. </style>
    323. 二十：超链接
    324. 超链接是用来导航的，你可以点击一个连接然后跳转到其他XHTML MP页面。这个html中的一样，请看下面的例子：
    325. <a href="http://blog.csdn.net/patriot074/">阿佛的博客首页</a>
    326. 下面再讲讲当前页面的定位（滚动到当前页面的指定位置）：
    327. 请看下面的例子：
    328. <body>
    329. <p><a id="top">Table of Contents:</a></p>
    330. <ul>
    331. <li>Part 1 XHTML MP Introduction</li>
    332. <li>Part 2 Development of Wireless Markup Languages</li>
    333. <li>Part 3 Advantages of XHTML MP</li>
    334. <li>Part 4 WML Features Lost in XHTML MP</li>
    335. <li>如果页面不够长，无法显示效果的话就再多几个列表项</li>
    336. <li>如果页面不够长，无法显示效果的话就再多几个列表项</li>
    337. <li>如果页面不够长，无法显示效果的话就再多几个列表项</li>
    338. <li>如果页面不够长，无法显示效果的话就再多几个列表项</li>
    339. </ul>
    340. <p><a href="#top">Back to top</a></p>
    341. </body>
    342. 从上面的例子可以看出，要定位到指定位置，可以通过<a href="#top">Back to top</a>
    343. 来实现，#号加上要跳转到位置的 <a>标记的id值就可以了。
    344. 一些老的机器和浏览器不支持这个，如索爱的T610 和 T68i（02年的，应该没什么人用了吧）
    345. 二十一：使用更短的URL
    346. 我们知道手机输入比用电脑键盘慢多了。因此你应该让你的网站的url尽可能的短，看看下面的几种方法：
    347. 1：好好利用子域名。使用http://wap.somedomain.com/来代替http://www.somedomain.com/wap/。还可以使用
    348. 更短的域名：  http://somedomain.com/ 。
    349. 2：让你的web站点和wap站点使用相同的URL。
    350. 使用"http://www.somedomain.com/" 或者 http://somedomain.com/来代替http://www.somedomain.com/wap/"作为
    351. WAP站点的域名。如果一个HTTP 请求来自手机，那么将把WAP版本的站点发送给这个请求用户，否则将返回web版本的站点。
    352. 3：设置站点的默认文档。这样就可以通过http://wap.somedomain.com/来访问http://wap.somedomain.com/index.xhtml页面。
    353. 二十二：图形化链接
    354. 这里的技巧和HTML的一样。你可以在<a>标签中放一个<img>标签，这样就可以在你点击图片的时候进行页面跳转了。
    355. <body>
    356. <p>
    357. This is page 1.<br/>
    358. <a href="linksEg5.xhtml"><img src="to2.gif" alt="Go to linksEg5.xhtml"/></a>
    359. </p>
    360. </body>
    361. 二十三：设置超链接的访问快捷键
    362. <body>
    363. <p>
    364. This is page 1.<br/>
    365. <a accesskey="1" href="linksEg7.xhtml"><img src="to2.gif" alt="Go to linksEg7.xhtml"/></a>
    366. </p>
    367. </body>
    368. 属性accesskey用来设置快捷键，当你按下这个键的时候就相当于点击了这个超链接（而在PC上浏览器仅仅是让这个超链接获得焦点）。
    369. accesskey属性的可用值是：*, #, 0, 1, 2, 3, 4, 5, 6, 7, 8, 和 9。
    370. 二十四：下拉选择框
    371. 这个也和HTML中一样，所以直接上代码：
    372. <body>
    373. <form method="get" action="xhtml_mp_tutorial_proc.asp">
    374. <p>
    375. <select name="selectionList">
    376. <option value="tutorial_A">XHTML MP Tutorial Part A</option>
    377. <option value="tutorial_B">XHTML MP Tutorial Part B</option>
    378. <option value="tutorial_C">XHTML MP Tutorial Part C</option>
    379. </select>
    380. </p>
    381. </form> 
    382. </body>
    383. 默认选择的代码是：
    384. <option value="tutorial_B" selected="selected">XHTML MP Tutorial Part B</option>
    385. 支持多选的代码是：（在WM IE中无效）
    386. <select name="selectionList" multiple="multiple">
    387. 二十五：Input元素
    388. 和HTML一样，XHTML MP也拥有各种获取用户输入的input元素。
    389. input元素必须放置在<form>标记之间。
    390. <input>标记的 type 属性定义了input元素的类型。name属性定义了input元素的名称，可供服务器端检索。
    391. 二十六：文本域
    392.     文本域用来获取字母和数字数据。请看下面的例子：
    393. <input type="text" name="name_for_this_element"/>
    394. type的默认属性就是text，所以可以忽略。
    395. 你可以使用 maxlength属性来控制文本域可输入的字符数，例如：
    396. <input type="text" name="myTextField" maxlength="16"/>
    397. 你还可以使用value属性来设置文本域的默认值，例如：
    398. <input type="text" name="myTextField" maxlength="16" value="Jack"/>
    399. XHTML MP不再支持<input>标签的format属性，你可以使用WAP CSS的-wap-input-format来控制。
    400. 例如，限制输入格式为最多10个数字：
    401. input {
    402. -wap-input-format: "10N"
    403. }
    404. 下面再来介绍一下密码域：
    405. 在密码域中所有的字符通过星号来显示，请看例子：
    406. <input type="password" name="name_for_this_element"/>
    407. 二十七：复选框和单选按钮
    408. 复选框和HTML中也类似，例如：
    409. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1"/>
    410. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="2"/>
    411. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="3"/>
    412. value的值将被发送服务器端（当有选中该复选框）。
    413. 你也可以通过checked属性设置复选框是否选中，代码如下：
    414. <input type="checkbox" name="xhtml_mp_tutorial_chapter" value="1" checked="checked"/>
    415. 下面的标记代码创建一个单选按钮：
    416. <input type="radio" name="name_for_this_element"/>
    417. 和复选框按钮类似，拥有相同name属性值的单选按钮将被分在同一个组，例如：
    418. <input type="radio" name="xhtml_mp_tutorial_chapter" value="1"/>
    419. <input type="radio" name="xhtml_mp_tutorial_chapter" value="2"/>
    420. <input type="radio" name="xhtml_mp_tutorial_chapter" value="3"/>
    421. name和value对是相关联的，这个将在form提交后用来后台取值。和复选框一样，checked属性用来指定是否选中该项。
    422. 二十八：隐藏字段
    423. 隐藏字段将不会在页面中显示。它用来存储状态信息的。例如：
    424. <input type="hidden" name="temp_id" value="123456"/>
    425. value属性会被回发到服务器端。
    426. 二十九：提交窗体数据到服务器端
    427. 在前文中，我们讲到了很多input元素，它们可以获取用户输入的数据。那么服务器端该如何获取这些输入的数据呢？
    428. 你需要把这些标签和提交按钮置于<form></form>标签中。例如：
    429. <?xml version="1.0"?>
    430. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    432. <html xmlns="http://www.w3.org/1999/xhtml">
    433. <head>
    434. <title>XHTML MP Tutorial</title>
    435. </head>
    437. <body>
    438. <h1>Registration Form</h1>
    439. <form method="get" action="processing.asp">
    440. <p>
    441. Username:<br/>
    442. <input name="username"/><br/>
    444. Password:<br/>
    445. <input type="password" name="password"/><br/>
    447. Gender:<br/>
    448. <input type="radio" name="gender" value="m"/>Male
    449. <input type="radio" name="gender" value="f"/>Female<br/>
    451. Country:<br/>
    452. <select name="country">
    453. <option value="ca">Canada</option>
    454. <option value="cn">China</option>
    455. <option value="fr">France</option>
    456. <option value="de">Germany</option>
    457. <option value="in">India</option>
    458. <option value="it">Italy</option>
    459. <option value="jp">Japan</option>
    460. <option value="kr">Korea</option>
    461. <option value="uk">United Kingdom</option>
    462. <option value="us">United States</option>
    463. </select><br/>
    465. Which part of our XHTML MP tutorial do you like?<br/>
    466. <input type="checkbox" name="tutorial_part" value="1"/>Part 1
    467. <input type="checkbox" name="tutorial_part" value="2"/>Part 2
    468. <input type="checkbox" name="tutorial_part" value="3"/>Part 3
    469. <input type="checkbox" name="tutorial_part" value="4"/>Part 4
    471. <input type="hidden" name="temp_id" value="123456"/>
    472. </p>
    474. <hr/>
    476. <p>
    477. <input type="submit"/>
    478. <input type="reset"/>
    479. </p>
    480. </form>
    481. </body>
    482. </html> 
    483. 三十：Form元素
    484. <form>标记是form控件的容器。下面继续介绍<form>标记的两个方法POST和GET。
    485. 先介绍get方法：
    486. <form method="get" action="processing.asp">
    487. 使用get方法，数据将追加到URL中发送。由于URL携带的字符量是有限制的，这也成了get方法的一大缺点。
    488. 还有一个问题是为了避免编码问题（当有非ASCII字符时），你应该使用POST方法替代get方法。而使用POST方法
    489. 数据时，数据将插入到请求到一起发送。
    490. 接下来再讲解一下action属性，该属性指定了哪个页面用来处理提交的数据，你可以在该页面编写后台处理代码。
    491. 三十一：提交按钮和重置按钮
    492. 在XHTML MP中，而每个form都应该包含一个submit按钮。当点击这个按钮后，窗体数据就会被提交到服务器进行处理。
    493. 下面来看看这个按钮：
    494. <input type="submit" value="OK"/>
    495. value属性用来指定这个按钮的标题。如果没有设置这个属性的话，那么将显示默认的 submit （如果是中文浏览器，会显示提交）
    496. 接着再来介绍一下重置按钮。当按下重置按钮时，form中包含的控件值将回到初始状态。例如：
    497. <input type="reset"/>
    498. 如果没有设置重置按钮的value值，那么将默认显示reset或者重置。
    499. 三十二：服务器端
    500. 你可以使用你熟悉的服务器端技术来处理这些<input>和<select>属性。流行的技术包括ASP/ASP.NET 、Java Servlet/JSP 、Perl和PHP。
    501. 下面提供一个简单的获取客户端传过来的值的样例，关于ASP的。在现实中服务器端要做更复杂的处理。例如，把窗体发送过来的数据存储到数据库中。
    502. <?xml version="1.0"?>
    503. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    505. <% Response.ContentType = "application/vnd.wap.xhtml+xml" %>
    507. <html xmlns="http://www.w3.org/1999/xhtml">
    508. <head>
    509. <title>XHTML MP Tutorial</title>
    510. </head>
    512. <body>
    513. <p>
    514. Data received at the server:<br/>
    515. Username: <% =Request.QueryString("username") %><br/>
    516. Password: <% =Request.QueryString("password") %><br/>
    517. Gender: <% =Request.QueryString("gender") %><br/>
    518. Country: <% =Request.QueryString("country") %><br/>
    519. Which part of our XHTML MP tutorial do you like?
    520. <%
    521. for i=1 to Request.QueryString("tutorial_part").Count
    522. Response.Write(Request.QueryString("tutorial_part")(i) & " ")
    523. next
    524. %>
    525. <br/>
    526. temp_id: <% =Request.QueryString("temp_id") %>
    527. </p>
    528. </body>
    529. </html>

    事实上，没有什么要比发现、培养、呵护、调整自己的心智的力量更重要的事情了.........
  • 相关阅读:
    20155327 2017-2018-2 《Java程序设计》第9周学习总结
    20155327《Java程序设计》第八周学习总结
    实验二 Java面向对象程序设计
    20155327 李百乾 Exp4 恶意代码分析
    20155327结对编程练习
    20155327第七周学习总结
    2017-2018-1 20155310 20155337 实验五 通讯协议设计
    # 2017-2018-1 20155337《信息安全系统设计基础》第十三周学习总结
    # 20155337 2017-2018 1 课上测试、课下作业、实验
    # 课下测试ch02
  • 原文地址：https://www.cnblogs.com/appleseed/p/1364393.html
Copyright © 2011-2022 走看看