目录

预览

 教程如下

首先新建一个HTML文件

接下来,我们在body标签的内部编写网页的主题内容

新建一个CSS文件

label:

input:

.submit_btn:

 CSS  居中显示:

这就结束啦!! 

完整代码

html:  

 css:

这次和大家分享一个用html语言实现的一个简单的注册表单,豪华升级版在文末的链接,感兴趣的可以点击浏览.

来, 先看预览

预览

 在这里呢,我们将html和css分开编写

 教程如下

首先新建一个HTML文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>程序员阿菜</title>
</head>

<body>
</body>
</html>

​
  • <head> </head>  头部标签

在<head>元素中可以插入以下信息

　　▶ 脚本(scripts)

　　▶ 样式文件(CSS)

　　▶ 各种元数据(meta)信息

       可添加在头部区域的元素标签

　　▶  <title>  <style>  <meta>  <link>  <script>  <noscript>  <base>
 

  • <title> 网页名称标题</title> 

  •  <body></body> 

 body 标签内部是网页得主题

里面包含着网页的主要内容

接下来,我们在body标签的内部编写网页的主题内容

  1. 添加<h3> 三级标题
  2. 添加<form> 表单 
  3. 添加<label> 标签  和  标签后的文本输入框 <input>
  4. 这里 "国家/地区" 采用的是一个下拉列表 <datalist> 用<option>制作选项

① form表单的属性action与method

② get方法是用来向服务器上获取数据，而post是用来向服务器上传递修改数据

属性

值

描述

action

URL

规定当提交表单时向何处发送表单数据

method

get/post

规定用于发送form-data的HTTP方法

<form action =”” method=”get”></form>

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>程序员阿菜</title>
</head>

<body>
	<h3>程序猿注册表单</h3>
	<form action="" method="get">
      <label>账号</label><input type="text" placeholder="请输入账号..." /><br />
      <label>密码</label><input type="password" placeholder="请输入密码..." /><br />
      <label>国家/地区</label><input type="text" placeholder="请选择国家/地区" id="region" list="regList"/>
      <datalist id="regList">
          <option value="中国"></option>
          <option value="中国香港"></option>
          <option value="中国澳门"></option>
      </datalist>
      <br />
      <label>手机</label><input type="tel" placeholder="请输入手机号..."/>  <br />
      <label>Email</label><input type="email" placeholder="请输入Email地址..." /><br />
      <div class="submit_btn">提交</div>
   </form>
</body>
</html>

预览:

 到这里 大致的内容已经完成啦. 接下就我们对网页进行美化.

新建一个CSS文件

首先在HTML文件的  <head>标签内部 添加<link>链接CSS文件

<link rel="stylesheet" href="style.css" />

然后对label和input进行定义

CSS display 参见:CSS display属性_xmjt1997的博客-CSDN博客

CSS padding:定义属性内边距

CSS text 参见:CSS text-属性汇总_pcaxb的专栏-CSDN博客_text属性

CSS margin 参见大佬:CSS中margin属性详解_我是楠楠的博客-CSDN博客_css margin属性

label:

label{
	width: 90px;
	height: 28px;
	display: inline-block;
	text-align: right;
	padding-right:10px;
	}

input:

input{
	width: 200px;
	height: 28px;
	border: #06F 1px solid;
	border-radius: 3px;
	margin: 5px 0 5px 0;
	}

 写到这里,我们来预览一下

唉? 基本的形状已经成型了 ,接下来继续加工. 

.submit_btn:

将"提交"按钮定义为 类选择容器

添加各种属性: 边框的线条 圆角和背景色 字体颜色 布局

:hover在鼠标移到链接上时添加的特殊样式。

.submit_btn{
	display: block;
	width: 100px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	border: 1px #006600 solid; 
	text-align: center;	
	border-radius: 3px;
	background:#090;
	color:#FFF;
	float: right;
	margin: 10px 15px 0 0;
	}
.submit_btn:hover{
	background: #0C3;
	cursor: pointer;
	}

预览:

 这个时候所有的样式已经写完啦.不过这样并不美观.我们可以让他居中显示.

回到html文件, 我们给body内部的所有内容套上 <div>标签,给<h3>标题也套上


<body>
	<div class="reg_div">
	<div class="h_title"><h3>程序猿注册表单</h3></div>
    <div class="h_hr"></div>
	<form action="" method="get">
      ......
   </form>
</body>

 CSS  居中显示:

.h_title{
	text-align:center;
	}
.h_hr{
	height:2px;
	background:#0CF;
	margin-bottom: 15px;
	}
.reg_div{
	width: 320px;
    margin: auto; 
	}

预览:

这就结束啦!! 

 不,这其实刚刚开始.

升级豪华版链接如下:https://blog.csdn.net/mohen110/article/details/120353678

完整代码

html:  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>程序员阿菜</title>
</head>


<body>
<div class="reg_div">
   <div class="h_title"><h3>程序猿注册表单</h3></div>
   <div class="h_hr"></div>
   <form action="" method="get">
      <label>账号</label><input type="text" placeholder="请输入账号..." /><br />
      <label>密码</label><input type="password" placeholder="请输入密码..." /><br />
      <label>国家/地区</label><input type="text" placeholder="请选择国家/地区" id="region" list="regList"/>
      <datalist id="regList">
          <option value="中国"></option>
          <option value="中国香港"></option>
          <option value="中国澳门"></option>
      </datalist>
      <br />
      <label>手机</label><input type="tel" placeholder="请输入手机号..."/>  <br />
      <label>Email</label><input type="email" placeholder="请输入Email地址..." /><br />
      <div class="submit_btn">提交...</div>
   </form>
 </div>
</body>
</html>

 css:

@charset "utf-8";
/* CSS Document */
.reg_div{
	width: 320px;
    margin: auto; 
	}
.submit_btn{
	display: block;
	width: 100px;
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	border: 1px #006600 solid; 
	text-align: center;	
	border-radius: 3px;
	background:#090;
	color:#FFF;
	float: right;
	margin: 10px 15px 0 0;
	}
.submit_btn:hover{
	background: #0C3;
	cursor: pointer;
	
	}	
label{
	display: inline-block;
	text-align: right;
	width: 90px;
	padding-right:10px;
	height: 28px;
	}
	
input{
	width: 200px;
	height: 28px;
	border: #06F 1px solid;
	border-radius: 3px;
	margin: 5px 0 5px 0;
	
	}
.h_title{
	text-align:center;
	}
.h_hr{
	height:2px;
	background:#0CF;
	margin-bottom: 15px;
	}

# css # html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟
cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟