20240309web前端_第一周作业_完成用户注册界面

作业一:完成用户注册界面

成果展示:

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册页面</title>
</head>
<body>
    <form action="http:www.baidu.com">
    <table style="font-family: 宋体;" align="center">
        <tr bgcolor="gray">
            <th colspan="2">用户注册</th>
            <!-- <td></td> -->
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">用户名</td>
            <td>
                <input type="text" name="username" 
                value="" placeholder="username">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">手机号码</td>
            <td>
                <input type="tel" name="tel">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">密码</td>
            <td>
                <input type="password" name="password"
                value="">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">确认密码</td>
            <td>
                <input type="password" name="password" 
                value="">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">邮箱</td>
            <td>
                <input type="email" name="email">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">邮箱密码</td>
            <td>
                <input type="password" name="email_password">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">性别</td>
            <td>
                <input type="radio" name="gendar" value="男">男
                <input type="radio" name="gendar" value="女">女
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">爱好</td>
            <td>
                <input type="checkbox" name="aihao" value="写作">写作
                <input type="checkbox" name="aihao" value="音乐">音乐
                <input type="checkbox" name="aihao" value="运动">运动<br>
                其他:<input type="text" name="qita">
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td>省份</td>
            <td>
                <select name="省份">
                    <option value="省份0" selected>陕西省</option>
                    <option value="省份0" >河北省</option>
                    <option value="省份0" >吉林省</option>
                    <option value="省份0" >山西省</option>
                    <option value="省份0" >黑龙江省</option>
                    <option value="省份0" >辽宁省</option>
                    <option value="省份0" >江苏省</option>
                    <option value="省份0" >浙江省</option>
                    <option value="省份0" >江西省</option>
                    <option value="省份0" >安徽省</option>
                    <option value="省份0" >山东省</option>
                    <option value="省份0" >福建省</option>
                    <option value="省份0" >河南省</option>
                    <option value="省份0" >湖北省</option>
                    <option value="省份0" >海南省</option>
                    <option value="省份0" >湖南省</option>
                    <option value="省份0" >四川省</option>
                    <option value="省份0" >广东省</option>
                    <option value="省份0" >贵州省</option>
                    <option value="省份0" >云南省</option>
                    <option value="省份0" >青海省</option>
                    <option value="省份0" >台湾省</option>
                    <option value="省份0" >甘肃省</option>
                    <option value="省份0" >北京市</option>
                    <option value="省份0" >天津市</option>
                    <option value="省份0" >上海市</option>
                    <option value="省份0" >重庆市</option>
                    <option value="省份0" >香港特别行政区</option>
                    <option value="省份0" >澳门特别行政区</option>
                    <option value="省份0" >内蒙古自治区</option>
                    <option value="省份0" >广西壮族自治区</option>
                    <option value="省份0" >宁夏回族自治区</option>
                    <option value="省份0" >新疆维吾尔自治区</option>
                    <option value="省份0" >西藏自治区</option>
                </select>
            </td>
        </tr>
        <tr bgcolor="lightgray">
            <td align="right">自我介绍</td>
            <td>
                <textarea name="introduce" cols="30" rows="3"></textarea>
            </td>
        </tr>
        <tr bgcolor="gray">
            <td colspan="2"  align="center">
                <input type="submit" value="提交">
                <input type="reset">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

解析:

实现一个用户注册界面,主体部分使用表格标签,建立一个12行2列的表格,提交部分使用表单标签,action指向登录的网址

    <form action="http:www.baidu.com">

table标签设置表格基础属性,包括字体,对齐方式等

<table style="font-family: 宋体;" align="center">

</table>

第一行“用户注册”与第十二行:使用表格标签的colspan属性进行跨列合并;bgcolor属性设置表格背景颜色

        <tr bgcolor="gray">
            <th colspan="2">用户注册</th>
            <!-- <td></td> -->
        </tr>
        <tr bgcolor="gray">
            <td colspan="2"  align="center">
                <input type="submit" value="提交">
                <input type="reset">
            </td>
        </tr>

中间提示输入部分,bgcolor属性分别设置表格背景颜色,align属性设置文字对齐方式;用户输入部分使用表单input标签输入用户名,手机号码,密码,邮箱,邮箱密码,性别,爱好,省份,自我介绍等类型。

用户名使用input标签的placeholder属性标注文本框提示信息

        <tr bgcolor="lightgray">
            <td align="right">用户名</td>
            <td>
                <input type="text" name="username" 
                value="" placeholder="username">
            </td>
        </tr>

用户性别使用input标签中的radio属性提供单项选择

        <tr bgcolor="lightgray">
            <td align="right">性别</td>
            <td>
                <input type="radio" name="gendar" value="男">男
                <input type="radio" name="gendar" value="女">女
            </td>
        </tr>

用户爱好使用input标签中的checkbox属性提供多项选择

        <tr bgcolor="lightgray">
            <td align="right">爱好</td>
            <td>
                <input type="checkbox" name="aihao" value="写作">写作
                <input type="checkbox" name="aihao" value="音乐">音乐
                <input type="checkbox" name="aihao" value="运动">运动<br>
                其他:<input type="text" name="qita">
            </td>
        </tr>

省份使用select->option属性展示成下拉框格式,selected属性默认选中某一子项进行展出提示

        <tr bgcolor="lightgray">
            <td>省份</td>
            <td>
                <select name="省份">
                    <option value="省份0" selected>陕西省</option>
                    <option value="省份0" >河北省</option>
                    <option value="省份0" >吉林省</option>
                    <option value="省份0" >山西省</option>
                    <option value="省份0" >黑龙江省</option>
                    <option value="省份0" >辽宁省</option>
                    <option value="省份0" >江苏省</option>
                    <option value="省份0" >浙江省</option>
                    <option value="省份0" >江西省</option>
                    <option value="省份0" >安徽省</option>
                    <option value="省份0" >山东省</option>
                    <option value="省份0" >福建省</option>
                    <option value="省份0" >河南省</option>
                    <option value="省份0" >湖北省</option>
                    <option value="省份0" >海南省</option>
                    <option value="省份0" >湖南省</option>
                    <option value="省份0" >四川省</option>
                    <option value="省份0" >广东省</option>
                    <option value="省份0" >贵州省</option>
                    <option value="省份0" >云南省</option>
                    <option value="省份0" >青海省</option>
                    <option value="省份0" >台湾省</option>
                    <option value="省份0" >甘肃省</option>
                    <option value="省份0" >北京市</option>
                    <option value="省份0" >天津市</option>
                    <option value="省份0" >上海市</option>
                    <option value="省份0" >重庆市</option>
                    <option value="省份0" >香港特别行政区</option>
                    <option value="省份0" >澳门特别行政区</option>
                    <option value="省份0" >内蒙古自治区</option>
                    <option value="省份0" >广西壮族自治区</option>
                    <option value="省份0" >宁夏回族自治区</option>
                    <option value="省份0" >新疆维吾尔自治区</option>
                    <option value="省份0" >西藏自治区</option>
                </select>
            </td>
        </tr>

在自我介绍部分使用textarea提供文本域,并调节长宽大小

        <tr bgcolor="lightgray">
            <td align="right">自我介绍</td>
            <td>
                <textarea name="introduce" cols="30" rows="3"></textarea>
            </td>
        </tr>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/451570.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis拦截器四种类型和自定义拦截器的使用流程

文章目录 MyBatis拦截器四种类型和自定义拦截器的使用流程一、MyBatis拦截器四种类型的详细解释&#xff1a;1. **ParameterHandler 拦截器**&#xff1a;2. **ResultSetHandler 拦截器**&#xff1a;3. **StatementHandler 拦截器**&#xff1a;4. **Interceptor Chain 拦截器…

软考高级:统计过程阶段和工作流概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的常见车型识别系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本文深入探讨了如何应用深度学习技术开发一个先进的常见车型识别系统。该系统核心采用最新的YOLOv8算法&#xff0c;并与早期的YOLOv7、YOLOv6、YOLOv5等版本进行性能比较&#xff0c;主要评估指标包括mAP和F1 Score等。详细解析了YOLOv8的工作机制&#xff0c…

逆向案例七——中国天气质量参数搜不到加密,以及应对禁止打开开发者工具和反debuger技巧

进入相关城市数据页面&#xff0c;发现不能调试 应对方法&#xff0c;再另一个页面&#xff0c;打开开发者工具&#xff0c;选择取消停靠到单独页面 接着&#xff0c;复制链接在该页面打开。接着会遇到debugger 再debugger处打上断点&#xff0c;一律不在此处暂停。 然后点击继…

InnoDB索引优化

索引 覆盖索引 最左前缀原则 索引下推优化 如果我执行 select * from T where k between 3 and 5 这条语句&#xff08;k 是索引&#xff09;&#xff0c;需要执行几次树的搜索操作&#xff0c;会扫描多少行&#xff1f; 这条 SQL 查询语句的执行流程…

Promise其实也不难

难点图解&#xff1a;then&#xff08;&#xff09;方法 ES6学习网站&#xff1a;ES6 入门教程 解决&#xff1a;回调地狱&#xff08;回调函数中嵌套回调&#xff09; 两个特点&#xff1a; &#xff08;1&#xff09;对象的状态不受外界影响。Promise对象代表一个异步操作&…

前端精准测试简介

一&#xff0c; 前端精准测试架构介绍 今年从零开始完成了前端精准测试整体功能的开发&#xff0c;在基于istanbul插件的基础之间&#xff0c;实现覆盖率数据的采集&#xff0c;并根据服务端和移动端精准测试的整体架构&#xff0c;实现前端精准测试体系。整体架构及核心功能…

【李沐论文精读】GPT、GPT-2和GPT-3论文精读

论文&#xff1a; GPT&#xff1a;Improving Language Understanding by Generative Pre-Training GTP-2&#xff1a;Language Models are Unsupervised Multitask Learners GPT-3&#xff1a;Language Models are Few-Shot Learners 参考&#xff1a;GPT、GPT-2、GPT-3论文精读…

七个项目掌握freertos

1、闪烁LED&#xff1a; 最基本的示例项目&#xff0c;涉及到创建一个简单的任务&#xff0c;用于控制LED的闪烁。这个项目会教你如何初始化FreeRTOS并创建任务。 #include "FreeRTOS.h" #include "task.h" #define LED_PIN (某个GPIO引脚)void vBlinkTas…

555经典电路

1、555介绍&#xff1a; 555 定时器是一种模拟和数字功能相结合的中规模集成器件。一般用双极性工艺制作的称为 555&#xff0c;用 CMOS 工艺制作的称为 7555&#xff0c;除单定时器外&#xff0c;还有对应的双定时器 556/7556。555 定时器的电源电压范围宽&#xff0c;可在 4…

20240312-2-贪心算法

贪心算法 是每次只考虑当前最优&#xff0c;目标证明每次是考虑当前最优能够达到局部最优&#xff0c;这就是贪心的思想&#xff0c;一般情况下贪心和排序一起出现&#xff0c;都是先根据条件进行排序&#xff0c;之后基于贪心策略得到最优结果。 面试的时候面试官一般不会出贪…

I2C驱动AT24C02

文章目录 一、硬件电路设备地址 二、使用步骤字节写:页写入:任意写:任意读: 一、硬件电路 设备地址 设备需要一个8位的设备地址字&#xff0c;后面跟着一个启动条件&#xff0c;以使芯片能够进行读或写操作 设备地址字由一个强制的1,0序列的前四个最有效的位&#xff0c;如所示…

嵌入式面试收到了两个offer,一个单片机开发,一个Linux开发,不知道如何选择?

今天看到一个问题&#xff1a; 如果你想真正解决选择困难症的问题&#xff0c;请花几分钟&#xff0c;看完这篇内容。 我做了单片机开发多年&#xff0c;还是有感而发的。 我职业生涯里&#xff0c;做过最错误的决定&#xff0c;就是哪个公司工资开的高&#xff0c;就去哪里。 …

数据结构·复杂度

目录 1 时间复杂度 2 大O渐进表示法 举例子&#xff08;计算时间复杂度为多少&#xff09; 3 空间复杂度 前言&#xff1a;复杂度分为时间复杂度和空间复杂度&#xff0c;两者是不同维度的&#xff0c;所以比较不会放在一起比较&#xff0c;但是时间复杂度和空间复杂度是用…

LeetCode 每日一题 Day 95-101

2917. 找出数组中的 K-or 值 给你一个整数数组 nums 和一个整数 k 。让我们通过扩展标准的按位或来介绍 K-or 操作。在 K-or 操作中&#xff0c;如果在 nums 中&#xff0c;至少存在 k 个元素的第 i 位值为 1 &#xff0c;那么 K-or 中的第 i 位的值是 1 。 返回 nums 的 K-o…

中医药专家学者齐聚丽江 把脉健康产业新发展

3月10日&#xff0c;中国丽江第二届健康产业发展论坛暨全国卫生健康技术推广传承应用项目技能大赛在丽江&#xff08;国际&#xff09;民族文化交流中心隆重开幕。国内生物科学、中医学领域的多名专家学者齐聚丽江&#xff0c;探讨健康产业的未来发展趋势&#xff0c;为丽江乃至…

C/C++语言学习基础版(一)

目录 一and二、C语言说明 注释&#xff1a; 1、声明语句 2、输出函数 3、return 语句 三、C语言的数据结构 1、常量与变量 2、基本数据结构 3、关键字 练习&#xff1a;进制转换 四、基本输入输出 1、字符输出函数putchar 2、字符输入函数getchar 3、格式化输出函…

在家不无聊,赚钱有门道:5个正规线上赚钱平台,轻松开启副业

随着网络技术的快速发展&#xff0c;越来越多的人开始寻求通过网络来探索兼职副业的可能性&#xff0c;期望实现额外的收入。在这个过程中&#xff0c;选择一个正规且可靠的线上兼职平台显得尤为关键。 为此小编精心网上盘点了5个正规且靠谱的线上兼职副业平台。这些平台不仅安…

C语言深入理解指针(1)

前言 小陈也是学完了指针&#xff0c;还是有很多不多的地方&#xff0c;接下来会输出5篇博客去帮助自己彻底弄懂指针&#xff0c;以前的知识也需要复盘了呀。 内存和地址 1.1 内存 举个例子&#xff0c;去理解这两个的词&#xff0c;一个外卖员去送外卖&#xff0c;他首先需…

Halcon 使用光流算子检测运动物体

文章目录 算子optical_flow_mg 计算两个图像之间的光流vector_field_length 计算向量场的向量长度select_shape_std 选择给定形状的区域vector_field_to_real 将矢量场图像转换为两个实值图像intensity 计算灰度值的均值和偏差local_max_sub_pix 以亚像素精度检测局部极大值 Ha…
最新文章