HTML表单格式化示例程序

最新推荐文章于 2023-11-07 18:01:37 发布
最新推荐文章于 2023-11-07 18:01:37 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013383042/article/details/52434591
版权

效果展示：
这里写图片描述

<!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-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML表单格式化示例程序</title>
</head>

<body>
    <div align="center">
        <form>
            <table border="1" bordercolor="#0000FF" cellpadding="10" cellspacing="0" width="600">
                <tr>
                    <th colspan="2">注册表单</th>
                </tr>   

                <tr>
                    <td align="center">用户名称：</td>

                    <td>
                        <input type="text" name="user" />
                    </td>
                </tr>

                <tr>
                    <td align="center">输入密码：</td>

                    <td>
                        <input type="text" name="pwd" />
                    </td>
                </tr>

                <tr>
                    <td align="center">确认密码：</td>

                    <td>
                        <input type="text" name="repwd" />
                    </td>
                </tr>

                <tr>
                    <td align="center">选择性别：</td>

                    <td>
                        <input type="radio" name="sex" value="man" />男
                        <input type="radio" name="sex" value="woman" />女
                    </td>
                </tr>

                <tr>
                    <td align="center">选择技术：</td>

                    <td>
                        <input type="checkbox" name="tech" value="java" />java
                        <input type="checkbox" name="tech" value="javascript" />javascript
                        <input type="checkbox" name="tech" value="jQuery" />jQuery
                    </td>   
                </tr>

                <tr>
                    <td align="center">选择国家：</td>

                    <td>
                        <select name="country">
                            <option value="None">请选择国家</option>
                            <option value="China">中国</option>
                            <option value="USA">美国</option>
                            <option value="Canada">加拿大</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th colspan="2">
                        <div align="center">
                            <input type="submit" value="提交数据" />
                            <input type="reset" value="清空数据" />
                        </div>
                    </th>
                </tr>

            </table>
        </form>
    </div>
</body>
</html>

运行方法：代码直接粘贴到一个html文件中，即可执行，显示出效果。

原创：http://blog.csdn.net/u013383042/article/details/52434591

家庭煮夫在搬砖
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记一一HTML表格标签（table）(1)
2401_84091993的博客
04-09 1081
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取。
【尚硅谷 Java Web 笔记】表单格式化
qq_54110690的博客
01-26 172
为了让表单的显示更加美观，我们可以对表单进行格式化。 表单的格式化可以借助table——表格来实现。 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>表单格式化</title> </head> <body> <form> <h1 align="center"&g
HTML-----第二章表格及样式
BUG专业户
05-20 3212
表格 CSS样式入门 基础选择器
html 简单的table样式
z_qifa的博客
07-03 2万+
效果预览： 代码： 1 DOCTYPE html> 2 html> 3 head> 4 meta charset="utf-8"> 5 title>html 简单的table样式title> 6 style type="text/css"> 7 /* gridtable */ 8 table.grid
html 原生table表格样式修改，和element table一样
最新发布
m0_60189398的博客
11-07 416
html 原生table表格样式修改，和element table一样
表单格式化
weixin_33675507的博客
10-30 236
表单格式化，其实我也不想起这个名字的，在前面学习的HTML中有文本格式化，这次的表单和表格的结合不妨叫做表单格式化。 这篇博客用到的HTML主要标签有：<table>标签和<form>标签以及两个标签中所包含的各个小标签。这些标签的使用和效果在前面已经展示过了，就不再啰嗦了。 顾名思义，表单格式化就是将表单的内容以表格呈现。在写...
javascript date格式化示例
10-26
JavaScript中的Date对象是处理日期和时间的核心工具，它提供了丰富的功能来创建、操作和格式化日期。在JavaScript中，Date对象允许我们获取当前日期、设置特定日期、进行日期比较以及格式化日期输出。本文将深入探讨...
表单序列化与jq中的serialize使用示例
09-04
表单序列化是指将HTML表单中的数据转换成URL编码格式，以便于通过HTTP请求发送到服务器。这个过程通常用于AJAX操作，因为传统的表单提交会刷新整个页面，而我们通常希望在不刷新页面的情况下发送和接收数据。 ### 2...
详谈表单格式化插件jquery.serializeJSON
10-19
`jquery.serializeJSON`是jQuery的一个扩展，它允许我们以JSON格式序列化表单数据。通常，jQuery的`.serialize()`方法可以将表单元素转换为URL编码的字符串，但这种格式并不适合直接作为JSON对象使用。而`....
jQuery实现form表单序列化转换为json对象功能示例
10-18
在HTML表单中，我们通常使用`serialize()`方法将表单元素的数据序列化成URL编码的字符串。然而，对于JSON（JavaScript Object Notation）格式，我们需要更进一步，将这些序列化的数据转换为键值对的形式，以适应JSON...
vue构建动态表单的方法示例
12-10
后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据，可以对表单进行重置操作。我结合element ui的控件的...
html 表单在线格式化,HTML 表单
weixin_36210213的博客
05-31 234
HTML 表单和输入HTML 表单用于采集不同类型的用户输入。 元素HTML 表单的作用是采集用户输入。 元素定义 HTML 表单：在线实例创建文本字段 (Text field)本例演示如何在 HTML 页面创建文本域，用户可以在文本域中写入文本。创建密码字段本例演示如何创建 HTML 的密码域，用户可以在密码域中写入密码。(本页底部有更多关于 HTML 表单的实例。)HTML 表单表单是一个包含...
Html（9） - 表单格式化
ShunXiangL的博客
05-30 553
格式化表单中的内容<!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 --
对form:input标签中的数字进行格式化
qq_29662201的博客
06-15 7154
单独使用&lt;fmt:formatNumber&gt;标签，在var中设置名称，再在&lt;form:input&gt;中通过value引用&lt;fmt:formatNumber&gt;&lt;fmt:formatNumber type="number" value="${kyConsultantContract.contractValue}" pattern="#.00" var=&am
表单序列化及格式化表单序列化方法
Katerina09的博客
06-27 716
在JavaScript中正常是通过serialize() 和serializeArray()方法来进行表单序列.格式化表单序列化方法
vxetable显示html,vxe-table 如何格式化单元格内容，全局可复用的格式化方法
weixin_34736467的博客
07-03 1241
vxe-table 如何格式化单元格内容，全局可复用的格式化方法一般情况下通过表格渲染列表后，经常需要对单元格的内容进行格式化，比如格式化数值、字典转换…等，在 vxe-table 支持的格式化有 n 种，不同场景可以选择最优的方式方法1：直接对源数据进行转换，该方式的性能最优，写法相对冗余export default {data () {tableData: [{name: 'Test1', ...
对html中的table里的某一个td进行数据的格式化显示
轻功水上喵丶的博客
07-06 1798
遍历数据时，由于前端使用的是html+jQuery（用vue.js多香），返回的数据有0和1时，需要进行格式化的显示，参考了很多方法，终于实现了，记录一下，希望对大家有帮助 直接上js代码，都在注释里了 formatter() { //获取后端获取的参数 var state = this.rowMain.state; var type = this.rowMain.type; //获取表id为baseTable的行，返回的是一个数组 var
HTML表格制作
热门推荐
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
【jquery.serializeJSON】 表单数据格式化为JSON数据
weixin_44730681的博客
07-19 479
serializeJSON在Github的项目地址 1 html <form id="my-profile"> <!-- 普通属性 --> <input type="text" name="fullName" value="Mario Izquierdo" /> <!-- 级联Object --> <input type="text" name="address[city]" value="Sa
用Java写个表单收集的后端程序
08-10
以下是一个基于 Java 的表单收集后端程序的示例： ```java import java.util.HashMap; import java.util.Map; public class FormHandler { private Map, String> formValues; public FormHandler() { form...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值