关于表单的两点交互体验改进技巧

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

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


Input English..

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

赞 (0)

相关推荐

  • 关于表单的两点交互体验改进技巧

    想必大家在页面都使用过表单,如果你对单调的表单控制单元不满意,不妨看看以下几条技巧: 1.表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <textarea> 中,一切就会变得简单多了,如: Input English.. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行

  • 表单的一些基本用法与技巧

    1. 用图像代替提交按钮 当只有一个提交按钮的时候,可以简单地实现,不用加事件函数,代码是: <input type="image" name="..." src="url" width="" height="..." border="..."> 除了标签改为input type="image"以外,其它的属性和<img>标签的属性是一样的.

  • 在Django框架中编写Contact表单的教程

    虽然我们一直使用书籍搜索的示例表单,并将起改进的很完美,但是这还是相当的简陋: 只包含一个字段,q.这简单的例子,我们不需要使用Django表单库来处理. 但是复杂一点的表单就需要多方面的处理,我们现在来一下一个较为复杂的例子: 站点联系表单. 这个表单包括用户提交的反馈信息,一个可选的e-mail回信地址. 当这个表单提交并且数据通过验证后,系统将自动发送一封包含题用户提交的信息的e-mail给站点工作人员. 我们从contact_form.html模板入手: <html> <head

  • JS+CSS实现的一种交互体验 表单页面

    JS+CSS实现的一种交互体验 @charset "gb2312"; /*元素初始值*/ html {background: #FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;} p{cursor: text;} h1,h2,h3,h4,h5,h6{font-size:100%;} o

  • 改进Django中的表单的简单方法

    首先,search()视图对于空字符串的处理相当薄弱--仅显示一条"Please submit a search term."的提示信息. 若用户要重新填写表单必须自行点击"后退"按钮, 这种做法既糟糕又不专业.如果在现实的案例中,我们这样子编写,那么Django的优势将荡然无存. 在检测到空字符串时更好的解决方法是重新显示表单,并在表单上面给出错误提示以便用户立刻重新填写. 最简单的实现方法既是添加else分句重新显示表单,代码如下: from django.ht

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

  • 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&

  • javascript表单域与json数据间的交互第1/3页

    包括对象中有集合属性.对象中引用其他对象属性: 复制代码 代码如下: /** **json对象数据设置到表单域中 */ function jsonObjectToForm(form, jsonObject){     for(i = 0, max = form.elements.length; i < max; i++) {         e = form.elements[i];         eName = e.name;         if(eName.indexOf('.') >

  • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

    AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

随机推荐