一、html submit与bottom按钮基本语法结构

1、html submit按钮
在input标签里设置type="submit"即可设置此表单控件为按钮。

submit按钮代码:

<input name="" type="submit" value="提交" /> 

2、html bottom按钮
在input标签里设置type="bottom"也是即可设置此表单控件为按钮。

bottom按钮代码:

<input name="" type="button" value="提交" /> 

二、html submit与bottom按钮区别

type=button 就单纯是按钮功能 
type=submit 是发送表单

但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

<input type="submit" name="b1" value="提交" onClick="bt_submit_onclick()"> 

执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

<input type="button" name="b1" value="提交" onClick="bt_submit_onclick()"> 

执行完onClick,跳转文件在 js文件里控制。提交需要onClick。

比如: 
1,onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。

2,button代码

<form name="form1" method="post" action="http://www.divcss5.com">
<input type="button" name="Button" value="按钮" onClick="submit()">
</form>

3,按钮HTML 代码

<input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="你的url""> 

三、html submit与bottom按钮美化css div布局

首先我们准备好按钮美化的按钮图片,并对input submit或bottom按钮控件内添加class样式即可,设置其按钮背景为美化图片,设置好边框为零,宽度和高度。

1、对html bottom按钮美化
1)、图片素材
可将图片另存为使用

2)、对应完整HTML源代码:

<!DOCTYPE html>
<html>
<head>
<title>button按钮美化 在线演示-www.divcss5.com</title>
<!-- www.divcss5.com -->
<style>
html{width:100%;height:100%;}
body{background:#fff;font-size:18px;font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
line-height:18px;padding:0px;margin:0px;text-align:center}
div{padding:18px}
img{border:0px;vertical-align:middle;padding:0;margin:0}
input, button{font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";border:0;
vertical-align:middle;margin:8px;line-height:18px;font-size:18px}
.btn{width:140px;height:36px;line-height:18px;font-size:18px;
background:url("bg26.jpg") no-repeat left top;color:#FFF;padding-bottom:4px}
</style>
</head>
<body>
<p>
<form id="form1" name="form1" method="" action="http://www.divcss5.com/" target="_blank">
<div>
<input type="button" class="btn" value="按钮" onmouseover="this.style.backgroundPosition='left -36px'"
onmouseout="this.style.backgroundPosition='left top'" />
</div>
</form>
</p>
</body>
</html>

2、对html submit按钮美化
1)、图片素材
可将图片另存为使用

2)、对应完整HTML源代码:

<!DOCTYPE html>
<html>
<head>
<title>submit按钮美化 在线演示-www.divcss5.com</title>
<!-- www.divcss5.com -->
<style>
html { width:100%; height:100%; }
body { background:#fff; font-size:18px; font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
line-height:18px; padding:0; margin:0; text-align:center; }
div { padding:18px }
img { border:0px; vertical-align:middle; padding:0px; margin:0px; }
input, button { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; border:0;
vertical-align:middle; margin:8px; line-height:18px; font-size:18px }
.btns { width:143px; height:40px; background:url("bg11.jpg") no-repeat left top; color:#FFF; }
</style>
</head>
<body>
<p>
<form id="form1" name="form1" method="" action="http://www.divcss5.com/" target="_blank">
<div>
<input type="submit" class="btns" onmouseover="this.style.backgroundPosition='left -40px'"
onmouseout="this.style.backgroundPosition='left top'" value="提交" />
</div>
</form>
</p>
</body>
</html>

html bottom html submit按钮表单控件与CSS美化的更多相关文章

  1. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  3. wicket基础应用(2)--wicket表单控件的使用

    该文可以转载,但转载必须注明作者,出处: 作者:lhx1026 出处:http://lhx1026.iteye.com/ 这一章介绍wicket表单控件的简单应用 1.Label控件 这个应该说是最常 ...

  4. 我教女朋友学编程Html系列(6)—Html常用表单控件

    做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...

  5. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  6. 第九课 表单及表单控件 html5学习4

    表单有由表单域.提示文本.表单3部分构成 一.表单控件 input 控件 1.<input />单标签2.input属性: 可以通过type属性变换形状 value默认值 name名称 c ...

  7. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  8. 表单控件 css的三中引入方式css选择器

    1. 表单控件: 单选框 如果两个单选的name值一样,会产生互斥效果 <p> <!--单选框--> 男<input type="radio" nam ...

  9. 认识HTML中表格、列表标签以及表单控件

    前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...

随机推荐

  1. maven编码 gbk 的不可映射字符解决办法

    出现这个问题修改一下pom文件的编译配置就好了. <plugin> <groupId>org.apache.maven.plugins</groupId> < ...

  2. PAT (Advanced Level) 1064. Complete Binary Search Tree (30)

    因为是要构造完全二叉树,所以树的形状已经确定了. 因此只要递归确定每个节点是多少即可. #include<cstdio> #include<cstring> #include& ...

  3. WEKA使用教程(经典教程转载)

    http://blog.csdn.net/yangliuy/article/details/7589306 WEKA使用教程(经典教程转载) 标签: lift算法csv数据挖掘class任务 2012 ...

  4. ural1470 UFOs

    UFOs Time limit: 2.0 secondMemory limit: 64 MB Vasya is a ufologist and his duties include observing ...

  5. windows矢量字体点阵数据的提取(转)

    源:windows矢量字体点阵数据的提取 问题参考:windows api 获取字库点阵的问题 1.提取原理 在windows系统当中提取矢量字体的字模有很多方法,下面介绍一种利用GetGlyphOu ...

  6. 用php自动发邮件的简单实现

    如何自动发送邮件? php自带mail方法,不过只能在linux下直接使用,windows下要配置smtp服务器,有点麻烦. 可以用一些现成的类来实现,比如很有名的phpmailer,功能很强大,代码 ...

  7. javascript 函数的基础知识

    1. Why JavaScript functions always return a value? I'm taking a course in JavaScript programming, an ...

  8. Linux启动时显示Grub命令行及修改

    1.在启动Linux系统时,如果/boot/grub/grub.cfg文件损坏或者不存在时,启动Linux时,就会有Grub命令行的提示. 如下操作,将系统自带的grub.cfg文件改名.重新启动系统 ...

  9. 缩进(Python很将就格式)

    空白在Python中是重要的.事实上行首的空白是重要的.它称为缩进.在逻辑行首的空白(空格和制表符)用来决定逻辑行的缩进层次,从而用来决定语句的分组.这意味着同一层次的语句必须有相同的缩进.每一组这样 ...

  10. ARM-LINUX学习笔记-(虚拟机linux串口终端以及USB程序下载,基于TQ2440)

    昨天安装了ssh服务之后今天在windows上用xshell登陆发现登录不上,原因是使用了virtualbox的NAT模式,在NAT模式下,客户机可以很方便地上网,但是想要链接宿主机就需要打开网络地址 ...