如何用记事本制作一个简陋的小网页(3)——注册信息表

news2024/11/6 23:39:08

目录

前提须知:

一、表格建立之前:

二、表格的建立:

三、信息表的内容填充:

 1.昵称 和 电话 :

2.密码:

3.性别:

4. 爱好:

5.民族:

6. 出生日期:

7.博客网址:

8.邮箱:

9. 文件上传:

10.幸运色:

11.留言板:

12.确认按钮和重置按钮:



前提须知:

如何使用记事本制作一个简陋的小网页(2)——表格的建立-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/2301_76445610/article/details/133417340

一、表格建立之前:

在表格建立之前需要使用<form></form>以此才能将信息表内的信息进行表达。

二、表格的建立:

使用<table></table> <tr></tr> <td></td>对表格进行一个框架的完善和修补

三、信息表的内容填充:

 1.昵称 和 电话 :

  •  input 是一种表格内部语法的头部标识,而type是对这种标识的一种类型。
<input type="text" placeholder="请输入昵称" size="25" pattern="^[\u4e00-\u9fa5]{4,10}" title="输入4到10个汉字"autofocus required/>
  • text是一种文本框,二placeholder是一个灰色的提示 

  • size 是表示文本框的长度,pattern是一种规则,规则规定只能输入 4到10个汉字,而title是一种输入错误的提醒。

同样电话功能也是如此:

 

2.密码:

 password 是密码框,用来隐藏密码,同时也有着显示密码的功能,隐藏密码通常是实心圆和*

3.性别:

radio 是一种单选框,value 是一种值域的设置,name是一种域名值,属于同一组单选框的必须要相同。

同时单选框,是只能选择一个的。

4. 爱好:

在这里,我们选用checkbox 这是复选框 ,而在复选框中的name 表示的是一种排序

同理,复选框是可以进行多个选择的。

5.民族:

  • <select></select>这时一个列表元素,而name 是列表的名字
  • 如果在<select>后面加上 size 和 multilpe <select size = "5"  multilpe> 表示的是多选项列表,可以选择五个选项最多。
  • 而图中的代码则是表示下拉列表,其中的value 是表示列表中的排位 (多选项列表也是如此功能)

  

6. 出生日期:

date是一个日历表。

7.博客网址:

  • url是生成一个网址输入框,placheholder是一个提示,value是将网址的前缀打出,规定我们必须要在这个域名输入

 

8.邮箱:

email 是 生成一个E-mail 输入框,它会辨别输入的内容是否是邮箱的网址。 

9. 文件上传:

  • file 是 一个文件域,文件域可以将本地文件进行上传

10.幸运色:

  • color 是创建一个RGS的调色,不过默认是黑色。

11.留言板:

  • <textarea></textarea>是创建一个文本区域,rows 是行数,cols 是字符数也是列数。

12.确认按钮和重置按钮:

  • submit是创建一个按钮,value是为整个确认按钮命名
  • 如果,没有使用value则默认的名字是提交

而reset是一个重置内容的按钮。 

 注意这两个代码是在表格之后的!


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

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

相关文章

Python用selenium实现自动登录和下单的项目实战

本文主要介绍了Python用selenium实现自动登录和下单的项目实战&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值&#xff0c;需要的朋友们下面随着小编来一起学习学习吧− 前言 学python对selenium应该不陌生吧 Selenium…

什么是低代码开发平台?有什么优势?

目录 一、低代码平台演进 1. 低代码概念 2. 低代码衍生历程 二、为什么要用低代码&#xff1f; &#xff08;1&#xff09;降本提效&#xff0c;便捷开发 &#xff08;2&#xff09;降低开发门槛&#xff0c;扩大应用开发劳动力 &#xff08;3&#xff09;加快数字化转型建设 三…

“第四十五天” 数据结构基本概念

目前看的有关数据结构的课&#xff0c;估计这周就看完了&#xff0c;但感觉差很多&#xff0c;还是和c一样&#xff0c;这样过一下吧。但可能比较急&#xff0c;目前是打算争取寒假回家之前把四大件都先大致过一遍。 数据结构里面有很多新的定义和概念&#xff0c;学到现在&am…

054协同过滤算法的电影推荐系统

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度

前言 在实际开发中我们经常使用el-dialog弹出框做表单&#xff0c;一般情况都是居中。遮挡到了一部分数据 当我们想要查看弹出框下面的数据时&#xff0c;就只能先把弹出框关闭&#xff0c;查看完数据之后在打开弹框 我们通过动态样式&#xff0c;和鼠标事件就可以实现。但自…

OpenLDAP LDIF详解

手把手一步步搭建LDAP服务器并加域 有必要理解的概念LDAPWindows Active Directory 服务器配置安装 OpenLDAP自定义安装修改对象&#xff08;用户和分组等&#xff09;修改olcSuffix 和 olcRootDN 属性增加olcRootPW 属性修改olcAccess属性验证新属性值 添加对象&#xff08;用…

Neo4j入门教程2(看不懂评论区随便骂)

1. ORDER BY create (s4:student{age:21,num:98}),(s5:student{age:22,num:86}),(s6:student{age:23,num:99})承接上文&#xff0c;创建三个学生节点&#xff0c;标签为student1、student2、student3&#xff0c;分别拥有age属性和num属性 match(s:student) return s查看我们…

驱动day2:LED灯实现三盏灯的亮灭

head.h #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_PE_MODER 0x50006000 #define PHY_PF_MODER 0x50007000 #define PHY_PE_ODR 0x50006014 #define PHY_PF_ODR 0x50007014 #define PHY_RCC 0x50000A28#endif 应用程序 #include <stdio.h> #include <sys/…

【C语言必知必会 | 第二篇】编译器的安装与使用

引言 C语言是一门面向过程的、抽象化的通用程序设计语言&#xff0c;广泛应用于底层开发。它在编程语言中具有举足轻重的地位。 此文为【C语言必知必会】系列第二篇&#xff0c;介绍C语言编译器的安装与使用&#xff0c;为之后的学习安装环境基础 文章目录 1️⃣ Dev-C的安装与…

【2024秋招】用友项目管理部门java后端二面2023.9.12

1 rpc框架 1.1 深入讲讲你做的这个rpc框架 答&#xff1a; 1.2 你这个注册中心有实现相关的监控吗 1.2.1 如何实现注册中心有实现相关的监控 是的&#xff0c;我可以为你提供关于RPC注册中心及其监控的相关信息。RPC注册中心是用于管理微服务之间调用关系的中心化服务&…

数学建模入门

一 数学建模简介 数学建模创办于1992年&#xff0c;每年一届&#xff0c;是首批列入“高校学科竞赛排行榜”的19项竞赛之一。2022年&#xff0c;来自全国及英国、马来西亚的1606所院校/校区、54257队(本科49424队、专科4833队)、超过16万人报名参赛。是目前奖项最具有含金量的…

基于材料生成优化的BP神经网络(分类应用) - 附代码

基于材料生成优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于材料生成优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.材料生成优化BP神经网络3.1 BP神经网络参数设置3.2 材料生成算法应用 4.测试结果…

Spring Boot + EasyUI 创建第一个项目(一)

创建一个Spring Boot和EasyUI相结合的项目。 一、构建一个Spring Boot项目 Spring Boot之创建一个Spring Boot项目&#xff08;一&#xff09;-CSDN博客 二、配置Thymeleaf Spring Boot Thymeleaf&#xff08;十一&#xff09;_thymeleaf 设置字体_人……杰的博客-CSDN博客…

轴承寿命相关细节的研究

数据集PHM2012 介绍一下IEEE PHM2012数据集_phm2012轴承数据集-CSDN博客 标签如何设置的? 剩余寿命预测的标签设置_rul 标签_兔子牙丫丫的博客-CSDN博客 参考自刘硕师兄的毕业答辩PPT 图 4.9 训练数据的切分方法 数据段的重叠切分&#xff0c;不仅可以覆盖更多的标签数据…

分布式锁之环境准备

文章目录 分布式锁1. 传统锁回顾1.1. 从减库存聊起1.2. 环境准备 分布式锁 在应用开发中&#xff0c;特别是web工程开发&#xff0c;通常都是并发编程&#xff0c;不是多进程就是多线程。这种场景下极易出现线程并发性安全问题&#xff0c;此时不得不使用锁来解决问题。在多线…

YZ系列工具:YZ11:VBA_窗体缩放

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套一部VBA手册&#xff0c;教程分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的…

京东敏捷实践指南

ISBN: 978-7-121-38257-4 编著&#xff1a;赵卫、王立杰 页数&#xff1a;211页 阅读时间&#xff1a;2023-09-02 推荐指数&#xff1a;★★★★★ 本文主要讲解的是敏捷开发&#xff0c;介绍了敏捷转型的必要性和收益。 介绍的方法有&#xff1a;Scrum、Kanban&#xff08;看板…

Android自行车在线租借租赁系统+全套手把手视频教程

【项目功能介绍】 功能列表: 本系统包含后台管理和前端app双端系统, 本系统包含三个角色: 管理员,员工,app用户。 后台管理员的功能包含: 登录, 退出, 自新车管理,添加自新车,修改自新车,禁用启用自新车; 自新车车辆管理,添加自新车车辆,修改自新车车辆,启用禁用自新车车辆; …

JVM——JVM概述以及双亲委派机制

JVM探究 请你谈谈你对JVM的理解&#xff1f;Java8虚拟机和之前的有什么变化更新&#xff1f;什么是OOM&#xff0c;什么是栈溢出StackOverFlowError&#xff1f;怎么分析&#xff1f;JVM的常用调优参数有哪些&#xff1f;内存快照如何抓取&#xff1f;怎么分析Dump文件&#x…