html提交按钮代码

html-css014

html提交按钮代码,第1张

<html>

<head>

<title>管理员登录</title><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<script language="JavaScript" type="text/javascript">

<!--

function CheckForm()

{

if(document.Login.UserName.value=="")

{

alert("请输入用户名!")

document.Login.UserName.focus()

return false

}

if(document.Login.Password.value == "")

{

alert("请输入密码!")

document.Login.Password.focus()

return false

}

if (document.Login.CheckCode.value==""){

alert ("请输入您的验证码!")

document.Login.CheckCode.focus()

return(false)

}

}

//-->

</script>

<style type="text/css">

<!--

BODY{FONT-FAMILY: 宋体FONT-SIZE: 9pt<br>text-decoration: noneline-height: 150%<br>background-color: #FBFDFF}

TD{FONT-FAMILY:宋体FONT-SIZE: 9pt}

Input{FONT-SIZE: 9ptHEIGHT: 20px}

Button{FONT-SIZE: 9ptHEIGHT: 20px}

Select{FONT-SIZE: 9ptHEIGHT: 20px}

.border{border: 1px solid #CCCCCC}

.title{background:#f6f6f6}

.STYLE4 {font-size: 36px}

-->

</style>

<script language="JavaScript" src="../inc/js/keyboard.js" type="text/javascript"></script></head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="477" height="208" class="border" align="center" cellpadding="0" cellspacing="0" >

<form action="login_ck.asp" method="post" name="Login" target="_parent" id="Login" onSubmit="return CheckForm()">

<tr>

<td height="80" colspan="3" align="center"><font class="STYLE4">用户登陆</font></td>

</tr>

<tr>

<td height="92" align="center"></td>

<td align="center">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">

<tr>

<td width="185" align="right" height="25"><span class="stylefont">用户名:</span></td>

<td width="268" align="left"><input name="UserName" type="text" id="UserName" size="20" maxlength="16" style="width:160px" /></td></tr>

<tr>

<td width="185" align="right" height="25"><span class="stylefont">密 码:</span></td>

<td width="268" align="left"><input name="Password" type="password" size="16" maxlength="16" style="width:160px" /> </td>

</tr>

<tr>

<td width="185" align="right" height="25"><span class="stylefont">验 证 码:</span></td>

<td width="268" align="left"><input name="CheckCode" size="16" maxlength="4" style="width:108px" /> <img src="Admin_GetCode.asp" alt="" /></td></tr>

</table>

</td>

<td align="center"></td>

</tr>

<tr>

<td height="60" colspan="3" align="center">

<input type="submit" name="Submit2" value=" 登 陆 ">

<input type="reset" name="Submit" value=" 重 置 "></td>

</tr>

</form>

</table></body>

</html>

1.首首先我们要提交一个HTML页面的数据,需要一个按钮,我们常见的按钮有三种,分别是普通按钮、提交按钮、重置按钮,提交页面需要用到是提交按钮,提交按钮只要通过将input标签的type值设置为submit,如果我们需要给这个按钮命名的话,就添加一个value属性,属性值为你想设置的按钮名。2.当然,我们只是添加一个提交按钮,是没有办法传输数据的,这个时候,我们需要用到form标签,我们需要将需要传输的数据都包裹在form标签里面,然后我们在form标签里加上action属性,action属性的值为要跳转的页面的路径(关于页面路径,可以参考“如何指定图片路径”),此时我们点击提交按钮就可以实现页面的跳转了。3.接下来我们设置一下隐藏域,将input标签的type值设置为“hidden”,value值为需要存放的ID信息,最后设置一下name值即可。4.此时我们的提交方式是默认为“get”,即form标签中的method属性的值默认为“get”,我们也可以设置为“post”。此时我们需要了解一下关于get和post提交方法的区别,比较直观的一点就是,get请求的数据会附在URL之后,而post把提交的数据则放置在是HTTP包的包体中,还有就是post请求会比get请求的传送数据量大,安全性高。5.最后我们运行一下页面,然后点击提交按钮,跳转到另一个页面。

拓展:HTML是什么?

Html是超文本标记语言,是用来描述web文档的一种标记语言。使用标签作为页面的开始和结束部分:1、html通常被称为静态网页;2、HTML是带html或Htm扩展名的文件;3、HTML的一些标签代码规则将内容呈现在浏览器中;4、HTML可以使用记事本创建,并以.html或.htm为扩展名保存。