自己做的注册页面的界面代码 （学习HTML过程中的小记录）

最新推荐文章于 2024-06-16 23:02:16 发布
最新推荐文章于 2024-06-16 23:02:16 发布
阅读量253 收藏 1
点赞数
原文链接：http://www.cnblogs.com/StarKL/p/6007408.html
版权

自己做的注册页面的界面代码 （学习HTML过程中的小记录）     作者：王可利（Star·星星）

 

 

效果的样式：  

 

 

主要是运用了：表单标签、input  form

                 text=文本  password=密文输入  radio=单选    checkbox =多选   vlaue=输入框里面要写的字  textarea=复写框

                 button=普通的按钮  submit=提交按钮 reset=重置按钮 

 

 

代码如下：

  1 <html>
  3 <head>
  5 <meta charset="UTF-8">
  6 
  7 <title>（注册页面）</title>
  8 
  9 </head>
 10 
 13 <body>
 14 
 15 <h2>欢迎注册“你的星星我的网站”</h2>
 18 
 19 <form>
 22 
 23 请输入你de名字 : <input type="text" name="账号" value="可爱滴名字哟！嘎嘎~"> 
 26 
 27 <br><br>
 30 
 31 请输入你de密码 : <input type="password" name="密码" value="密文很安全哦~~ ^_^">
 34 
 35 <br><br>
36
 39 你是GG还是MM呀~ : <input type="radio" name="sex">GG <input type="radio" name="sex">MM <input type="radio" name="sex">不告诉你
 40 
 41  
 42 
 43 <br><br>
 44 
 47 请选择你de学历哟 : <input type="radio" name="study">幼儿园
 48 
 49                  <input type="radio" name="study">小学
 50 
 51                  <input type="radio" name="study">初中
 52 
 53                  <input type="radio" name="study">高中
 54 
 55                  <input type="radio" name="study">大学
 56 
 57                  <input type="radio" name="study">硕士
 58 
 59                  <input type="radio" name="study">博士
 60 
 61                  <input type="radio" name="study">更高，更厉害！
 62 
 63  
 64 
 65 <br><br>
 69 请选择你de爱好? : <input type="checkbox" name="love">睡觉
 70 
 71                    <input type="checkbox" name="love">吃饭
 72 
 73                    <input type="checkbox" name="love">踢足球
 74 
 75                    <input type="checkbox" name="love">打篮球
 76 
 77                    <input type="checkbox" name="love">打乒乓球
 78 
 79                    <input type="checkbox" name="love">打豆豆
 80 
 81                    <input type="checkbox" name="love">打代码
 84 
 85   <br><br>                  
 88 
 89 你都会玩什么技能呀 : <input type="checkbox" name="work">HTML
 90 
 91                   <input type="checkbox" name="work">CSS
 92 
 93                   <input type="checkbox" name="work">JS
 94 
 95                   <input type="checkbox" name="work">IOS
 96 
 97                   <input type="checkbox" name="work">C语言 
100 
101 <br><br> 
104 
105 <p>你来自哪里呀？<select>
106 
107     <option vlaue="北京">北京</option>
108 
109     <option vlaue="上海">上海</option>
110 
111     <option vlaue="广州">广州</option>
112 
113     <option vlaue="深圳">深圳</option>
114 
115 </select></p>
118 
119 <p>签名 ： <textarea rows="6" cols="100">请输入你的签名呀~~</textarea></p>  
122 
123 <p>普通按钮：<button>我是一个可爱的按钮</button></p>
126 
127 <p>提交按钮：<input type="submit" value="提交"></p> 
130 
131 <p>重置按钮：<input type="reset" value="重置"></p>
132 
133 </form>
134 
135 </body>
136 
137 </html>

 

 

转载于:https://www.cnblogs.com/StarKL/p/6007408.html

diqiang9451
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html注册页面代码
07-31
html实例，一个简单的注册页面，，，，，，，，，，，，，，，，，，
html简单的注册页面
12-15
很简单的html的网页制作,包含基本的注册功能
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
最新发布
南北极之间
06-16 869
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html编写注册页面
shan33__的博客
12-07 1660
运用表单相关知识编写了一个简单的注册页面。
HTML注册页面的设计
weighless的博客
04-17 3342
先展示效果图 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
web交互设计网页注册源代码
11-24
web交互设计课程实验源代码，用户登录注册设计，参考黎老师课程
HTML5手机微信聊天界面代码.zip
05-16
在这个“HTML5手机微信聊天界面代码”压缩包中，包含了一套用于构建类似微信聊天界面的源码，这对于想要学习或实践移动端即时通讯界面设计的前端开发者来说是一份宝贵的资源。 首先，我们要了解HTML5的核心特性。...
HTML5手机微信聊天界面代码
05-06
总的来说，创建HTML5手机微信聊天界面代码是一个综合运用多种前端技术的过程，涉及HTML布局、CSS样式设计、JavaScript交互实现、网络通信以及适应性设计等多个方面。这样的项目对于提升前端开发者综合能力具有很好的...
微信小程序学习用demo：豆瓣电影：实现搜索历史记录
05-04
在这个“微信小程序学习用demo：豆瓣电影：实现搜索历史记录”项目中，我们可以深入理解微信小程序如何实现用户搜索历史记录的功能。 首先，我们需要了解微信小程序的基本结构。一个小程序通常包含`app.js`、`app....
HTML仿百度首页登录后的静态界面代码
10-24
HTML仿百度首页登录后的静态界面代码是一个学习和实践项目，旨在帮助开发者理解并掌握HTML、CSS以及可能涉及的JavaScript技术，以创建一个与百度首页登录后界面类似的静态页面。在这个项目中，我们可以深入探讨以下...
html5仿网页版微信聊天界面代码
11-24
【HTML5仿网页版微信聊天界面代码】是一个利用HTML5技术构建的，模拟微信聊天界面的应用实例。这个项目旨在提供一个用户体验与微信相似的在线聊天环境，它涉及到多个HTML5特性，包括Canvas、Web Storage、WebSocket...
HTML绘制用户注册页面
09-28
主要为大家详细介绍了HTML绘制用户注册页面的的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
HTML-表单标签制作注册页面
07-22
HTML中使用表单标签制作注册页界面，表单标签重要的是使用type属性
HTML用户注册界面的实现
03-30
HTML用户注册界面的实现
网页课程设计报告 有登入注册页面及图片切换代码
06-28
有登入注册页面及图片切换代码 1. 课程设计目的： 课程设计为学生提供了一个既动手又动脑，独立实践的机会。通过课程设计，学生可以将课本上的理论知识和实际有机地结合起来，锻炼学生分析、解决实际问题的能力，并养成良好的网页编程习惯。  熟练掌握HTML基础知识。  基本掌握CSS格式化网页知识。  基本掌握JavaScript脚本语言 2. 课程设计内容： 2.1. 题目及简介： 题目：五月天主页 简介：我的主页主要目标是为了介绍乐团五月天的一些大致信息，并在其中插入一些他们博客的链接，希望大家通过我的网站来了解五月天这个团体。这个主页主要以紫黑的星空色为主要背景，呈现出摇滚乐团的摇滚风格，做出很多动态效果，使整个页面更加生动，设定了背景音乐且默认播放一次，整个构架用框架设计。 2.2.设计说明：利用学到的HTML标签、CSS及JavaScript脚本语言设计 班级网站，初步认识网站设计的基本过程与方法，提高进行工程设计的基本技能及分析、解决实际问题的能力，为后续课程和以后的工程实践打下良好的基础。 要求： (1) 系统设计要能完成题目所要求的功能。 (2) 编程简练，可用，尽可能的使系统的功能更加完善和全面。 (3) 说明书要清楚。
HTML注册页面代码实现（案例）
热门推荐
qq_43113232的博客
09-11 5万+
注册页面 &amp;lt;!--定义表单 form--&amp;gt; &amp;lt;form action=&quot;#&quot; method=&quot;post&quot;&amp;gt; &amp;lt;table border=&quot;1&quot; align=&quot;center&quot; width=&quot;5
用户注册界面设计（html,css）源码
weixin_52799870的博客
10-16 2770
用户注册界面设计（html,css）源码
HTML 简单实现注册页面
南淮北安的博客
02-16 6472
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!-- 定义表单 form--> <!-- action 属性规定当提交表单时向何处发送表单数据。--&...
Javaee做一个阅读记录界面的代码
06-02
以下是一个简单的JavaEE阅读记录界面代码示例，其中使用了JSP和Servlet： 1. 阅读记录界面的JSP页面（read.jsp）： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阅读记录</title> </head> <body> <h1>阅读记录</h1> <table> <tr> <th>书名</th> <th>作者</th> <th>阅读时间</th> <<th>操作</th> </tr> <c:forEach var="book" items="${books}"> <tr> <td>${book.title}</td> <td>${book.author}</td> <td>${book.date}</td> <td><a href="${pageContext.request.contextPath}/delete?id=${book.id}">删除</a></td> </tr> </c:forEach> </table> <br> <form action="${pageContext.request.contextPath}/add" method="post"> 书名：<input type="text" name="title"><br> 作者：<input type="text" name="author"><br> 阅读时间：<input type="date" name="date"><br> <input type="submit" value="添加"> </form> </body> </html> ``` 2. Servlet控制器（BookServlet.java）： ```java package com.example.controller; import java.io.IOException; import java.sql.SQLException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.example.dao.BookDao; import com.example.model.Book; @WebServlet("/read") public class BookServlet extends HttpServlet { private static final long serialVersionUID = 1L; private BookDao bookDao; public BookServlet() { super(); bookDao = new BookDao(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Book> books; try { books = bookDao.getAllBooks(); request.setAttribute("books", books); request.getRequestDispatcher("/read.jsp").forward(request, response); } catch (SQLException e) { e.printStackTrace(); response.getWriter().append("Error: " + e.getMessage()); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String title = request.getParameter("title"); String author = request.getParameter("author"); String date = request.getParameter("date"); Book book = new Book(title, author, date); try { bookDao.addBook(book); response.sendRedirect(request.getContextPath() + "/read"); } catch (SQLException e) { e.printStackTrace(); response.getWriter().append("Error: " + e.getMessage()); } } protected void doDelete(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int id = Integer.parseInt(request.getParameter("id")); try { bookDao.deleteBook(id); response.sendRedirect(request.getContextPath() + "/read"); } catch (SQLException e) { e.printStackTrace(); response.getWriter().append("Error: " + e.getMessage()); } } } ``` 3. DAO类（BookDao.java）： ```java package com.example.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.example.model.Book; import com.example.utils.DbUtils; public class BookDao { private Connection conn; public BookDao() { conn = DbUtils.getConnection(); } public List<Book> getAllBooks() throws SQLException { List<Book> books = new ArrayList<>(); String sql = "SELECT * FROM books"; PreparedStatement stmt = conn.prepareStatement(sql); ResultSet rs = stmt.executeQuery(); while (rs.next()) { int id = rs.getInt("id"); String title = rs.getString("title"); String author = rs.getString("author"); String date = rs.getString("date"); Book book = new Book(id, title, author, date); books.add(book); } rs.close(); stmt.close(); return books; } public void addBook(Book book) throws SQLException { String sql = "INSERT INTO books (title, author, date) VALUES (?, ?, ?)"; PreparedStatement stmt = conn.prepareStatement(sql); stmt.setString(1, book.getTitle()); stmt.setString(2, book.getAuthor()); stmt.setString(3, book.getDate()); stmt.executeUpdate(); stmt.close(); } public void deleteBook(int id) throws SQLException { String sql = "DELETE FROM books WHERE id=?"; PreparedStatement stmt = conn.prepareStatement(sql); stmt.setInt(1, id); stmt.executeUpdate(); stmt.close(); } } ``` 4. 实体类（Book.java）： ```java package com.example.model; public class Book { private int id; private String title; private String author; private String date; public Book() { } public Book(String title, String author, String date) { this.title = title; this.author = author; this.date = date; } public Book(int id, String title, String author, String date) { this.id = id; this.title = title; this.author = author; this.date = date; } // getters and setters } ``` 以上代码仅供参考，具体实现可能会因为需求不同而有所变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值