好看的表单模板源代码（html表单模板源代码）

qiaoqingyi 2023-04-13 971

默认

本篇文章给大家谈谈好看的表单模板源代码，以及html表单模板源代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、求用JAVASCRIP编写的验证表单，要源代码的，能运行再加分~
2、html 怎么设置漂亮的表单样式
3、需要一个HTML模板，用来做简单的表单数据录入

求用JAVASCRIP编写的验证表单，要源代码的，能运行再加分~

1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制

2.:js判断汉字、判断凯隐宏是否汉字、只能输入汉字

3:js判断是否输入英文、盯册只能输入英文

4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字

5:只能输入英文字符和数字

6: js email验证、js 判断email 、信箱/邮箱格式验证

7:js字符过滤,屏蔽关键字

8:js密码验证、判断密码

2.1: js 不为空、为空或不是对象、判断为空、判断不为空

2.2:比较两个表单项的值是否相同

2.3:表单只能为数字和"_",

2.4:表单项输入数值/长度限定

2.5:中文/英文/数字/邮件地址合法性判断

2.6:限定表单项不能输入的字符

2.7表单的自符控制

2.8:form文本域的通用校验函数

1. 长度限制

script

function test()

{

if(document.a.b.value.length50)

{

alert("不能超过50个字符！");

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. 只能是数字

script language=javascript

function onlyNum()

{

if(!((event.keyCode=48event.keyCode=57)||(event.keyCode=96event.keyCode=105)))

//考虑小键盘上携氏的数字键

event.returnvalue=false;

}

/script

input onkeydown="onlyNum();"

5. 只能是英文字符和数字

input onkeyup="value="/oblog/value.replace(/[\W]/g,"'')

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

6. 验证油箱格式

SCRIPT LANGUAGE=javascript RUNAT=Server

function isEmail(strEmail) {

(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. 屏蔽关键字(这里屏蔽***和****)

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 表单项不能为空

script language="javascript"

!--

function CheckForm()

{

if (document.form.name.value.length == 0) {

alert("请输入您姓名!");

document.form.name.focus();

return false;

}

return true;

}

/script

2.2 比较两个表单项的值是否相同

script language="javascript"

!--

function CheckForm()

if (document.form.PWD.value != document.form.PWD_Again.value) {

alert("您两次输入的密码不一样！请重新输入.");

document.ADDUser.PWD.focus();

return false;

}

return true;

}

/script

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

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("您的电话号码不合法！");

document.form.TEL.focus();

return false;

}

return true;

}

/script

2.4 表单项输入数值/长度限定

script language="javascript"

!--

function CheckForm()

{

if (document.form.count.value 100 || document.form.count.value

{

alert("输入数值不能小于零大于100!");

document.form.count.focus();

return false;

}

if (document.form.MESSAGE.value.length10)

{

alert("输入文字小于10!");

document.form.MESSAGE.focus();

return false;

}

return true;

}

//--

/script

表单验证实用代码如下：

1. 长度限制

以下为代码部分:

script

function test()

{

if(document.a.b.value.length50)

{

alert("不能超过50个字符！");

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. 只能是数字

以下为代码部分:

script language=javascript

function onlyNum()

{

if(!((event.keyCode=48event.keyCode=57)||(event.keyCode=96event.keyCode=105)))

//考虑小键盘上的数字键

event.returnvalue=false;

}

/script

input onkeydown="onlyNum();"

5. 只能是英文字符和数字

以下为代码部分:

input onkeyup="value=value.replace(/[\W]/g,'')

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

6. 验证邮箱格式

以下为代码部分:

SCRIPT LANGUAGE=javascript RUNAT=Server

function isEmail(strEmail) {

(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. 屏蔽关键字(这里屏蔽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 怎么设置漂亮的表单样式

html 设置漂亮的表单样式，以下是代码：

1、编写一个from表单

form id="payment"

fieldset

legend用户详细资料/legend

label for="name"用户名称：/label

input id="name" name="name" type="text" placeholder="请输入用户名" required autofocus

/li

label for="email"邮件地址：世猛配/label

input id="email" name="email" type="email" placeholder="example@163.com" required

/li

label for="phone"联系电话：/label

input id="phone" name="phone" type="tel" placeholder="010-12345678" required

/li

/ol

/fieldset

fieldset

legend家庭住址（收货地址）：/legend

label for="知唤address"详细地址：/label

textarea id="address" name="address" rows="1" required/textarea

/li

label for="postcode"邮政编码：/label

input id="postcode" name="postcode" type="text" required

/li

label for="country"国家：/label

input id="country" name="country" type="text" required

/li

/ol

/fieldset

fieldset

legend付费方式/legend

fieldset

legend信用卡类搜指型/legend

input id="visa" name="cardtype" type="radio"

label for="visa"中国工商银行/label

/li

input id="amex" name="cardtype" type="radio"

label for="amex"中国人民银行/label

/li

input id="mastercard" name="cardtype" type="radio"

label for="mastercard"中国建设银行/label

/li

/ol

/fieldset

/li

label for="cardnumber"银行卡号：/label

input id="cardnumber" name="cardnumber" type="number" required

/li

label for="secure"验证码：/label

input id="secure" name="secure" type="number" required

/li

label for="namecard"持卡人：/label

input id="namecard" name="namecard" type="text" placeholder="确定是否该卡用户！" required

/li

/ol

/fieldset

fieldset

button type="submit"现在购买/button

/fieldset

/form

2、编写css样式

style type="text/css"

/*分别定义HTML中和标记之的距离样式*/

html, body, h1, form, fieldset, legend, ol, li {

margin: 0;

padding: 0;

}

/*定义body标记样式*/

body {

background: #ffffff;

color: #111111;

font-family: Georgia, "Times New Roman", Times, serif;

padding-left: 20px;

}

/*定义付费内容的样式*/

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、漂亮的表单生成。

需要一个HTML模板，用来做简单的表单数据录入

HTML做个数据录入的模板。如下参考：

1、首先新建一个html，点击body/body中间，先填入表格内容：

2.内容可根据要求编写，示例代码如下：

table中握

p style="text-align:center "功课表/p

th语文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

th数学/th

李斗td7:00-7:40/td

td7:50-8:30/td

/tr

th英哪培磨文/th

td7:00-7:40/td

td7:50-8:30/td

/tr

/table

3.然后在head/head中间输入样式表的样式，如下图：

4.样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：

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的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。

6.预览结果如下图所示，一个制作简单的HTML模板。

好看的表单模板源代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html表单模板源代码、好看的表单模板源代码的信息别忘了在本站进行查找喔。

标签：好看的表单模板源代码 js css

海报

阅读

求用JAVASCRIP编写的验证表单，要源代码的，能运行再加分~

html 怎么设置漂亮的表单样式

需要一个HTML模板，用来做简单的表单数据录入

相关推荐

大话手游藏宝阁游戏交易平台(大话手游藏宝阁游戏交易平台大话手游官网)

全国统一追溯查询平台(全国统一追溯查询平台药品)

通信大数据怎么获取(通信话统数据哪里获取)

十大黄金软件app(十大黄金软件下载安卓)

传奇3手游源码(传奇3手游源码在哪)

小米浏览器怎么看保存的密码(怎样查看小米浏览器保存的密码)

交易虎手游交易平台魔域手游的简单介绍

编程猫nemo下载安装的简单介绍