如何用精美Jquery插件为你打造完美网页表单

标签：网页设计 Jquery网页表单主要是用来从用户那里收集一些必要的信息，是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息，也会给用户带来更好地使用体 验。基于这一点，很多设计师开始使用jQuery来创建网页表单。而使用jQuery表单插件会让你的网页表单脱颖而出。 为此，我们收集了一些不同类型的jQuery表单插件和读者分享。在下面这些jQuery表单插件中，有些能改变表单的外观并同时兼容各种浏览 器；有些用于表单验证并方便管理员和用户的 *** 作；还有一些则是非常流行的日历表单和下拉列表表单。我们希望这些插件能够有助于你的工作。 1、mcDropdown 一个允许用户选择下拉菜单的表单插件。2、高亮表单插件 高亮功能可以增加页面的可用性。 3、jqTransform 一个美化表单元素的风格插件。 4、让图片成为输入框的一部分 在输入框里可以嵌入图片。5、jQuery Impromptu 一个为用户提供更舒适输入方式的表单插件。

一、插入单行文本域或密码域

1. 点击鼠标，将光标定位在表单框线内，点击“插入”菜单，选择“表单”项，在d出的子菜单中选择“文本域”命令。

或者在“插入”面板中选择“表单”项，点击“文本字段”图标

点击“窗口”菜单，选择“插入”项，可以打开“插入”面板。

2. 点击“文本字段”图标后，d出“输入标签辅助功能属性”对话框：

3. 在“输入标签辅助功能属性”对话框中，各项的解释及应用方法如下：

（1）ID：指定了<input>元素的名称和ID号。名称和ID号是一致的。如输入“id1”，在“代码”视图中可以查看源代码：

<input type="text" name="id1" id="id1" />

（2）标签：表单控件的提示信息。如输入“提示信息”，在“代码”视图中可以查看源代码：

提示信息 <input type="text" name="id1" id="id1" />

（3）样式：说明“标签”内容的使用方式。分为三种情况：

第一情况：使用“for”属性附加标签标记。在“代码”视图中可以查看源代码：

<label for="id1">提示信息</label><input type="text" name="id1" id="id1" />

第二情况：用标签标记环绕。在“代码”视图中可以查看源代码：

<label>提示信息 <input type="text" name="id1" id="id1" /></label>

第三情况：无标签标记。在“代码”视图中可以查看源代码：

提示信息 <input type="text" name="id1" id="id1" />

（4）位置：说明“标签”内容所处的位置。分为两种情况：

第一种情况：在表单项前。上面的提示信息都是在表单项前。

第二种情况：在表单项后。在“代码”视图中可以查看源代码：

<input type="text" name="id1" id="id1" /><label for="id1">提示信息</label><label><input type="text" name="id1" id="id1" />提示信息</label><input type="text" name="id1" id="id1" />提示信息

（5）访问键：accesskey 属性。

（6）Tab 键索引：tabindex 属性。

4. 在“输入标签辅助功能属性”对话框中，单击“确定”按钮，文本字段就插入到文档中了。

二、设置或修改单行文本域或密码域的属性

1. 使用鼠标点击插入的单行文本域或密码域表单控件

2. 打开“文本字段”属性面板

文本域：指定了<input>元素的名称和ID号。名称是唯一的。

字符宽度：指定文本域的长度，默认值为24个字符左右。

最多字符数：允许用户输入的最大字符数目。

初始值：表单的默认值。

禁用<input>标签disabled属性。

只读：<input>标签readonly属性。

类型选择“单行”：插入单行文本域（type="text"）。

类型选择“密码”：插入密码域（type="password"）。

三、提示

将光标定位到表单的红色虚线围成的框内，按回车（Enter）键，可以添加多个单行文本域或密码域。

1、首先进入到作品的编辑页面，当作品中没有表单时，可以点击后方的添加页面，选择表单，就会出现很多表单的模板，模板可以进行修改。

2、点击输入框即可修改名称。

二、注意事项

1、建议不要轻易删除输入框，会把数据一并删除。

2、最后记得添加提交按钮，才可以提交信息

3、更改输入框后，需要更改类型，对应的类型正确时，才能填写信息。

---