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

news2024/11/15 15:53:05

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

成果展示:

完整代码:

<!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.coloradmin.cn/o/1510736.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c++初阶------类和对象(下)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

避抗指南:如何寻找OLED透明屏供应商

寻找OLED透明屏供应商&#xff0c;你可以按照以下步骤进行&#xff1a; 明确需求&#xff1a;首先&#xff0c;你需要明确自己的需求&#xff0c;包括所需OLED透明屏的尺寸、分辨率、亮度、色彩饱和度等具体参数&#xff0c;以及预算和采购量。这有助于你更精准地找到符合需求的…

Django入门 整体流程跑通

Django学习笔记 一、Django整体流程跑通 1.1安装 pip install django //安装 import django //在python环境中导入django django.get_version() //获取版本号&#xff0c;如果能获取到&#xff0c;说明安装成功Django目录结构 Python310-Scripts\django-admi…

滑动窗口的概念,糊涂窗口综合征,nagle算法

目录 1.流量控制 2.滑动窗口 3.思考问题 1.流量控制 一般来说,我们总是希望数据传输得更快一些,但如果发送方把数据发送得过快,接收方就可能来不及接收,这就会造成数据的丢失.所谓流量控制(flow control)就是发送方的发送速率不要太快,要让接收方来得及接收. 2.滑动窗口 T…

【VS Code插件开发】自定义指令实现 git 命令 (九)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域优质作者、阿里云专家博主&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; ✨优质专栏&#xff1a;VS Code插件开发极…

WebServer -- 架构图 面试题(上)

目录 &#x1f382;前言 &#x1f33c;流程图 && 架构图 1&#xff09;什么是 WebServer 2&#xff09;服务器基本框架 3&#xff09;Reactor && Proactor 模式 4&#xff09;同步 I/O 模拟Proactor模式&#xff08;Linux&#xff09; 5&#xff09;主从…

小白刷题CTF show web方向

web01 右键查看源代码&#xff0c;再使用在线解密&#xff0c;就可以得出答案了 web02 sql注入 admin or 11 或者 1 or 11可以登录查询几个字段&#xff1a;1 or 11 order by 3 # 使用此语句&#xff0c;判断列数。 order by 3不会出错&#xff0c;但是order by 4就没有显示…

上传文件携带参数总是deubg不进去

const { data } await createVerificationMaterialApi({file: info.file,name: file,filename: info.file.name,data: { ids },})//这样传参数&#xff0c;网络里看发的请求会是如下样子&#xff0c;这样debug不到代码里正确方法 const { data } await createVerificationMat…

这下爽了,全是特殊版实用软件,功能强大还免费

闲话少说&#xff0c;直接上狠货。 1、我的ABC软件工具箱 简洁而不失强大&#xff0c;我的ABC软件工具箱是您批量处理办公任务的得力小助手。完全免费&#xff0c;界面清新无广告&#xff0c;让您轻松开启高效办公之旅。 面对日常办公中繁多的文件处理需求&#xff0c;如内容…

1.Datax数据同步之Windows下,mysql数据同步至另一个mysql数据库

目录 前言步骤操作大纲步骤明细其他问题 前言 Datax是什么&#xff1f; DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台&#xff0c;实现包括 MySQL、SQL Server、Oracle、PostgreSQL、HDFS、Hive、HBase、OTS、ODPS 等各种异构数据源之间高效的数据同步功能。准备…

IO学习--02

标准IO由ANSI C库说明&#xff0c;在很多系统都实现了标准IO库。标准IO库处理很多细节&#xff0c;如缓冲的分配、优化长度执行IO等&#xff0c;使得用户不需要考虑选择合适的长度。标准IO是在系统调用函数构建的&#xff0c;便于用户使用。 标准IO的所有操作都是围绕流&#x…

c语言经典测试题12

1.题1 float f[10]; // 假设这里有对f进行初始化的代码 for(int i 0; i < 10;) { if(f[i] 0) break; } 上述代码有那些缺陷&#xff08;&#xff09; A: for(int i 0; i < 10;)这一行写错了 B: f是float型数据直接做相等判断有风险 C: f[i]应该是f[i] D: 没有缺…

LLM PreTraining from scratch -- 大模型从头开始预训练指北

最近做了一些大模型训练相关的训练相关的技术储备,在内部平台上完成了多机多卡的llm 预训练的尝试,具体的过程大致如下: 数据准备: 大语言模型的训练依赖于与之匹配的语料数据,在开源社区有一群人在自发的整理高质量的语料数据,可以通过 以下的一些链接获取 liwu/MNBVC…

Java多线程——对象的原子更新

目录 引出对象原子更新AtomicReferenceAtomicLongFieldUpdaterABA问题 创建线程有几种方式&#xff1f;方式1&#xff1a;继承Thread创建线程方式2&#xff1a;通过Runnable方式3&#xff1a;通过Callable创建线程方式4&#xff1a;通过线程池概述ThreadPoolExecutor API代码实…

在VMvare中虚拟机安装centos7和初始设置

下载镜像 阿里云的镜像站&#xff1a;https://mirrors.aliyun.com/centos/7/isos/x86_64/ 创建虚拟机过程 虚拟机创建过程比较简单&#xff0c;以下在VMvare16中进行安装 点击左上角&#xff0c;文件-新建虚拟机&#xff1a; 选择典型 选择刚刚下载好的镜像 输入虚拟机…

#QT(本地音乐播放器)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;之前做的音乐播放器只做了一个界面&#xff0c;是因为跟的课程发现到后面需要付费&#xff0c;并且WINGW6.2.0运行QMediaPlayer时无法运行&#xff0c;会崩溃&#xff0c;现在退一步用WINGW5.12.2做一个本地音乐播放器 3.记录&am…

012集——显示高考天数倒计时——vba实现

以下代码实现高考倒计时&#xff1a; Sub 高考倒计时() 高考日期 CDate("06,07," & Year(Date)) If Date > 高考日期 Then高考日期 CDate("06-07-" & Year(Date) 1) End If 年月日 Year(Date) & "年" & Month(Date) &am…

鲜花销售小程序|基于微信小程序的鲜花销售系统设计与实现(源码+数据库+文档)

鲜花销售小程序目录 目录 基于微信小程序的鲜花销售系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1前台功能模块 2、后台功能模块 1、管理员功能模块 四、数据库设计 1、实体ER图 2、具体的表设计如下所示&#xff1a; 五、核心代码 六、论文参考 七、…

LabVIEW多表位数字温湿度计图像识别系统

LabVIEW多表位数字温湿度计图像识别系统 解决数字温湿度计校准过程中存在的大量需求和长时间校准问题&#xff0c;通过LabVIEW开发平台设计了一套适用于20多个表位的数字温度计图像识别系统。该系统能够通过图像采集、提取和处理&#xff0c;进行字符训练&#xff0c;从而实现…

LiveGBS流媒体平台GB/T28181功能-海康摄像头国标语音对讲大华摄像头国标语音对讲GB28181语音对讲需要的设备及服务准备

LiveGBS海康摄像头国标语音对讲大华摄像头国标语音对讲GB28181语音对讲需要的设备及服务准备 1、背景2、准备2.1、服务端必备条件&#xff08;注意&#xff09;2.2、准备语音对讲设备2.2.1、 大华摄像机2.2.1.1、 配置接入示例2.2.1.2、 配置音频通道编号 2.2.2、 海康摄像机2.…