DreamWeaver中表单的使用和电子邮件表单的制作

    先,看一下你将要做的电子邮件表单的最后界面,当然,这只是一个简单的例子,旨在抛砖引玉而已,相信您将做得更加漂亮或设计得更加有条理。

    接下来,就开始制作这个电子邮件表单:第一步:插入表单,用“Insert”——“Form”命令或选择对象面板Objects上的“Forms”中的黄色,此时将弹出一个红色虚框,这就是表单的外围,在下面讲到的表单元素必须位于红色的虚线框里才起作用。为了表单中的元素定位方便,再插入一个表格,至于表格的大小可自行控制,图中的表格是7行×2列的。 然后把第1、5、6和7这四行合并单元格。

    第二步:将文字输入表格中,到此为止,准备工作已经做好了。

    第三步:插入表单元素,在“您的姓名”边上的单元格中插入一个文本框,用“Insert”——“Form Object”——“Text Field”命令或在面板上选择图标。同样在下面的“邮件地址”、“主页”边上和“您的建议”下面的单元格中也分别插入一个文本框。选中一个文本框。

    参数的具体含义如下所示:“TextField”:文本框的名字,对于本例,可分别取名如“姓名”、“邮件地址”、“主页地址”和“意见”;“Char Width”:文本框显示在网页上的长度;“Max Chars”:最多能输入的字符长度;“Type”:共有三类,“Single line”表示单行文本,“Multi line”表示多行文本,“Password”表示密码框;“Init Val”:文本框中的初始值。

    当你选中“Type”中的“Multi line”类型时,属性面板又有所变化了。与前面的面板相对比,“Char Width”被“Num Lines”代替,表示文本的行数。“Wrap”是多行文本的外观参数,四个选项,你可以分别试试。现在文本框都已做好,下面要做“发送”和“清除”按钮了。

    第四步:在第七行的单元格里再插入一个边框Border=0的1行×2列的表格(用表格可以很方便地控制元素的位置),然后在单元格中插入按钮,使用“Insert”——“Form Object”——“Button”命令或选择蓝色图标,选中按钮,看看属性面板的变化吧。其中“Button Name”按钮的名称:“Lable”按钮上显示的内容,如例子中的“发送”和“清除”:“Action”按钮的类型,有三种:“Submit form”提交按钮和“Reset form”重置按钮、“None”普通按钮。在本例中用到了前两种即提交(发送)和重置(清除)按钮。

    第五步:这是最关键的一步,单击表单周围的红色虚框。图中“Form Name”表示表单的名称:“Action”表示表单提交后将由哪个程序来处理,这儿填入你的E-MAIL地址,格式如:mailto:你的E-MAIL地址:“Method”表示提交方法,有“Post”和“Get”两种,默认为Post.现在,你已经做好了一个简单的电子邮件表单,当然在这个例子里只用了表单的一部分元素,其它的表单元素还有复选框,在页面上显示为;单选框,在页面上显示为。这两个在表单中也是经常用到的元素,有关的属性可在属性面板上看到,在一组中复选框能同时选取多个,而单选框一组只能选中一个,将多个复选框(或单选框)定义为一组的方法是:将这几个复选框(或单选框)取相同名字。

时间: 2024-09-25 13:05:27

DreamWeaver中表单的使用和电子邮件表单的制作的相关文章

BootStrap智能表单实战系列(三)分块表单配置详解_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst

jQuery form 表单验证插件(fieldValue)校验表单_jquery

jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue

Form表单按回车自动提交表单的实现方法_javascript技巧

1.form表单中只有一个input标签,按回车键将自动提交表单 当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交. <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 如果不想让其自动提交可以这样做: 再添加一个<input type=

HTML5新增表单元素、属性、表单验证及增强的页面元素总结

 新增的表单元素与属性     新增属性         form属性         在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可,如:  代码如下 复制代码             <form method="get" id="test">             username:<input name="username" type="text" id="usern

JS调用表单验证,为什么return false表单依然submit?

表单提交前,都会有定义一个验证的方法以对用户提交的内容进行限定,今天写到了这个,但出现了一个好郁闷的东西,就是一点提交了,调用我自己写的一个CheckForm()方法时,我明明写了return false了,但它还是提交到服务器了,好不郁闷!然后仔细检查才发现,原来是漏了个return,下面先看出错的代码: <script src="../js/jquery-1.6.js" type="text/javascript"></script> &

假乱真的表单控件:美化原生表单控件

文章描述:这样的模拟需要在兼顾实现设计的同时,还要保证网站的性能和可用性.这时我不禁开始怀念那些看起来平凡却非常实用的原生表单控件.如果用他们几乎可以解决以上所有问题. 在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等.表单控件是web页面上重要的组成元素,具有非常高的功能性.交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现.可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

注册表单设计:修改密码的表单设计及整体体验

文章描述:修改密码的表单设计及整体体验. 2011年岁末先后爆出CSDN.天涯等站点的用户明文密码泄漏,大家纷纷忙着修改密码,不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全.对网站而言,希望用户能够定期主动去修改密码并保证一定的复杂度:但对用户来说,一般不到万不得已,通常不会经常修改密码.同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计及整体体验又是如何? 一.大型门户 1. 网易通行证 表单中的每个输入框均会给出有效性反馈,新密码的复

jQuery中验证表单提交方式及序列化表单内容的实现

 之前项目中使用的表单提交方式,使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中,下面有个不错的示例大家可以参考下 之前项目中使用的表单提交方式    使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中  代码如下: function addSubmit(){  $('#addForm').form('submit', {  url : _basePath + '/@Controller/@RequestMapping',  onSubmit : f