目录
这次和大家分享一个用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标签的内部编写网页的主题内容
- 添加<h3> 三级标题
- 添加<form> 表单
- 添加<label> 标签 和 标签后的文本输入框 <input>
- 这里 "国家/地区" 采用的是一个下拉列表 <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;
}