溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用html5+css3實現一個注冊表單”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用html5+css3實現一個注冊表單”這篇文章吧。
復制代碼
<！DOCTYPE html>
<html>
<head>
<meta http-equiv =“ Content-Type” content =“ text / html; charset = utf-8” />
<link rel =“ stylesheet” href =“ css / style .css“ />
<script src =” http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“> </ script>
</ head>
<body>
<div id = wrapper>
<div id = lbl> </ div>
<form>
<fieldset id = account>
<legend>個人信息</ legend>
<label for = username>屏幕快照：</ label>
<input id = username類=文本框類型=文本名稱=用戶名必需的占位符=“請填寫賬號” />
<label for = password1>密碼：</ label>
<input id = password1 class = textbox type = password name = password1必需的占位符=“請填寫密碼” />
<label for = password2>重復密碼：</ label>
<input id = password2 class = textbox type = password name = password2必需的占位符=“請重復密碼” />
<label for = email>郵箱地址：</ label>
<input id = email class = textbox type = email name =電子郵件必填placeholder =“ www.csdn.com” />
</ fieldset>
<fieldset id = personal>
<legend>其他信息</ legend>
<label for = website>個人網址：</ label>
<input id = website class = textbox type = url name =網站必需的占位符=“ http://www.example.com” />
<label for = age>年齡：</ label>
<input id = age class = textbox type = number name = age min = 18 step = 2 pattern =“ [0-9] {1,3}” placeholder =“填充年齡”>
<label for = salary>月薪：</ label>
<input id = salary class = textbox type = range name = salary min = 0 max = 50000 step = 500 pattern =“ [0-9] {2，}” placeholder =“月薪幾多” value = 10000 onchange =“ showValue （this.value）“ />
<span id = rangevalue> 10000 </ span>
<script>
函數showValue（value）{
document.getElementById（” rangevalue“）。innerHTML = value;
}
</ script>
<label for = description>描述：</ label>
<textarea id = description name = description cols = 30 rows = 5 placeholder =“這里是詳細描述”> </ textarea>
</ fieldset>
<fieldset id = confirm>
<input type = submit value =“提交” />
<div class =“ clearfix”> </ div>
</ fieldset>
css源碼：
復制代碼
代碼如下：
正文{
background：url（bg.jpg）重復；
字體家族：Arial Narrow，Arial，無襯線；
保證金：0;
填充：0;
}
頁眉，節，頁腳{
display：block;
}
標頭{
width：100％;
background-color：rgb（0，0，0）;
background-color：rgba（0，0，0，0.9）;
顏色：#ccc;
padding：15px 0;
字母間距：1px；
底邊距：20px;
位置：相對；
}
標頭h2 {
margin：0 50px;
文字陰影：2px 2px 2px＃888;
向左飄浮;
}
#backlinks {
float：right;
邊距：-10px 20px;
line-height：25px;
font-weight：bold;
font-size：12px;
text-align：right;
}
#backlinks a {
color：#ccc;
文字修飾：無；
邊距：3px 0 0;
顯示：塊;
}
#backlinks a：hover {
color：#fff;
}
頁腳{
background-color：rgb（0，0，0）;
background-color：rgba（0，0，0，0.8）;
高度：25像素；
寬度：100％;
line-height：25px;
位置：相對；
字體家族：Arial，Helvetica，sans-serif；
底部：0;
左：0;
顏色：＃888;
font-size：11px;
}
頁腳跨度{
padding-left：20px;
}
頁腳a {
color：＃1FA2E1;
}
#wrapper {
width：770px;
margin：0自動;
text-align：center;
}
#wrapper hgroup {
margin：20px 0;
文字陰影：1px 1px 1px #ccc;
}
#wrapper h2 {
color：＃146FA0;
font-size：42px;
保證金：0;
}
#wrapper h3 {
color：＃71C1ED;
font-size：27px;
保證金：0;
}
#lbl {
color：＃777;
font-size：17px;
font-weight：bold;
文字陰影：1px 1px 0 #fff;
邊距：10px 0;
}
*：focus {
outline：none;
}
標簽，輸入，文本區域，字段集{
display：block;
}
fieldset＃account，fieldset＃personal {
width：250px;
填充：0 50px 50px;
邊距：10px;
向左飄浮;
背景：rgb（244,244,244）;
背景：rgba（244,244,244,0.7）;
-webkit-border-radius：25px;
-moz-border-radius：25px;
border-radius：25px;
border：3px double＃999;
}
fieldset＃confirm {
padding-top：10px;
清除：兩者；
邊框：無；
line-height：15px;
邊距：10px 0;
}
fieldset＃confirm標簽，fieldset＃confirm輸入{
display：inline;
向左飄浮;
邊距：15px 5px 0;
}
圖例{
font-size：20px;
font-weight：bold;
字母間距：5px；
顏色：＃999;
左邊距：-20px;
text-align：left;
填充：0 10px;
文字陰影：1px 1px 0 #ccc;
}
標簽{
font-size：17px;
font-weight：bold;
邊距：17px 0 7px;
text-align：left;
文字陰影：1px 1px 0 #fff;
}
textarea {
resize：both;
max-width：230px;
}
input.textbox，textarea {
padding：5px 10px;
-webkit-border-radius：15px;
-moz-border-radius：15px;
border-radius：15px;
border：1px實心#fff;
寬度：200像素；
文字陰影：1px 1px 1px＃777;
-moz-box-shadow：0px 2px 0px＃999;
-webkit-box-shadow：0px 2px 0px＃999;
框陰影：0px 2px 0px＃999;
-webkit-transition：全部0.5s緩入；
-moz轉換：全部0.5s緩入；
過渡：所有0.5s緩入緩出；
background：url（required.png）不重復200px 5px＃F0F0EF;
背景：-webkit-gradient（線性，左上，左下，從（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
背景：-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
背景：-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
背景：-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
背景：-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：focus，textarea：focus {
-webkit-transform：scale（1.1）;
-moz-transform：scale（1.1）;
轉換：scale（1.1）;
-moz-box-shadow：5像素3像素1像素#ccc;
-webkit-box-shadow：5px 3px 1px #ccc;
框陰影：7px 7px 2px #ccc;
文字陰影：1px 1px 3px＃777;
}
input.textbox：required {
background：url（required.png）不重復200px 5px＃F0F0EF;
background：url（required.png）不重復200px 5px，-webkit-gradient（linear，left top，left bottom，from（＃E3E3E3），to（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（required.png）不重復200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（required.png）不重復200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
背景：url（required.png）不重復200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（required.png）不重復200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：required：valid {
background：url（valid.png）不重復200px 5px＃F0F0EF;
background：url（valid.png）不重復200px 5px，-webkit-gradient（linear，左上，左下，從（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（valid.png）不重復200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（valid.png）不重復200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
background：url（valid.png）不重復200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（valid.png）不重復200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input.textbox：focus：invalid，input.textbox：not（：required）：invalid {
background：url（invalid.png）不重復200px 5px＃F0F0EF;
背景：url（invalid.png）不重復200px 5px，-webkit-gradient（linear，左上，左下，從（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /
background：url（invalid.png）不重復200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /
background：url（invalid.png）不重復200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /
background：url（invalid.png）不重復200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /
background：url（invalid.png）不重復200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /
}
input [type = submit] {
padding：10px;
margin：0 10px！重要;
寬度：300px;
}
@media屏幕和（-webkit-min-device-pixel-ratio：0）{
input [type = range] {padding：0;}
}
#rangevalue {
display：block;
text-align：right;
margin-top：-25px;
}
input ::-webkit-input-placeholder，textarea ::-webkit-input-placeholder {
color：#aaa;
字體樣式：斜體；
文字陰影：1px 1px 0 #fff;
}
輸入：-moz-placeholder，文本區域：-moz-placeholder {
color：#aaa;
字體樣式：斜體；
文字陰影：1px 1px 0 #fff;
}
.clearfix {
clear：both;
}
以上是“如何使用html5+css3實現一個注冊表單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
