• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 使用css美化html表单控件详细示例(表单美化)

使用css美化html表单控件详细示例(表单美化)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含css,html,表单控件,表单美化等相关知识,佚名 希望在学习及工作中可以帮助到您

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

1、html submit按钮

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

submit按钮代码:


html submit按钮效果截图

2、html bottom按钮

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

bottom按钮代码:


html botton按钮效果截图

二、html submit与bottom按钮区别

type=button 就单纯是按钮功能

type=submit 是发送表单

但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:

使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

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


比如:

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

2,button代码


按钮截图

3,按钮HTML 代码


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

1、对html bottom按钮美化

1)、图片素材

可将图片另存为使用

美化图片按钮素材

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


bottom美化效果截图

2、对html submit按钮美化

1)、图片素材

可将图片另存为使用

按钮图片素材 鼠标右键另存为使用

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


html submit美化后效果截图

您可能想查找下面的文章:

  • html、css和js注释规范用法小结
  • HTML+CSS项目开发经验总结(推荐)
  • CSS3文本阴影text-shadow属性详解
  • html/css基础篇——html代码编写过程中的几个警惕点(必看)
  • 简单html以及css的用法详解
  • HTML基础知识——css样式表,样式属性,格式与布局详解
  • HTML基础必看——全面了解css样式表
  • Html/Css(新手入门第一篇必看攻略)
  • 全面了解html.css溢出
  • HTML (css样式规范)必看篇

相关文章

  • 2017-11-12后台管理UI
  • 2017-08-05Zen HTML Elements 使用zen coding的朋友可以收藏下
  • 2017-08-05W3C教程(12):W3C Soap 活动
  • 2017-08-05通过CSS样式实现的html背景色渐变效果
  • 2017-08-05HTML网页头部代码实例详解
  • 2017-08-05链接A的语义、写法和最佳实践
  • 2017-08-05Html中版权符号的字体选择问题(如何让版权符号更美观)
  • 2017-08-21动态加载html后,点击获取焦点
  • 2017-08-05如何去除表单的回车即提交即回车!=提交
  • 2017-08-05使用thead、tfoot、 tbody制作一个表格

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于html中meta的作用(网上搜集整理得来)
    • HTML thead 标签定义和用法详细介绍
    • HTML元素(标签)大全及使用介绍
    • CSS的SASS样式编程指南
    • HTML中相似的标签和属性的区别详解
    • 关于hr标记在各浏览器中的问题说明
    • html中的图片直接使用base64编码后的字符串代替
    • 网页制作中表格属性CellPad、CellSpace和Border描述及使用介绍
    • 使用a链接时如何阻止超链接跳转
    • 百度输入法开放API 宣称可随意移植使用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有