好看的表單模板源代碼（html表單模板源代碼）
本篇文章給大家談?wù)労每吹谋韱文０逶创a，以及html表單模板源代碼對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
- 1、求用JAVASCRIP編寫(xiě)的驗(yàn)證表單，要源代碼的，能運(yùn)行再加分~
- 2、html 怎么設(shè)置漂亮的表單樣式
- 3、需要一個(gè)HTML模板，用來(lái)做簡(jiǎn)單的表單數(shù)據(jù)錄入
求用JAVASCRIP編寫(xiě)的驗(yàn)證表單，要源代碼的，能運(yùn)行再加分~
1:js 字符串長(zhǎng)度限制、判斷字符長(zhǎng)度 、js限制輸入、限制不能輸入、textarea 長(zhǎng)度限制
2.:js判斷漢字、判斷凱隱宏是否漢字 、只能輸入漢字
3:js判斷是否輸入英文、盯冊(cè)只能輸入英文
4:js只能輸入數(shù)字,判斷數(shù)字、驗(yàn)證數(shù)字、檢測(cè)數(shù)字、判斷是否為數(shù)字、只能輸入數(shù)字
5:只能輸入英文字符和數(shù)字
6: js email驗(yàn)證 、js 判斷email 、信箱/郵箱格式驗(yàn)證
7:js字符過(guò)濾,屏蔽關(guān)鍵字
8:js密碼驗(yàn)證、判斷密碼
2.1: js 不為空、為空或不是對(duì)象 、判斷為空 、判斷不為空
2.2:比較兩個(gè)表單項(xiàng)的值是否相同
2.3:表單只能為數(shù)字和"_",
2.4:表單項(xiàng)輸入數(shù)值/長(zhǎng)度限定
2.5:中文/英文/數(shù)字/郵件地址合法性判斷
2.6:限定表單項(xiàng)不能輸入的字符
2.7表單的自符控制
2.8:form文本域的通用校驗(yàn)函數(shù)
1. 長(zhǎng)度限制
script
function test()
{
if(document.a.b.value.length50)
{
alert("不能超過(guò)50個(gè)字符！");
document.a.b.focus();
return false;
}
}
/script
form name=a onsubmit="return test()"
textarea name="b" cols="40" wrap="VIRTUAL" rows="6"/textarea
input type="submit" name="Submit" value="check"
/form
2. 只能是漢字
input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')"
3." 只能是英文
script language=javascript
function onlyEng()
{
if(!(event.keyCode=65event.keyCode=90))
event.returnvalue=false;
}
/script
input onkeydown="onlyEng();"
4. 只能是數(shù)字
script language=javascript
function onlyNum()
{
if(!((event.keyCode=48event.keyCode=57)||(event.keyCode=96event.keyCode=105)))
//考慮小鍵盤(pán)上攜氏的數(shù)字鍵
event.returnvalue=false;
}
/script
input onkeydown="onlyNum();"
5. 只能是英文字符和數(shù)字
input onkeyup="value="/oblog/value.replace(/[\W]/g,"'')
"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
6. 驗(yàn)證油箱格式
SCRIPT LANGUAGE=javascript RUNAT=Server
function isEmail(strEmail) {
if
(strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
!= -1)
return true;
else
alert("oh");
}
/SCRIPT
input type=text onblur=isEmail(this.value)
7. 屏蔽關(guān)鍵字(這里屏蔽***和****)
script language="javascript1.2"
function test() {
if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){
alert(":)");
a.b.focus();
return false;}
}
/script
form name=a onsubmit="return test()"
input type=text name=b
input type="submit" name="Submit" value="check"
/form
8. 兩次輸入密碼是否相同
FORM METHOD=POST ACTION=""
input type="password" id="input1"
input type="password" id="input2"
input type="button" value="test" onclick="check()"
/FORM
script
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
/script
夠了吧 :)
屏蔽右鍵 很酷
oncontextmenu="return false" ondragstart="return false"
onselectstart="return false"
加在body中
二
2.1 表單項(xiàng)不能為空
script language="javascript"
!--
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("請(qǐng)輸入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
--
/script
2.2 比較兩個(gè)表單項(xiàng)的值是否相同
script language="javascript"
!--
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert("您兩次輸入的密碼不一樣！請(qǐng)重新輸入.");
document.ADDUser.PWD.focus();
return false;
}
return true;
}
--
/script
2.3 表單項(xiàng)只能為數(shù)字和"_",用于電話/銀行帳號(hào)驗(yàn)證上,可擴(kuò)展到域名注冊(cè)等
script language="javascript"
!--
function isNumber(String)
{
var Letters = "1234567890-"; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert("您的電話號(hào)碼不合法！");
document.form.TEL.focus();
return false;
}
return true;
}
--
/script
2.4 表單項(xiàng)輸入數(shù)值/長(zhǎng)度限定
script language="javascript"
!--
function CheckForm()
{
if (document.form.count.value 100 || document.form.count.value
1)
{
alert("輸入數(shù)值不能小于零大于100!");
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length10)
{
alert("輸入文字小于10!");
document.form.MESSAGE.focus();
return false;
}
return true;
}
//--
/script
表單驗(yàn)證實(shí)用代碼如下：
1. 長(zhǎng)度限制
以下為代碼部分:
script
function test()
{
if(document.a.b.value.length50)
{
alert("不能超過(guò)50個(gè)字符！");
document.a.b.focus();
return false;
}
}
/script
form name=a onsubmit="return test()"
textarea name="b" cols="40" wrap="VIRTUAL" rows="6"/textarea
input type="submit" name="Submit" value="check"
/form
2. 只能是漢字
以下為代碼部分:
input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
3. 只能是英文
以下為代碼部分:
script language=javascript
function onlyEng()
{
if(!(event.keyCode=65event.keyCode=90))
event.returnvalue=false;
}
/script
input onkeydown="onlyEng();"
4. 只能是數(shù)字
以下為代碼部分:
script language=javascript
function onlyNum()
{
if(!((event.keyCode=48event.keyCode=57)||(event.keyCode=96event.keyCode=105)))
//考慮小鍵盤(pán)上的數(shù)字鍵
event.returnvalue=false;
}
/script
input onkeydown="onlyNum();"
5. 只能是英文字符和數(shù)字
以下為代碼部分:
input onkeyup="value=value.replace(/[\W]/g,'')
"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
6. 驗(yàn)證郵箱格式
以下為代碼部分:
SCRIPT LANGUAGE=javascript RUNAT=Server
function isEmail(strEmail) {
if
(strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)
!= -1)
return true;
else
alert("oh");
}
/SCRIPT
input type=text onblur=isEmail(this.value)
7. 屏蔽關(guān)鍵字(這里屏蔽sex和****)
以下為代碼部分:
script language="javascript1.2"
function test() {
if((a.b.value.indexOf ("sex") == 0)||(a.b.value.indexOf ("****") == 0)){
alert(":)");
a.b.focus();
return false;}
}
/script
form name=a onsubmit="return test()"
input type=text name=b
input type="submit" name="Submit" value="check"
/form
8. 兩次輸入密碼是否相同
以下為代碼部分:
FORM METHOD=POST ACTION=""
input type="password" id="input1"
input type="password" id="input2"
input type="button" value="test" onclick="check()"
/FORM
script
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
/script
html 怎么設(shè)置漂亮的表單樣式
html 設(shè)置漂亮的表單樣式，以下是代碼：
1、編寫(xiě)一個(gè)from表單
form id="payment"
fieldset
legend用戶詳細(xì)資料/legend
ol
li
label for="name"用戶名稱(chēng)：/label
input id="name" name="name" type="text" placeholder="請(qǐng)輸入用戶名" required autofocus
/li
li
label for="email"郵件地址：世猛配/label
input id="email" name="email" type="email" placeholder="example@163.com" required
/li
li
label for="phone"聯(lián)系電話：/label
input id="phone" name="phone" type="tel" placeholder="010-12345678" required
/li
/ol
/fieldset
fieldset
legend家庭住址（收貨地址）：/legend
ol
li
label for="知喚address"詳細(xì)地址：/label
textarea id="address" name="address" rows="1" required/textarea
/li
li
label for="postcode"郵政編碼：/label
input id="postcode" name="postcode" type="text" required
/li
li
label for="country"國(guó) 家：/label
input id="country" name="country" type="text" required
/li
/ol
/fieldset
fieldset
legend付費(fèi)方式/legend
ol
li
fieldset
legend信用卡類(lèi)搜指型/legend
ol
li
input id="visa" name="cardtype" type="radio"
label for="visa"中國(guó)工商銀行/label
/li
li
input id="amex" name="cardtype" type="radio"
label for="amex"中國(guó)人民銀行/label
/li
li
input id="mastercard" name="cardtype" type="radio"
label for="mastercard"中國(guó)建設(shè)銀行/label
/li
/ol
/fieldset
/li
li
label for="cardnumber"銀行卡號(hào)：/label
input id="cardnumber" name="cardnumber" type="number" required
/li
li
label for="secure"驗(yàn) 證 碼：/label
input id="secure" name="secure" type="number" required
/li
li
label for="namecard"持 卡 人：/label
input id="namecard" name="namecard" type="text" placeholder="確定是否該卡用戶！" required
/li
/ol
/fieldset
fieldset
button type="submit"現(xiàn)在購(gòu)買(mǎi)/button
/fieldset
/form
2、編寫(xiě)css樣式
style type="text/css"
/*分別定義HTML中和標(biāo)記之的距離樣式*/
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
/*定義body標(biāo)記樣式*/
body {
background: #ffffff;
color: #111111;
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 20px;
}
/*定義付費(fèi)內(nèi)容的樣式*/
form#payment {
background: #9cbc2c;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px;
width: 400px;
margin:auto;
}
form#payment fieldset {
border: none;
margin-bottom: 10px;
}
form#payment fieldset:last-of-type { margin-bottom: 0; }
form#payment legend {
color: #384313;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
text-shadow: 0 1px 1px #c0d576;
}
form#payment fieldset legend:before {
content: "Step " counter(fieldsets) ": ";
counter-increment: fieldsets;
}
form#payment fieldset fieldset legend {
color: #111111;
font-size: 13px;
font-weight: normal;
padding-bottom: 0;
}
form#payment ol li {
background: #b9cf6a;
background: rgba(255, 255, 255, .3);
border-color: #e3ebc3;
border-color: rgba(255, 255, 255, .6);
border-style: solid;
border-width: 2px;
-webkit-border-radius: 5px;
line-height: 30px;
list-style: none;
padding: 5px 10px;
margin-bottom: 2px;
}
form#payment ol ol li {
background: none;
border: none;
float: left;
}
form#payment label {
float: left;
font-size: 13px;
width: 110px;
}
form#payment fieldset fieldset label {
background: none no-repeat left 50%;
line-height: 20px;
padding: 0 0 0 30px;
width: auto;
}
form#payment fieldset fieldset label:hover { cursor: pointer; }
form#payment input:not([type=radio]), form#payment textarea {
background: #ffffff;
border: #FC3 solid 1px;
-webkit-border-radius: 3px;
font: italic 13px Georgia, "Times New Roman", Times, serif;
outline: none;
padding: 5px;
width: 200px;
}
form#payment input:not([type=submit]):focus, form#payment textarea:focus {
background: #eaeaea;
border: #F00 solid 1px;
}
form#payment input[type=radio] {
float: left;
margin-right: 5px;
}
/style
3、漂亮的表單生成。
需要一個(gè)HTML模板，用來(lái)做簡(jiǎn)單的表單數(shù)據(jù)錄入
HTML做個(gè)數(shù)據(jù)錄入的模板。如下參考：
1、首先新建一個(gè)html，點(diǎn)擊body/body中間，先填入表格內(nèi)容：
2.內(nèi)容可根據(jù)要求編寫(xiě)，示例代碼如下：
table中握
p style="text-align:center "功課表/p
tr
th語(yǔ)文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th數(shù)學(xué)/th
李斗td7:00-7:40/td
td7:50-8:30/td
/tr
tr
th英哪培磨文/th
td7:00-7:40/td
td7:50-8:30/td
/tr
/table
3.然后在head/head中間輸入樣式表的樣式，如下圖：
4.樣式也可以根據(jù)個(gè)人需要設(shè)置，設(shè)置單元格的寬度高度，合并單元格，位置，顏色等，示例代碼如下：
style type="text/css"
body
{
width:340px;
height:800px;
}
table
{
border-collapse:collapse;
}
th,td
{
width:100px;
height:40px;
border:1pxsolidblack;
font-size:12px;
text-align:center;
}
/style
5.注意，此代碼“table的意思是表”的含義是將表邊框合并為單個(gè)邊框以合并相鄰的更改。
6.預(yù)覽結(jié)果如下圖所示，一個(gè)制作簡(jiǎn)單的HTML模板。
好看的表單模板源代碼的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于html表單模板源代碼、好看的表單模板源代碼的信息別忘了在本站進(jìn)行查找喔。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
