HTML学习6：表单格式化

最新推荐文章于 2022-08-01 14:54:11 发布
最新推荐文章于 2022-08-01 14:54:11 发布
阅读量337 收藏
点赞数
分类专栏： HTML+CSS

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

做表单格式化。

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

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

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

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

       直接上代码：

[html]  view plain copy print ?
  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：常用标签之表单标签

lu18225857116
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你已经完成了 HTML 的学习，下一步该学习什么呢？
01-21
HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 的关键是标签，其作用是指示将出现的内容。 如需更多关于 HTML 的信息，请查看我们的 ...
【HTML】表单标签，表单的格式化
林伊的博客
12-08 1039
表单标签 表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器。 <form></form>是表单标签 <input type=“text”>是单行文本框，value这是默认显示内容； <input type=“password”>是密码文本框，value这是默认显示内容； <input type=“radio”>是单选框，name属性可以对其进行分组，在一个组内才能保证只能选一个，checkde=“chec
表单格式化
weixin_33675507的博客
10-30 233
表单格式化，其实我也不想起这个名字的，在前面学习的HTML中有文本格式化，这次的表单和表格的结合不妨叫做表单格式化。 这篇博客用到的HTML主要标签有：<table>标签和<form>标签以及两个标签中所包含的各个小标签。这些标签的使用和效果在前面已经展示过了，就不再啰嗦了。 顾名思义，表单格式化就是将表单的内容以表格呈现。在写...
HTML学习10：表单格式化
life is wonderful
10-28 2824
表单格式化，其实我也不想起这个名字的，在前面学习的HTML中有文本格式化，这次的表单和表格的结合不妨叫 做表单格式化。        这篇博客用到的HTML主要标签有：标签和标签以及两个标签中所包含的各个小标签。这些标签的使 用和效果在前面已经展示过了，就不再啰嗦了。        顾名思义，表单格式化就是将表单的内容以表格呈现。在写好表单的情况下，用表格将其内容存放。可能我的表述 还不
将form数据格式化为json数据
weixin_37695880的博客
05-18 2588
    在平常的访问中我们经常会遇见很多的问题，java是一种面向对象的语言，一切皆为对象，那么为了在请求的时候比较方便，不同的form有不同的字段，如果发送ajax请求的话，一个一个获取当然很麻烦，那么我们就将整个form看做是一个整体的对象，里面的各个表单内容作为属性。    上jquery代码方便大家了解    $.fn.serializeObject = function() { ...
LeaRun.net快速开发动态表单
力软低代码 - 快速开发平台，助力简单开发！
08-01 310
LeaRun.net快速开发框架通过归纳常规web组件和业务组件，归纳单一职责服务接口从而构建出通过配置生成动态表单，利用动态化表单，将开发工作抽象为配置工作，在统一的管理端维护字段及校验等，将服务端开发人员的生产力解放出来，节省大量的开发时间和测试时间，改变生产方式，提高生产力。...
html+css 实现简易导航栏功能
09-22
主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
HTML开发王
01-03
5.2.4 预格式化文本(pre元素) 5.2.5 段落的视觉呈现 5.3 标题字体(h#元素) 5.4 标记文档改变：ins和del元素 5.5 基本文字格式(tt、i、b、big、small、strike、s、u) 5.6 字体修改(font、basefont元素) 5.6.1 改变...
【尚硅谷 Java Web 笔记】表单格式化
qq_54110690的博客
01-26 163
为了让表单的显示更加美观，我们可以对表单进行格式化。 表单的格式化可以借助table——表格来实现。 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>表单格式化</title> </head> <body> <form> <h1 align="center"&g
Js form表单格式化和ajax data在追加（json合并）
coder_zyz的专栏
07-14 2559
如果js中需要将form表单格式化的话，可以使用serializeObject直接格式化如下：var data = $("#saveForm").serializeObject()如果需要往data里填充额外的值，可以使用$.extend进行添加，如下所示：data: $.extend(data,{ysjDm: ywMc，ysjmc: “222”})这种方法这ajax提交的时候使用的比较多...
HTML 表单格式化
Ethon自动化测试
01-02 862
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;用户注册&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="1px"
form 表单格式化成 对象
阿虎的专栏
04-02 2523
jquery 扩展,form 表单格式化成 对象
HTML表单格式化示例程序
东东的专栏
09-04 1254
效果展示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang = "zh-CN"> <head> <meta http-equ
HTML表单格式化
weixin_33892359的博客
05-26 216
HTML表单格式化 一、说明 用table布局 二、效果 三、代码 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;Form.html&lt;/title&gt; 5 6 &lt;meta name="keywords" content="keyword1,ke
Html（9） - 表单格式化
ShunXiangL的博客
05-30 547
格式化表单中的内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --
表单序列化及格式化表单序列化方法
Katerina09的博客
06-27 713
在JavaScript中正常是通过serialize() 和serializeArray()方法来进行表单序列.格式化表单序列化方法
格式化表单
想成为工程师的码农
04-22 129
//格式化表单 serializeObject = function(form) { var o = {}; $.each(form.serializeArray(), function(index) { if (o[this['name']]) { o[this['name']] = o[this['name']] + "," + this['v...
html自学网页制作,HTML入门学习教程:简单网页制作
最新发布
05-27
6. 学习更高级的HTML和CSS知识，如表格、表单、响应式设计等。 7. 继续练习和实践，尝试制作更复杂的网页，深入学习Web开发。 这些是入门学习HTML并制作简单网页的基本步骤。希望能帮助你开始你的学习之旅！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值