HTML表单的按钮形式

1、打开Dreamweaver软件，鼠标左键选择新建【HTML】，在代码窗口上，修改网页title标签，比如表单中添加按钮，如下图所示。

2、接着，在【设计】窗口中，鼠标左键单击菜单【插入】下的【表单】，如下图所示。

3、在【设计】窗口上，左键单击菜单【插入】下的【表单】的【文本域】，并在d出的而窗口中，设置文本的参数，如名称等，如下图所示。

4、接着，左键单击菜单【插入】下的【表单】的【按钮】，如下图所示。

5、然后，在d出的按钮设置窗口上，设置按钮的参数，如按钮的名称等，如下图所示。

6、最后，鼠标左键单击【实时视图】窗口，可以看到制作好的添加按钮的表单，可以在表单中输入文字，单击按钮，查看显示效果，如下图所示。

表单是网页中提供的一种交互式 *** 作手段，它主要分为两部分：一是用HTML源代码描述的表单，可直接通过插入的方式添加到网页中；二是提交后的表单处理，需要调用服务器端编写好的脚本对客户端提交的信息作出回应。在HTML中，只要插入表单标记<form></form>即可把表单插入到网页中。表单标记的部分属性如下：

属性

说明

name

设置表单名称

method

设置表单发送的方法，可以是“post”、“get”

action

设置表单处理程序

enctype

设置表单的编码方式

target

设置表单显示目标

一、信息输入

信息输入是表单 *** 作的主要内容，用户在表单控件中输入必要的信息，发送到服务器请求响应，然后服务器将处理结果返回给用户。<input>是表单中输入信息常用的标记，其基本语法为：

<form action="">

<input name="" type=""/>

</form>

在<input>标记中，name属性用于显示控件名称，type属性用于设置插入的控件类型。控件类型有如下几种：

1.文本控件

1）文本框——text

<input>标记的type属性值设置为text，即可插入表单中的单行文本框。输入的信息在文本框中单行显示

2）密码框——password

<input>标记的type属性值设置为password，即可插入表单中的密码框。在密码框中输入的内容，将会以小圆点的形式显示

3）文字域——textarea

在表单中插入文字域，只要插入成对的文字域标记<textarea></textarea>即可。文字域可用来输入多行文本，行间可换行

2.按钮

1）复选框——checkbox

<input>标记的type属性值设置为checkbox，即可插入表单中的复选框，其中的id为可选框

2）单选按钮——radio

<input>标记的type属性值设置为radio，即可插入表单中的单选按钮。在选中状态，按钮中心有一个小圆点

3）标准按钮——button

<input>标记的type属性值设置为button，即可插入表单中的标准按钮。按钮中的“value”值为显示在界面上时按钮的名称。

4）提交按钮——submit

<input>标记的type属性值设置为submit，即可插入表单中的提交按钮。当用户填完表单需要提交信息时，使用表单中的提交按钮进行提交

5）重置按钮——reset

<input>标记的type属性值设置为reset，即可插入表单中的重置按钮。当用户填完信息后，对自己填过的信息不满意时，可使用重置按钮，重新输入信息。

3.其它控件

1）文件域——file

<input>标记的type属性值设置为file，即可插入表单中的文件域。在文件域中可以添加整个文件

2）隐藏域——hidden

隐藏域在网页中对用户是不可见的，用户提交表单时，隐藏域中的信息也一起被提交。在<input>标记中将type属性值设为hidden即可插入表单中的隐藏域。

3）下拉菜单<select>和列表框<option>

在表单中插入下拉列表，只要插入成对的<select></select>，其中嵌套<option>即可

步骤如下：

1、启动Dreamweaver，ctrl+n新建html文档；

2、设计视图，点击插入菜单--表单--表单命令，下图虚线区就是表单区域；

3、点击表单区域，点击插入菜单---表单--按钮命令；

4、输入标签文字提交，点击确定；

5、属性面板可查看默认动作为提交表单；

6、再次点击表单区域，点击插入菜单---表单--按钮命令；

7、输入标签文字重置，点击确定；

8、点击该按钮，属性面板动作修改为重设表单；

9、ctlr+s保存网页，按F12调试即可。

---