前端HTML基础-制作一个相亲表单

初学前端的一个小练习

涉及知识：HTML，CSS

编译环境：Hbuilder

实现效果：

实现代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>相亲表单</title><style>body{background-image: url(../img/相亲背景.jpg);background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;/*margin: 2px 3px 2px 3px;*/}table{margin-left: 600px;margin-top: 50px;}form{text-align: center;}</style></head><body><h1 style="color: red; text-align: center;">青春不常在，抓紧谈恋爱</h1><table><tr><td>请输入您的名字：</td><td><input type="text" placeholder="请在此输入"></td></tr><tr><td>性别:</td><td><input type="radio" id="nan" name="1" />男<input type="radio" id="nu" name="1"/>女</td></tr><tr><td>生日：</td><td><select><option>--请选择年--</option><option>2019</option><option>2020</option><option>2021</option></select><select><option checked="checked">--请选择月--</option><option>1</option><option>2</option><option>3</option></select><select><option checked="checked">--请选择日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><tr><td>所在地区：</td><td><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td>婚姻状况：</td><td><input type="radio" name="2" />未婚<input type="radio" name="2" />离异<input type="radio" name="2" />丧偶</td></tr><tr><td>学历：</td><td><select><option>--请选择学历--</option><option>专科</option><option>本科</option><option>硕士</option><option>博士</option></select></td></tr><tr><td>喜欢的类型</td><td><input type="checkbox" name="xingge">妩媚的<input type="checkbox" name="xingge">可爱的<input type="checkbox" name="xingge">小鲜肉<input type="checkbox" name="xingge">老腊肉<input type="checkbox" name="xingge">都喜欢</td></tr><tr height="60"><td>给我留言</td><td><textarea name="" id="" cols="50" rows="10" style="color: #ccc;"></textarea></td></tr><tr><td></td><td><input type="button" value="注册"><input type="submit" value="提交"><input type="reset" value="重置"></td></tr>   </table></body>
</html>

前端HTML基础小练习-制作一个相亲表单相关推荐

制作一个注册表单页面
制作一个表单注册页面在Dreamweaver中创建一个.html文件,添加一个11行2列的表格,左侧的内容是手动输入(第一行也手动输入),右侧的内容是用代码来写的(最后一行也是用代码来写)(用代码写 ...
学习笔记(01):【孙伟老师UID课堂】设计师也能会的-WEB前端入门基础HTML+CSS视频教程-09综合表单标签讲解-1...
立即学习:https://edu.csdn.net/course/play/6853/136357?utm_source=blogtoedu 8-9接不上啊少了几节课吧?
基于小程序制作一个猜拳小游戏
在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小程序游戏吧. 创建小程序功能实现界面优化代码块创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填 ...
使用小程序制作一个飞机大战小游戏
此文主要基于微信小程序制作一个飞机大战小游戏,上手即用,操作简单. 一.创建小程序二.页面实现三.代码块一.创建小程序访问微信公众平台,点击账号注册. 选择小程序,并在表单填写所需的各项信息进 ...
微信小程序｜使用小程序制作一个时间管理小工具
适时而学,适时而息,张弛有度的生活态度才能让我们走得更远.此文使用小程序制作一个日程管理小工具,将时间进行分解以实现有效管理. 开发步骤一.创建小程序二.功能实现 2.1.首页 2.2.记录页 3 ...
微信小程序｜使用小程序制作一个核酸检测点查询工具
小程序创建小程序申请腾讯地图用户key 实现小程序界面全国省市区数据 API 提交资料认证并申请接口拼接参数调用接口渲染数据优化细节出门在外,没有核酸证明寸步难行,此文将教你如何通过小程序 ...
微信小程序｜使用小程序制作一个足球拼图小游戏
世界杯的意义永远不止是冠军,它是每个精彩的瞬间,是呐喊,是青春.此文用小程序制作一个足球的拼图小游戏,一起为世界杯疯狂吧! 开发步骤一.工具安装二.功能实现 1 . 提示图展示 2 . 绘制画布内 ...
微信小程序｜使用小程序制作一个节日祝福生成器
一.前言不知不觉间还有几天就是新的一年了,值此佳节祝福语肯定也是必不可少,毕竟难得有机会能给ta发消息,ta会不会也在想终于又能给你回消息呢.跟随此文使用小程序制作一个祝福语生成器,让你的祝福脱颖而 ...
微信小程序｜使用小程序制作一个马赛克处理工具
此文主要使用微信小程序制作一个马赛克处理工具,这个场景在生活中也非常常见,例如新闻之类有些视频或者图片不想给大众展示就会将其和谐掉,这就是马赛克应用. 开发步骤功能开发实现API 接口响应开发步 ...

前端HTML基础小练习-制作一个相亲表单

前端HTML基础-制作一个相亲表单

初学前端的一个小练习

涉及知识：HTML，CSS

前端HTML基础小练习-制作一个相亲表单相关推荐

最新文章

热门文章