成品总效果如下:


需要其他修饰网页可以加入自己的创意

讲解:

不知道基础语法的宝可以看看我先前发的一些内容
注意点:
1,密码需要用type="password"属性,使密码不会被显示。如下:

密  码<input type="password" name="password"><br><br>

2,光标最开始默认定位在用户名框(autofocus定位)。如下:

用户名<input type="text" name="username" autofocus><br><br>

3,性别选择是单选,type="radio"属性用于单选,name="gender"属性用于区分同一个类别,value可以不要。如下:

请选择你的性别:<input type="radio" value="nan" name="gender">男
<input type="radio" value="nv" name="gender">女<br><br>

4,爱好设置属于多选,type="checkbox"属性用于多选,name="hobby"属性用于区分同一个类别,可以和上面的name="gender"属性区别开来如下:

请选择你的爱好:<input type="checkbox" value="duo" name="hobby">足球<input type="checkbox" value="duo" name="hobby">篮球<input type="checkbox" value="duo" name="hobby">LOL<input type="checkbox" value="duo" name="hobby">韩剧<input type="checkbox" value="duo" name="hobby">王者荣耀

5,邮箱设置,type="email"属性专门用于设置邮箱类型,placeholder="请输入你的邮箱"属性用于文本框里的提示,required属性是设置不能为空,当邮箱这一项不填时不能提交,如下:

邮箱:<input type="email" placeholder="请输入你的邮箱" required><br><br>

6,用户头像,type="file"属性就可以了,如下:

用户头像:<input type="file"><br><br>

7,家庭住址栏选项,需要在select标签里面嵌套一个option标签,option标签里面写需要填的地址选项,如下:

家庭住址:<select><option>西安</option><option>永川</option><option>万州</option></select><br><br>

8,收获地址栏选项,同样的需要在select标签里面嵌套一个option标签,option标签里面写需要填的地址选项。multiple="multiple"属性是不将选项折叠起来,上一个没有写这个属性就折叠了。selected="selected"属性是默认选择属性,disabled属性是不能更改的选项,可以用于在这里作为提示。

你的收获地址是:<select multiple="multiple" ><option disabled>你的收获地址是:</option><option selected="selected">西安</option><option>永川</option><option>万州</option></select><br><br>

9,大文本框,textarea标签用于写大文本的标签,如建议反馈等。如下:

<textarea cols="20" rows="10">建议或者意见
</textarea><br>

10,颜色选择项,type="color"属性就可以了,专门可以选择颜色。

你喜欢的颜色:<input type="color">

11,注册时间,type="datetime-local"属性用于选择日期的属性

注册时间:<input type="datetime-local"><br>

12,重置和注册按钮,type="submit"属性专门用于提交,type=“reset"属性专门用于重置的按钮。value=”"属性用于提示。

<input type="submit" value="注册">
<input type="reset" value="重置">

然后就OK了,个别属性没有介绍到可以看看以前发的内容。

源代码:

喜欢点一个赞吧,3Q~

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><form align="center" action="123.html" method="post">用户名<input type="text" name="username" autofocus><br><br>密  码<input type="password" name="password"><br><br>请选择你的性别:<input type="radio" value="nan" name="gender">男<input type="radio" value="nv" name="gender">女<br><br>请选择你的爱好:<input type="checkbox" value="duo" name="hobby">足球<input type="checkbox" value="duo" name="hobby">篮球<input type="checkbox" value="duo" name="hobby">LOL<input type="checkbox" value="duo" name="hobby">韩剧<input type="checkbox" value="duo" name="hobby">王者荣耀邮箱:<input type="email" placeholder="请输入你的邮箱" required><br><br>用户头像:<input type="file"><br><br>家庭住址:<select><option>西安</option><option>永川</option><option>万州</option></select><br><br>你的收获地址是:<select multiple="multiple" ><option disabled>你的收获地址是:</option><option selected="selected">西安</option><option>永川</option><option>万州</option></select><br><br><textarea cols="20" rows="10">建议或者意见</textarea><br>你喜欢的颜色:<input type="color">注册时间:<input type="datetime-local"><br><input type="submit" value="注册"><input type="reset" value="重置"></form>
</body>
</html>

前端:完整简单详细的注册页面讲解相关推荐

  1. 小白教程——Windows下用PHP写一个简单的登录注册页面(二)

    哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...

  2. 前端开发学习--登录和注册页面设计(html和css,可完成两个页面点击切换)

    今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...

  3. 简单的css注册页面

    注册界面 <style>.form{width: 70%;position: absolute;top: 10%;left: 25%;}.tree{position: relative;t ...

  4. H5创建一个简单的qq注册页面

    该图就是最终要完成的效果,简单分析一下改图的整体结构,以及需要用到的标签及属性.这里我是直接创建一个表单,然后在表单中创建一个十行一列的表格.以下为最终效果的代码 <!DOCTYPE html& ...

  5. python做一个登录注册界面_Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  6. JavaWeb项目(登录注册页面)全过程详细总结

    文章目录 JavaWeb项目(登录注册页面)全过程总结 一.环境准备与开发工具 二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...

  7. 使用HTML写一个完整的注册页面

    在上一篇博客中,我简单地写了怎样通过使用HTML写一个简单的跳转登录页面,but,TMD太丑了,于是突发奇想+天马行空不如写一个完整注册页面和流程,呵呵,不废话直接上代码. 首先是第一个页面testl ...

  8. php nodejs 前台,NodeJS之前端注册页面

    本文主要给大家介绍了NodeJS之前端注册页面的相关知识,文中通过示例代码介绍的非常详细,对大家学习具有一定的参考学习价值,希望能帮助到大家. app.js文件为://应用程序的启动入口文件 //加载 ...

  9. web前端如何做注册页面

    1.首先,设计整个页面: 代码片段如下: <div class="width100 marT15 content_news_list"><div class=&q ...

最新文章

  1. Nodejs扩展,实现消息弹窗
  2. css修改span位置_简历完善,CSS布局与定位,笔记
  3. jquery_datatables
  4. 祝贺自己的博客又一个关键字排名上去了
  5. 毕设题目:Matlab人脸识别
  6. 基线、底线、顶线、中线
  7. 【Unifying Motion Deblurring and Frame Interpolation with Events】阅读笔记
  8. python爬虫爬取豆瓣图书
  9. 打印表格留标题怎么设置_打印Excel表格时每页都打印标题行的设置方法
  10. 数据挖掘期末复习速成大法 华南农业大学
  11. iTunes 备份损坏的解决办法
  12. Qt 设置Widget背景图片并实现透明度的三种方式
  13. setting中的各种设置
  14. 用 C语言的写出几个小程序
  15. 【快速统计面积周长】封闭图形快速面积求和CAD插件【LSP】
  16. 蓝桥杯31天冲刺之十一 [java]
  17. 汉王E典笔——一扫就翻译的笔
  18. 网络工具nc的常见功能和用法
  19. 关于12代Intel处理器性能偏向于小核心的问题解决办法,以及安卓模拟器多开卡的问题。
  20. Django开发中经常出现的问题

热门文章

  1. shell---sed语句练习
  2. vc中DC资源的正确利用
  3. 主流多媒体制作软件一览
  4. 合肥工业大学计算机考研试题,2016年合肥工业大学计算机考研真题及答案
  5. 嵌入式实践——烟雾产生器
  6. 三星手机摔一下,就花屏啦!!
  7. 解决org.json.JSONException: A JSONObject text must begin with '{' at character 1 of {
  8. 如何在程序中解析获取word文档(docx格式)的文本内容
  9. 为什么需要自动化测试?自动化有哪些优势?
  10. C#播放背景音乐的五种方法