HTML实例--制作表单

运用表格和表单基础知识简单制作一个表单

表单制作使用表格来对表单进行排版美化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户注册表单</title>
</head>
<body><table align="center"><form action="#" method="POST"><thead><tr><th colspan="3"><h3>用户注册表单</h3></th></tr></thead><tbody><tr><td colspan="3"><hr color="grey" width="700" size="1"></td></tr><tr><td colspan="3"><font color='purple'>基本信息填写</font></td></tr><tr><td align="right">用户名：</td><td><input type="text" maxlength="6" placeholder="请输入用户名" required></td><td><font color='red'>用户名长度最多不超过6个字符</font></td></tr><tr><td align="right">密码：</td><td><input type="password" maxlength="10" required></td><td><font color='red'>密码长度最多不超过10个字符</font></td></tr><tr><td align="right">确认密码：</td><td><input type="password" maxlength="10" required></td><td><font color='red'>重复密码</font></td></tr><tr><td align="right">性别：</td><td><input type="radio" name="sex" id="s1"><label for="s1">男</label>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" id="s2"><label for="s2">女</label></td></tr><tr><td align="right">出生日期：</td><td><input type="date"></td></tr><tr><td align="right">爱好：</td><td><input type="checkbox" id="a1"><label for="a1">阅读</label><input type="checkbox" id="2"><label for="a2">锻炼</label><input type="checkbox" id="a3"><label for="a3">听歌</label><input type="checkbox" id="a4"><label for="a4">写作</label></td><td><font color='red'>至少选择三项</font></td></tr><tr><td align="right">个人介绍：</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td colspan="3"><hr color="grey" width="700" size="1"></td></tr><tr><td colspan="3"><font color='purple'>绑定邮箱</font></td></tr><tr><td align="right">邮箱类型：</td><td><select><option value="">--邮箱类型--</option><option value="">QQ邮箱</option><option value="">网易邮箱</option><option value="">outlook邮箱</option></select></td></tr><tr><td align="right">邮箱账号：</td><td><input type="text" required></td></tr><tr><td align="right">邮箱密码：</td><td><input type="password" required></td></tr><tr><td colspan="3"><hr color="grey" width="700" size="1"></td></tr><tr><td colspan="3"><font color='purple'>密码保护信息</font></td></tr><tr><td align="right">密码保护问题：</td><td><select><option value="">--密码保护问题--</option><option value="">真实姓名是什么</option><option value="">最喜欢的颜色</option><option value="">最喜欢的食物</option></select></td></tr><tr><td align="right">答案：</td><td><input type="text" required></td></tr><tr><td align="right">备用邮箱：</td><td><input type="text" required></td><td><font color='red'>备用邮箱与绑定邮箱不得相同</font></td></tr><tr><td align="center" colspan="3"><input type="reset">&nbsp;&nbsp;&nbsp;<input type="submit"></td></tr></tbody></form></table>
</body>
</html>

渲染效果

HTML实例--制作表单相关推荐

用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
前端：JS/33/实例：表单验证
实例:表单验证 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
什么平台制作表单工具效率高？
目前,低代码开发平台在很多行业中得到了应用和推广.如果需要制作表单工具,还依然用传统的表单工具来制作表单,效率不仅得不到提升,而且办公自动化发展步伐也将缓慢发展.那么,借助什么样的平台可以让制作表单工 ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
Axure9制作表单
第一步,首先拖动一个中继器在面板: 第二步,双击中继器,拖动一个文本和一个输入框: 第三步,还原页面,在右侧样式中,添加几行: 第四步,在样式中,设置间距和布局: 第五步,选择交互页面,选中文本标签 ...
iReport关于page header制作表单明细模板，textfield与staticText不相容的问题解决
这个星期上司给了我一个关于使用iReport制作车辆使用明细报表的任务.在毫无使用过这个组件的前提下,我凭着自己贫乏的知识与经验,在网上相关解决方案资料严重缺失的情况下,通过艰苦卓绝的思考与锲而不舍的 ...
如何扫码填写数据？在线制作表单二维码的方法
二维码填写表单是现在很常见的一种方式,这种方法对比以前纸质的信息收集,更加的简单快捷,能够有效的提高效率.通过二维码生成器(免费在线二维码生成器-二维码在线制作-音视频二维码在线生成工具-机智熊二维码 ...
HTML简单实例加表单的显示效果
HTML可以说是一种十分简单的标记语言,但是对于Web开发还是必不可少的,所以对HTML的标记进行适当的了解还是十分有必要的.下面我们来演示一下基本的HTML效果和一些简单的标签,以及在表单界面的各 ...
table中加表单元素怎么验证_045、DOM编程实例和表单
1.DOM编程实例1 JavaScript this 关键词指的是它所属的对象. 它拥有不同的值,具体取决于它的使用位置: 在方法中,this 指的是所有者对象. 单独的情况下,this 指的是全局对 ...
jQuery基本选择器（实例及表单域 value 的获取）
jQuery基本选择器包括 CSS选择器.层级选择器和.表单域选择器. 1.CSS选择器 (1)标签选择器 $("div") $("p") $(" ...

HTML实例--制作表单

HTML实例--制作表单相关推荐

最新文章

热门文章