溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用html5+css3實(shí)現(xiàn)一個(gè)注冊(cè)表單

發(fā)布時(shí)間：2022-03-01 11:08:57 來源：億速云 閱讀：171 作者：小新 欄目：web開發(fā)

這篇文章主要為大家展示了“如何使用html5+css3實(shí)現(xiàn)一個(gè)注冊(cè)表單”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用html5+css3實(shí)現(xiàn)一個(gè)注冊(cè)表單”這篇文章吧。

復(fù)制代碼

<！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>個(gè)人信息</ legend>

<label for = username>屏幕快照：</ label>

<input id = username類=文本框類型=文本名稱=用戶名必需的占位符=“請(qǐng)?zhí)顚戀~號(hào)” />

<label for = password1>密碼：</ label>

<input id = password1 class = textbox type = password name = password1必需的占位符=“請(qǐng)?zhí)顚懨艽a” />

<label for = password2>重復(fù)密碼：</ label>

<input id = password2 class = textbox type = password name = password2必需的占位符=“請(qǐng)重復(fù)密碼” />

<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>個(gè)人網(wǎng)址：</ label>

<input id = website class = textbox type = url name =網(wǎng)站必需的占位符=“ 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>

函數(shù)showValue（value）{

document.getElementById（” rangevalue“）。innerHTML = value;

}

</ script>

<label for = description>描述：</ label>

<textarea id = description name = description cols = 30 rows = 5 placeholder =“這里是詳細(xì)描述”> </ textarea>

</ fieldset>

<fieldset id = confirm>

<input type = submit value =“提交” />

<div class =“ clearfix”> </ div>

</ fieldset>

css源碼：

復(fù)制代碼

代碼如下：

正文{

background：url（bg.jpg）重復(fù)；

字體家族：Arial Narrow，Arial，無襯線；

保證金：0;

填充：0;

}

頁眉，節(jié)，頁腳{

display：block;

}

標(biāo)頭{

width：100％;

background-color：rgb（0，0，0）;

background-color：rgba（0，0，0，0.9）;

顏色：#ccc;

padding：15px 0;

字母間距：1px；

底邊距：20px;

位置：相對(duì)；

}

標(biāo)頭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;

位置：相對(duì)；

字體家族：Arial，Helvetica，sans-serif；

底部：0;

左：0;

顏色：＃888;

font-size：11px;

}

頁腳跨度{

padding-left：20px;

}

頁腳a {

color：＃1FA2E1;

}

#wrapper {

width：770px;

margin：0自動(dòng);

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;

}

標(biāo)簽，輸入，文本區(qū)域，字段集{

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標(biāo)簽，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;

}

標(biāo)簽{

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實(shí)心#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轉(zhuǎn)換：全部0.5s緩入；

過渡：所有0.5s緩入緩出；

background：url（required.png）不重復(fù)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）;

轉(zhuǎn)換：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）不重復(fù)200px 5px＃F0F0EF;

background：url（required.png）不重復(fù)200px 5px，-webkit-gradient（linear，left top，left bottom，from（＃E3E3E3），to（#FFFFFF））; / * Saf4 +，Chrome * /

background：url（required.png）不重復(fù)200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /

background：url（required.png）不重復(fù)200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /

背景：url（required.png）不重復(fù)200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /

background：url（required.png）不重復(fù)200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /

}

input.textbox：required：valid {

background：url（valid.png）不重復(fù)200px 5px＃F0F0EF;

background：url（valid.png）不重復(fù)200px 5px，-webkit-gradient（linear，左上，左下，從（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /

background：url（valid.png）不重復(fù)200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /

background：url（valid.png）不重復(fù)200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /

background：url（valid.png）不重復(fù)200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /

background：url（valid.png）不重復(fù)200px 5px，-o-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Opera 11.10+ * /

}

input.textbox：focus：invalid，input.textbox：not（：required）：invalid {

background：url（invalid.png）不重復(fù)200px 5px＃F0F0EF;

背景：url（invalid.png）不重復(fù)200px 5px，-webkit-gradient（linear，左上，左下，從（＃E3E3E3），到（#FFFFFF））; / * Saf4 +，Chrome * /

background：url（invalid.png）不重復(fù)200px 5px，-webkit-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * Chrome 10 +，Saf5.1 + * /

background：url（invalid.png）不重復(fù)200px 5px，-moz-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * FF3.6 + * /

background：url（invalid.png）不重復(fù)200px 5px，-ms-linear-gradient（top，＃E3E3E3，#FFFFFF）; / * IE10 * /

background：url（invalid.png）不重復(fù)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，文本區(qū)域：-moz-placeholder {

color：#aaa;

字體樣式：斜體；

文字陰影：1px 1px 0 #fff;

}

.clearfix {

clear：both;

}

以上是“如何使用html5+css3實(shí)現(xiàn)一個(gè)注冊(cè)表單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手