【HTML第二个综合案例】----相亲App注册页面

HTML第二个综合案例

第一部分标题：
第二部分表格：

相亲App注册页面:一个用于收集用户的表单(也能起到表格展示数据的作用）

最终效果图----------

观察可知，该表单包含两部分

上部：标题大字，由h标签定义
下部：表格，由table标签定义

第一部分标题：

<h4>青春不常在，抓紧谈恋爱</h4>

第二部分表格：

整个由teble双标签定义

<table width="1000" ><!--表格中的第一行 性别--><tr><!--第一行中的两个单元格--><td>性别：</td><!--右边单元格，单选按钮type属性值是radio--><td><input type="radio" name="sex" id="nan"><label for="nan"><img src="data:images/微信图片_20230311091457.png"  width="50"> 男</label><input type="radio" name="sex" id="nv"><label for="nv"><img src="data:images/微信图片_20230311091457.png" width="50">女</label></td></tr><!--表格中的第二行 生日选择--><tr><!--左侧单元格--><td>生日</td><!--右侧单元格--><td><select><option>--请选择年份--</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option></select><select><option>--请选择年份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option></select></td></tr><!--第三行 所在地区--><tr><td>所在地区</td><td><input type="text" value="河南思密达"></td></tr><!--这里是第四行婚姻状况选择--><tr><td>婚姻状况：</td><td><input type="radio" name="zhuangtai" id="weihun" checked="checked"><label for="weihun">未婚</label><input type="radio" name="zhuangtai" id="yihun"><label for="yihun">已婚</label><input type="radio" name="zhuangtai" id="lihun"><label for="lihun">离婚</label></td></tr><!--这里是第五行  学历输入--><tr><td>学历：</td><td><input type="text" value="博士后"></td></tr><!--这里是第六行 喜欢的人的类型--><tr><td>喜欢的类型</td><!--右侧复选单元格--><td><input type="checkbox" name="love">温柔的<input type="checkbox" name="love">淑女的<input type="checkbox" name="love">有上进心的<input type="checkbox" name="love">喜欢运动的<input type="checkbox" name="love">我喜欢的<input type="checkbox" name="love" checked="checked">女的</td></tr><!--这里是第七行 自我介绍--><tr><td>自我介绍：</td><td><textarea>个人简介的内容。</tex我介绍tarea></td></tr><!--这里是第八行，免费注册按钮，其中一个单元格为空？？？？？？--><tr><td></td><td><input type="submit" value="免费注册"></td></tr><!--这里是第九行，同意注册条款按钮--><tr><td></td><td><input type="checkbox" checked="checked">我同意</td></tr><!--这里是第10行 ，会员立即登录按钮--><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><!--这里是第11行，个人承诺--><tr><td></td><td><h5>我承诺</h5><ul><li>年满18周岁,单身</li><li>抱着真诚的态度</li><li>想要找到另一半</li></ul></td></tr></table>

【HTML第二个综合案例】----相亲App注册页面相关推荐

快速集成APP注册页面免费获取短信验证码功能
前言: 最近这段时间都忙着优化自己的个人项目,好久没来总结分享了,今天就抽空跟大家分享一下快速集成APP注册页面免费获取短信验证码功能吧. 一.使用第三方短信SDK前期准备: 在这里我是使用了第三方免 ...
app注册页面php开发,教你用app()函数注册程序（微信程序开发）
这篇文章主要介绍了微信小程序教程之注册程序的相关资料,需要的朋友可以参考下系列文章: 微信小程序教程之模块化微信小程序教程之注册页面微信小程序教程之注册程序 App() App()函数用 ...
表单设计案例---学生入校注册页面设计
注意表单中常用的各个元素的特点! ch02_6.html <!DOCTYPE html> <html><head><meta charset="UT ...
HarmonyOS开发17：案例——相亲APP
实现功能:在app界面点击 "下一个" 按钮,可以更换小姐姐的信息实现步骤: 1.首先将所需要的使用到的图片放入media文件夹 2.修改ability_main.xml文件: ...
12. 综合练习 - 相亲APP
效果: 点击下图的"下一个"按钮实现人物信息切换注意的步骤: 创建一个对象集合代码: ability_main.xml <?xml version="1.0&q ...
20 - Slider组件案例相亲APP
题目界面为下图,要求拖动滑块组件时可以放大缩小图片,当图片放大或缩小时,可以滑动图片位置. 代码 ability_main.xml <Imageohos:id="$+id:img&q ...
html5 案例练习（注册页面）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【前端】html综合案例：圣诞节的那些事、小说排行榜案例、注册页面
文章目录综合案例1:圣诞节的那些事目标代码综合案例2:小说排行榜案例目标代码综合案例3:注册页面目标代码综合案例1:圣诞节的那些事视频p30-31 目标代码 <!DOCT ...
二级VB培训笔记06：窗体与常用控件综合案例【个人信息注册】
二级VB培训笔记06:窗体与常用控件综合案例[个人信息注册] 一.常用控件属性与方法思维导图二.综合案例--个人信息注册 1.创建工程,修改名称为"个人信息注册",窗体名称设置为 ...

【HTML第二个综合案例】----相亲App注册页面

HTML第二个综合案例

第一部分标题：

第二部分表格：

【HTML第二个综合案例】----相亲App注册页面相关推荐

最新文章

热门文章