个性化表单五技巧

技巧

想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧:

  1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入 代码到 <textarea> 中,一切就会变得简单多了,如:

<textarea name=textarea wrap=virtual rows=2 cols=22 >Input English..</textarea>

  类似的,可以加入代码到<input>。

  2、表单输入单元点击删除:本列同上则作用类似,只是使用鼠标上略有变化,需要点击而不像上则的只要鼠标覆盖。如:

<input type=text name="address" size=19 value="Enter,e-mail...">

  点击输入单元后,提示信息会删除,是不是很方便。

  3、表单输入单元的边框设置:更改传统的表单单元边框,会让你的主页生色不少。如:

<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">

  其中"style=***"为左右上下和背景色设置,适用于其它单元,请读者亲自试试。

  4、表单输入单元的文字设置:表单中单元的字体是可以修改的,如:

<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px >

  其中"style=***"为字体和字大小设置。

  5、修改表单属性为弹出窗口:大多数表单激活后,会在当前页面中打开,影响正常浏览。不如修改一下,如:

<form method=POST action=url target=_blank>

  其中"target=_blank"为控制在弹出窗口打开。

时间: 2024-10-02 13:49:54

个性化表单五技巧的相关文章

浅议Web网页Form表单设计技巧

web|技巧|设计|网页 "输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系."– <HTML权威指南> Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致.输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为. 表单布局 考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名.地址.付费信息等),垂直对齐的标签和输入框可以说是

完全深入学习Bootstrap表单_javascript技巧

前言:由于表单的元素比较多,因此将Bootstrap的表单单独做个总结,表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 一.基础表单 <form role="form"> <div class="form-group"> <label for="exampleInpu

第一次接触神奇的Bootstrap表单_javascript技巧

本篇将主要介绍Bootstrap表单的使用技巧.  1.Bootstrap基础表单 表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 我们先来看一个基础表单: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础表单</title> <link rel=&quo

网页Form表单设计技巧

"输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系."– <HTML权威指南> Web 应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致.输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为. 表单布局 考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名.地址.付费信息等),垂直对齐的标签和输入框可以说是最佳的.每对标签和输入框垂

Ajax+PHP 边学边练之四 表单_php技巧

谈到Form就涉及到一个发送请求方式问题(GET和POST),对于GET和POST的使用和区别在本文就不详细说明了,一般对于Web开发由于POST传值为隐式且传输数据量较大所以比较常用.在本例中对functions.js进行下修改,将创建XMLHttp对象程序创建为一个函数processajax. 复制代码 代码如下: function processajax (serverPage, obj, getOrPost, str){ //将创建XMLHttpRequest对象写到getxmlhttp

浅谈php提交form表单_php技巧

处理GET请求 实现的功能是输入姓名后页面显示"Hello XXX" 创建html文件hello.html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>欢迎</title> </head> <body> <form action="hell

如何防止回车(enter)键提交表单_javascript技巧

如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了. 如果在页面中按Enter键会自动提交的话,可以设置返回值防止自动提交如<input id="q" name="q" type="text" onkeypress="javascript:return gosearch();&q

基于jQuery通过jQuery.form.js插件使用ajax提交form表单_javascript技巧

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如:

深入学习Bootstrap表单_javascript技巧

本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面写的比较详细还给出了例子,这里总结一下重点方便记忆. 一.表单布局 1.垂直表单(默认)         向父 <form> 元素添加 role="form".         把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的.         向所有的文本元素 <inpu