form和table制作注册表单

最新推荐文章于 2021-09-07 12:19:57 发布
最新推荐文章于 2021-09-07 12:19:57 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： Java 文章标签： table input html border action 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daijunjian/article/details/7346470
版权

//form和table制作的提交服务器表单

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
 </head>
 <body>
 <fieldset>
   <legend>注 册</legend >
 
   <form action="http://192.168.1.100:9999" method="post">
 <table border="1" width="50%" height="300" align="center" cellspacing="0">
    <tr>
      <td>用户名:</td>
      <td><input type="text" name="username"></td>
    </tr>
   
    <tr>
      <td>密 码:</td>
      <td><input type="password" name="password"></td>
    </tr>
   
    <tr>
      <td>性 别:</td>
     <td>
       <input type="radio" name="gender" value="male" checked="checked">男
       <input type="radio" name="gender" value="female">女
       </td>
    </tr>
    <tr>
      <td>兴 趣:</td>
      <td>
       <input type="checkbox" name="interest" value="basketball" checked="checked">篮球
       <input type="checkbox" name="interest" value="game">游戏
       <input type="checkbox" name="interest" value="net">上网
      </td>
    </tr>
   
    <tr>
      <td>城 市:</td>
       <td>
        <select name="city">
          <option value="">-请选着城市-</option>
          <option value="bj">北京</option>
          <option value="hn">河南</option>
          <option value="zmd">驻马店</option>
        </select>
       </td>
    </tr>
    <tr>
      <td>自我介绍</td>
      <td>
        <textarea rows="5" cols="60"></textarea>
      </td>
    </tr>
    <tr>
      <td>头 像:</td>
      <td>
        <input type="file" name="photo">
      </td>
    </tr>
   
    <tr align="center">
      <td colspan="2">
        <input type="submit" value="注册">
        <input type="reset" value="重填">
      </td>
    </tr>
 </table>
 </form>
 
 </fieldset>
 </body>
</html>

站在巨人的肩膀上奋斗
关注
专栏目录
form表单域的动态设计的代码实现-customized tab information 模块代码开发总结（2）
HYM BLOG
11-01 1366
I discussed the dynamic form fields design in the fromer charter. Now i will discuss the java code which related the dynamic form fileds  form interface as follows: hris_dynamictable_HTC.java ge
HTML form表单与table表格的总结
weixin_74424297的博客
03-30 446
form表单可以实现基础的页面按钮，提交，选择设置，table表格给予其格式，使网页看起来跟美观。在网页中用户与网页之间进行交互操作是必不可少的，需要使用到表格表单来让用户和服务器 之间进行交互。因此，表格表单是非常重要的元素。提示：这里对文章进行总结：以上就是对form表单和table表格的部分总结，本文仅仅简单介绍了form表单和table表格的使用。
使用form表单和table表格创造注册页面
qq_45624685的博客
06-23 2970
使用form表单和table表格创造注册页面 如图样式 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册页面</title> </head> <body> <form action="#" method="get"> <table border="2" align="center" c
table标签，制作表格注册表
weixin_57037336的博客
09-07 378
table标签，制作表格注册表 今天复习了一下html，发现在表格，表单这一方面还是不够熟练，所以写了这篇文章，以便复查。 首先，来看看要做成的注册表： 性格测试表，一键生成你的性格表 这里我用标题标签就做出来了，下面的内容可以用表格来做，接着我遇到的问题是单选框怎么做，查阅了资料，写出下面的代码解决 解决表格单选问题 <tr> <td>姓别</td> <td><input type="radio"
表单格式化
weixin_33675507的博客
10-30 243
表单格式化，其实我也不想起这个名字的，在前面学习的HTML中有文本格式化，这次的表单和表格的结合不妨叫做表单格式化。 这篇博客用到的HTML主要标签有：<table>标签和<form>标签以及两个标签中所包含的各个小标签。这些标签的使用和效果在前面已经展示过了，就不再啰嗦了。 顾名思义，表单格式化就是将表单的内容以表格呈现。在写...
超简单table表格和form表单的嵌套
烟火火的博客
03-11 2679
form表单练习 注册页面 用户名： 密码： 性别： 男 女 爱好： K歌 跳舞 蹦极 上传文件： ...
vue实现form表单与table表格的数据关联功能示例
10-17
在Vue.js中，实现表单（form）与表格（table）的数据关联是一项常见的需求，它涉及到数据双向绑定、事件监听以及动态操作数组等核心概念。本示例将详细讲解如何在Vue环境中完成这一功能。 首先，HTML部分创建了一个...
解决layui前端框架 form表单,table表等内置控件不显示的问题
12-10
在使用layui前端框架时，可能会遇到form表单和table等内置控件无法正常显示的问题。本文将详细解析这个问题的原因及解决方法，以帮助开发者更好地理解和使用layui。 layui是一款基于JavaScript的轻量级前端组件库，...
vue+element创建动态的form表单及动态生成表格的行和列
10-16
此外，文章还提到了插件form-create，这是一个基于Vue.js创建表单的解决方案，它可以自动生成表单界面和表单验证规则。不过作者表示，自己并未能成功使用该插件，如果有读者成功使用了，欢迎在下方留言分享经验。这...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
Element-UI提供了一套丰富的UI组件库，其中包括表格（Table）和表单（Form），它们可以帮助我们构建出美观且功能强大的界面。然而，在实际应用中，尤其是在表格中嵌入表单元素并进行数据验证时，会遇到一些挑战。...
html+table实现注册页面
11-25
初学者实用例子，欢迎大家下载
html5使用table制作表单
大哥的阔落
11-23 1516
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> </head> <!-- 1 rowspan:跨行合并单元格（竖）
html之实战二--用table和form完成注册界面
工一木子
10-11 1092
第二次实战--用table和form做出一个漂亮的注册页面                            本程序缺点：用了很多重复的form标签     -->                                                            信息注册界面                                     
使用简单的Table标签制作注册页面
FZUMRWANG的博客
04-24 1245
代码及其解释 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- The form tag action:the address of s...
用table表格标签写注册页面
ginger_mr的博客
03-02 1129
使用table标签写注册页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 创建十行两列表格--> <table width=...
简单制作用户注册表单
热门推荐
挑灯夜行
06-05 1万+
表单概述：        表单主要用于收集网页浏览者的相关信息，其标签为，表单的基本格式语法如下：                        其中，action="url"指定处理提交表单的格式，它可以是一个URL地址或一个电子邮件地址。method="get|post"指明提交表单的HTTP方法。enctype="mime"指明用来把表单提交给服务器的互联网媒体形式。      
table表格加form表单实例及注册页面的搭建
Grady_Ne的博客
10-20 1267
知识点：          一、demo 注册页(table+form)
HTML--表格与表单（练习做注册页面）
weixin_30399055的博客
12-23 434
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
antdesignvue table+form表单校验
最新发布
11-23
根据提供的引用内容，ant-design-vue可以通过内置的Form组件和Table组件实现表格内部字段验证功能。具体步骤如下： 1. 在表格中添加需要验证的字段，例如下面的代码中的name和age字段： ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> </a-form> <a-table :columns="columns" :dataSource="dataSource" :pagination="false" /> ``` 2. 在表格中添加操作列，例如下面的代码中的操作列包含了编辑和删除按钮： ```html <a-table :columns="columns" :dataSource="dataSource" :pagination="false"> <template #action="text, record"> <a-button @click="edit(record)">Edit</a-button> <a-button @click="delete(record)">Delete</a-button> </template> </a-table> ``` 3. 在编辑操作中打开表单，并将当前行的数据绑定到表单中： ```javascript edit(record) { this.form.setFieldsValue(record); this.editingKey = record.key; } ``` 4. 在表单中添加保存按钮，并在点击保存按钮时进行表单验证和数据更新： ```html <a-form :form="form"> <a-form-item label="Name" :rules="[{ required: true, message: 'Please input name' }]"> <a-input v-decorator="['name']" /> </a-form-item> <a-form-item label="Age" :rules="[{ required: true, message: 'Please input age' }]"> <a-input-number v-decorator="['age']" /> </a-form-item> <a-form-item> <a-button type="primary" @click="save">Save</a-button> </a-form-item> </a-form> ``` ```javascript save() { this.form.validateFields((err, values) => { if (!err) { const newData = [...this.dataSource]; const index = newData.findIndex((item) => this.editingKey === item.key); if (index > -1) { const item = newData[index]; newData.splice(index, 1, { ...item, ...values }); this.dataSource = newData; this.editingKey = ''; } else { newData.push(values); this.dataSource = newData; this.editingKey = ''; } } }); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值