写个表单

最新推荐文章于 2022-10-15 12:18:50 发布
最新推荐文章于 2022-10-15 12:18:50 发布
阅读量208 收藏
点赞数 1
分类专栏： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33300789/article/details/80056272
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				margin-top: 30px;
				transition: all .5s;
				padding: 1px;
				letter-spacing: 1px;
			}
			.vli{
				width: 430px;
				margin: 0 auto;
				display: table;
				position: relative;
				min-height: 484px;
			}
			.vli .wrapper{
				border-radius: 6px;
				max-width: 40%;
				height: 120%;
				background: #FFF;
				border: 1px solid rgb(0,0,0,.14);
				transition: all .5s;
				color: #303030;
				overflow: hidden;
			}
			.vli > div{
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				color: #fff;
				min-height: 400px;
				height: 400px;
			}
			#register{
				padding: 15px 30px 30px;
				transition: all .5s;
				background: #fff;
				width: 100%;
				box-sizing: border-box;
			}
			.vli .wrapper div div{
				position: relative;
				margin-bottom: 20px;
				box-sizing: border-box;
			}
			.vli .wrapper input{
				height: 40px;
				padding: 5px 15px;
				width: 100%;
				border: 1px solid #ddd;
				border-radius: 3px;
				color: #353434;
				box-sizing: border-box;
			}
			#login p, #register p{
				position: absolute;
				left: 17px;
			}
			.vli .wrapper h3{
				margin-bottom: 20px;
				margin-top: 5px;
			}
			.marb0{
				margin-bottom: 0 !important;
			}
			#register .pho{
				width: 60%;
				float: left;
			}
			#register .pcd{
				width: 40%;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<div class="vli">
				<div class="wrapper move">
					<div id="register">
						<form class="form2" method="" action="">
							<h3>免费注册</h3>
							<div class="vali">
								<input type="text" name="" value="" class="Required" placeholder="必填">
							<p style="font-size: 12px; display: inline; vertical-align: top; color: red;"></p></div>
							<div class="vali reqtps">
								<input type="text" name="" value="" class="Requireds" placeholder="必填自定义提示">
							<p style="font-size: 12px; display: inline; vertical-align: top; color: red;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="uersname" placeholder="请输入用户名">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入中文" class="chinese">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入数字" class="nub">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" placeholder="请输入11位手机号" class="phone">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="marb0">
								<div class="vali pho">
									<input type="text" name="" value="" placeholder="请输入验证码" class="phcode">
								<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
								<div class="vali pcd">
									<input type="button" name="" value="获取验证码" class="codebtn" disabled="disabled" style="color: rgb(150, 150, 150);">
								<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
								<div class="cl1"></div>
							</div>
							<div class="vali">
								<input type="password" name="" value="" placeholder="请填写长度为6-20个字符的密码" class="pasw">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="password" name="" value="" placeholder="请再次输入密码" id="password" class="pasws">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="eal" placeholder="请输入邮箱,邮箱格式,123@163.com">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="vali">
								<input type="text" name="" value="" class="cid" placeholder="请输入身份证">
							<p style="font-size:12px;display:inline;vertical-align:top;"></p></div>
							<div class="submit">
								<input type="submit" class="btn" value="立即注册">
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>




qq_33300789
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单的制作
hxtxsdcxy的博客
12-02 1742
此次笔记内容主要为表单的制作、input样式的改变、背景的虚化 一、表单form的制作 定义表单标签（创建一个表单） action：表单属性之一，指示服务器上处理表单输出的程序 method：表单属性之一，告诉浏览器如何将数据发送给服务器（post或get） Get方法： GET 请求可被缓存； GET 请求保留在浏览器历史记录中； GET 请求可被收藏为书签； GET 请求不应在处理敏感数据时使用； GET 请求有长度限制； GET 请求只应当用于取回数据； POST方法： PO.
常用表单书写
范玖久的博客
06-04 564
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用表单书写</title> </head> <body> <form action="#" method="post"> <table&gt...
<form>标签写一个基本的表单
weixin_34043301的博客
02-27 247
表单：<form> 　　表单元素：要填的各项；　　通用格式：<intput type="类型" name=" " value=" ">　　name=" "：给后台看的名字　　value=" "：值　 　　　　　　　　　　　　　　　特殊格式： 　　　　　　　　　　　　　　　　　　　　下拉选项：<select> 　　　　　　　　　　　　　　　　　　　　　　　...
自己写一个表单吧
BurstLink35的博客
02-03 71
效果图 主要代码段 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <style type="text/css"> .pdd{ position: relative; left:10px; to
html怎么样写表单，表单详细教程
十三月的博客
08-13 1万+
表单： 注意：html里属性都是字符串！ 注意：button必须写在tr里，否则程序卡死！ 不切割换行键:ctrl+回车 <form method="POST"> <table> <tr> <td>姓名</td> <td><input type="text" id="uname" name="uname"></td> </tr> </table> </form&
运用jQuery写的验证表单(实例讲解)
10-19
本文将详细介绍如何使用jQuery进行表单验证，通过一个实际的示例来帮助你理解这一过程。首先，我们需要在HTML文档中引入jQuery库和其他必要的JavaScript文件，如jQuery.validate.js和相应的本地化文件，例如jquery....
form表单回写技术java实现
09-02
主要为大家详细介绍了java实现form表单回写技术的相关资料,需要的朋友可以参考下
分享纯手写漂亮的表单验证
09-03
在本文中，我们将探讨如何实现一个纯手工编写的、具有美观样式的表单验证功能，主要涉及JavaScript（JS）和jQuery。表单验证是确保用户输入数据有效性和完整性的关键步骤，尤其对于网页应用程序而言。以下是一些核心...
iview同时验证多个表单问题总结
12-29
iview验证一个表单问题： 在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :...
javascript写的一个表单动态输入提示的代码
10-30
javascript写的一个表单动态输入提示的代码
html 中写一个表怎么写,HTML如何编写一个简单的表单？
weixin_29837797的博客
05-31 535
表单页面的编写是前端开发中一个重要的环节，在注册登录和填写资料信息时都会涉及到。那么 W3Cschool 小编为大家介绍下简单的表单编写。我们先来看下常用的表单元素有哪些：文本域文本域通过 ​​ 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。密码字段密码字段通过标签 ​​ 来定义单选按钮​​ 标签定义了表单单选框选项。复选框​​ 定义了复选框. 用户需要从若干给定的选择中选取...
手写表单及h5表单验证举例
mia1106的博客
06-28 2165
表单是一个很重要的概念，这里涉及到收集数据以及验证数据，以及表单的用户体验。一般ui框架会有封装好的这些功能。 这里复习一下手写表单，顺带复习一下表单的基本属性，基本样式和h5的表单验证。 一个表单基本包含一个html结构，即表单结构，针对html的样式，表单验证，表单提交。这里会把前三项的相关代码贴出来。大家组合到一个html页面之中，就可以形成一个完整的功能。 表单基本结构 一般包含 ...
使用HTML语言和JAVA语言编写一份表单
m0_65358564的博客
10-15 2832
使用HTML语言和JAVA语言制作一份表单
如何用HTML写一个表单呢？
Nathan Xu的博客
07-19 1794
都这年头了，不会还有人连个表单都不会做吧！？
【HTML】表单+表格写一个注册界面
一只快乐的野指针D的博客
11-29 1万+
蹭课蹭来了个作业     以上是注册界面的样式及要求。 有两个想法 一是设计外表格为8*2（八行两列），每个单元格又嵌套一个小表格（1*2），小表格第一列设置对齐方式为向右对齐，第二列向左对齐（因为图片中用户名，密码等右边是对齐的，而文本框这些左边也是对齐的）。接下来的代码就是用这个方法的。   二是外表格设计为1*2的，然后左右两列都嵌套一个8*2的内表格。对齐方式同上。  ...
JS页面跳转使地址后面不显示参数
热门推荐
jaune162的专栏，最新动态请关注：https://jaune162.blog
07-01 3万+
背景 使用window.open()和window.location.href跳转时，新页面的地址栏会显示参数，如下：http://127.0.0.1:8080/website-cms/admin/article/edit?action=add。 这样会暴露参数内容，用户可以修改地址栏的参数。如果提交的参数修改可能会出现业务上的错误，甚至可以跳过权限验证，实现本来没有的权限。 案例 以...
创建一个表单（Form）元素
qq_37499398的博客
05-02 3104
Create a Form Element使用HTML来构建可以跟服务器交互的Web表单(form)，通过给你的form元素添加一个action属性来达到此目的。action属性的值指定了表单提交到服务器的地址。例如：&lt;form action="/url-where-you-want-to-submit-form-data"&gt;&lt;/form&gt;把你的文本框嵌套进form元素，并...
javascript写一个简单的表单校验
lzpzwy的博客
04-24 630
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; //检查用户名是否正确 function checkName() { //获取到输入框的颜色为白色
JavaScript简单的表单编写
qq_57218752的博客
01-05 1289
话不多说直接进入主题 这是一个简单的表单 其中涉及到活动 区域时间 活动时间 性质等 这里其实最大的难度无非就是区域选择和时间的一个生成 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <div> 活动： &
用flutter写个表单
最新发布
05-11
好的，下面是一个简单的表单示例，包括姓名和电子邮件输入框以及提交按钮。 ```dart import 'package:flutter/material.dart'; class FormDemo extends StatefulWidget { @override _FormDemoState createState...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值