好看的表单模板源代码（html表单模板源代码）
本篇文章给大家谈谈好看的表单模板源代码，以及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) {
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. 屏蔽关键字(这里屏蔽***和****)
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
1)
{
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) {
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. 屏蔽关键字(这里屏蔽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
ol
li
label for="name"用户名称：/label
input id="name" name="name" type="text" placeholder="请输入用户名" 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"联系电话：/label
input id="phone" name="phone" type="tel" placeholder="010-12345678" required
/li
/ol
/fieldset
fieldset
legend家庭住址（收货地址）：/legend
ol
li
label for="知唤address"详细地址：/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"国 家：/label
input id="country" name="country" type="text" required
/li
/ol
/fieldset
fieldset
legend付费方式/legend
ol
li
fieldset
legend信用卡类搜指型/legend
ol
li
input id="visa" name="cardtype" type="radio"
label for="visa"中国工商银行/label
/li
li
input id="amex" name="cardtype" type="radio"
label for="amex"中国人民银行/label
/li
li
input id="mastercard" name="cardtype" type="radio"
label for="mastercard"中国建设银行/label
/li
/ol
/fieldset
/li
li
label for="cardnumber"银行卡号：/label
input id="cardnumber" name="cardnumber" type="number" required
/li
li
label for="secure"验 证 码：/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"现在购买/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
tr
th语文/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
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表单模板源代码、好看的表单模板源代码的信息别忘了在本站进行查找喔。
