网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > 表单美化 > 正文

轻松玩转花样表单

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务
="8" maxlength="8">
  • 下拉框文字颜色是红色的,字体是Verdana,大小是9pt,代码:
    <select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000">
    <option value="2" selected>yesky.com</option>
    <option value="1">redidea.net</option>
    </select>
  • 多行文本框了的字体是Verdana,有下划线,大小是9pt,代码:
    <TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right>underline css style</TEXTAREA>
  • 发送1和发送2按钮的文字不同,是因为发送1按钮使用了9pt的宋体文字,所以比较美观,发送1按钮的代码:
    <input type="submit" name="Submit" value="发送1" style="font-family:宋体; font-size: 9pt;">

  •   小结:只要我们对字体的样式熟悉了,就可以灵活多变,不一定要在标签里面使用style来定义,完全可以在<head>里定义,或者外部引用CSS文件,用到的时候引用一下就能达到预期的效果。

    1.2 背景颜色和图像样式的应用

      有很多时候,网页由于颜色的搭配,不得不对表单的背景颜色和图像样式进行设计,背景颜色利用background-color属性,背景图像利用background-image属性,颜色和图像同样能够得到意想不到的效果。

     样例13: 表单元素的背景展示


    复选 单选



      分析:



    1.3 边框样式的应用

      也许你觉得表单的边框过于死板,我们能否设计单线条,或者其它的边框样式呢?当然可以!

      和边框有关的属性有:边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-colr、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border,这里不作详细的讲述,请参考有关资料。

     样例14:
    8种边框形式的展示



    复选 单选

      分析:

      2、图像魔法

      图像,是网页的重要元素,能否应用到表单中呢?接下来,我们用图像来改造死板的表单,分两个部分来探讨:用图像代替按钮、用背景图美化表单元素。

      2.1 用图像代替按钮


    由于默认的表单按钮太丑陋,绝大多数的网站采用了图像按钮,那么,我们通过两个实例来看看怎样实现的:

    样例16
    :用图像代替提交按钮:

      当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是:
    <input type="image" name="..." src="url" width="" height="..." border="...">

      除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样的,例如:

      是不是只要用图片就可以代替所有的按钮呢?是的,不过,不是上面这么简单了,必须加上事件函数,不然的话,图片都是提交按钮,不能完成复位等功能,看看下面的例子就知道了:

    样例17
    :用图片代替所有的表单按钮:
    注意:

    • 文本框背景是黑色的,字体是白色的,代码:
      <input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000">
    • 口令框背景是灰色的,代码:
      <input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999">
    • 单选和复选按钮的背景是红色的,代码:
      <input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000">
      <input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000">
    • 下拉选择框的选项是丰富多彩的背景,代码:
      <select name="select2" size="1">
      <option selected style="background-color: #FF0000">yesky.com</option>
      <option style="background-color: #0000CC">redidea.com</option>
      <option style="background-color: #009900">chinabyte.com</option>
  • 上一篇资讯: HTML表单(Forms)
  • 设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
    版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师