HTML学习6:表单格式化

转载 2015年11月18日 15:46:42

 表单格式化,其实我也不想起这个名字的,在前面学习的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验证和服务器端的完全验证。这里我们讲述的主要还是静态页面,在后面的学习中学习了动态网站技术,

我们再来实现交互。目前我所接触的就是ASP.NET了,学习了C#编程语言,应该可以在VS中实现交互。

        HTML学习表单格式化相关的知识:HTML学习7:常用标签之表格标签 

                                                                 HTML学习9:常用标签之表单标签

相关文章推荐

PHP(6)只记录我的学习历程 html(表单标志)

表单标志 --> 请选择你喜欢的男歌星: 刘德华 张学友 郭富城 ...

Html学习笔记(6)-与浏览者交互,表单标签

Html学习笔记(6)-与浏览者交互,表单标签标签: html primer web

【HTML】6.表单标签指定服务器

表单提交到指定服务器 action属性值:用于指定表单数据提交的目的地(服务端)。 method属性值:用于明确提交方式,get/post。如果不定义,method默认是get。 表单程序 ...
  • Cleann
  • Cleann
  • 2017年04月15日 10:41
  • 194

HTML学习10:表单格式化

表单格式化,其实我也不想起这个名字的,在前面学习的HTML中有文本格式化,这次的表单和表格的结合不妨叫 做表单格式化。        这篇博客用到的HTML主要标签有:标签和标签以及两个标签中所包...

accp6.0 《使用javascript增强交互效果》学习笔记ch6 表单基本验证技术

由来:表单作为客户端向服务器提交数据的主要载体,为保证提交数据是合法的,以及减少服务器压力,表单验证是很有必要的。 6.1表单验证的内容: 常用的有: 1.非空验证 2.是否为数字 ...
  • amtea
  • amtea
  • 2011年10月07日 10:53
  • 684

ExtJS5.1学习笔记6——给表单填充本地数据的两种方式

本例将要使用两种方式,为表单填充数据,这两种方式分别是: 1、使用数据模型为表单填充数据 2、使用json数据给表单填充数据 下面是程序执行的效果图: 下面是程序的代码: ...

HTML学习笔记-(表单)选择框概述

一个表单由3个基本元素组成。第一个是表单标签,包含处理表单数据所用网络程序的URL及数据提交到服务器的方法;第二个是表单域,包含文本框,密码框,隐藏框,复选框等;第三个是表单按钮,包含提交按钮,复位按...

JavaScript与 HTML表单的交互过程,想要学习动态网页但是无从下手的新手看看。

最近开始了 java  web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的  读完本篇文章后相信初学者会有一个 清晰的理解 。。。  对应下面的...

HTML5 学习笔记5-表单新增元素和属性(续写)

1、标签的control属性:HTML5中可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。 邮编: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML学习6:表单格式化
举报原因:
原因补充:

(最多只允许输入30个字)