码迷,mamicode.com
首页 > 其他好文 > 详细

表单格式化

时间:2015-10-30 17:04:18      阅读:564      评论:0      收藏:0      [点我收藏+]

标签:css   html   表单   格式化   

表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表格的结合不妨叫

做表单格式化。

       这篇博客用到的HTML主要标签有:<table>标签和<form>标签以及两个标签中所包含的各个小标签。这些标签的使

用和效果在前面已经展示过了,就不再啰嗦了。

       顾名思义,表单格式化就是将表单的内容以表格呈现。在写好表单的情况下,用表格将其内容存放。可能我的表述

还不明白,但是我现在理解的就是这样的。以后可能会有不一样的理解!

       直接上代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

  5. <title>HTML表单格式化演示</title>  

  6. </head>  

  7.   

  8. <body>  

  9.       <div align="center">  

  10.        <form>  

  11.               <table border="1" bordercolor="#0000FF" cellpadding="10" cellspacing="0" width="600">  

  12.                       <tr>  

  13.                            <th colspan="2">注册表单</th>  

  14.                       </tr>  

  15.                       <tr>  

  16.                            <td align="right">用户名称:</td>  

  17.                            <td>  

  18.                                 <input type="text" name="user" />  

  19.                            </td>  

  20.                       </tr>  

  21.                       <tr>  

  22.                            <td align="right">输入密码:</td>  

  23.                            <td>  

  24.                                 <input type="password" name="psw" />  

  25.                            </td>  

  26.                       </tr>  

  27.                       <tr>  

  28.                            <td align="right">确认密码:</td>  

  29.                            <td><input type="password" name="repsw" />  

  30.                                   

  31.                            </td>  

  32.                       </tr>  

  33.                       <tr>  

  34.                            <td align="right">选择性别:</td>  

  35.                            <td>  

  36.                                 <input type="radio" name="sex" value="man" />男   

  37.                                 <input type="radio" name="sex" value="woman" />女  

  38.                            </td>  

  39.                       </tr>  

  40.                       <tr>  

  41.                            <td align="right">选择技术:</td>  

  42.                            <td><input type="checkbox" name="technology" value="JAVA" />JAVA  

  43.                                <input type="checkbox" name="technology" value="HTML" />HTML  

  44.                                <input type="checkbox" name="technology" value="CSS" />CSS       

  45.                            </td>  

  46.                       </tr>  

  47.                       <tr>  

  48.                            <td align="right">选择国家:</td>  

  49.                            <td>  

  50.                                 <select name="country">  

  51.                                 <option value="none">--选择国家--</option>  

  52.                                 <option value="China">中国</option>  

  53.                                 <option value="USA">美国</option>  

  54.                                 <option value="UK">英国</option>  

  55.                         </select>  

  56.                            </td>  

  57.                       </tr>  

  58.                       <tr>  

  59.                            <th colspan="2">  

  60.                                 <div align="center">  

  61.                                   <input type="reset" value="清除数据" />  

  62.                                   <input type="submit" value="提交数据" />  

  63.                                 </div></th>  

  64.                       </tr>  

  65.               </table>  

  66.        </form>  

  67.        </div>  

  68. </body>  

  69. </html>  

        浏览器运行结果为:


技术分享

        表单格式化的制作是为了以后实现登录页面与服务器端交互所做的,也可以不用,在后面我们讲述客户端的

JavaScript验证和服务器端的完全验证。这里我们讲述的主要还是静态页面,在后面的学习中学习了动态网站技术,

我们再来实现交互。


本文出自 “没有水勒鱼” 博客,请务必保留此出处http://javaqun.blog.51cto.com/10687700/1708121

表单格式化

标签:css   html   表单   格式化   

原文地址:http://javaqun.blog.51cto.com/10687700/1708121

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!