Dreamweaver 表单

表单是Web网页的重要组成元素之一，通过表单可以实现动态数据的传输和交换效果。表单是数据库的输入窗口，在设计网页时为了满足动态数据的交互需求，需要使用表单来处理这些数据。

本章节介绍4种常见的表单控件插入方式，分别是：文本域（即单行文本框）、文本区域（即多行文本框）、单选框、多选框。其他表单控件的插入方式大体相同。如果你想掌握更多HTML表单的知识，请访问我们的HTML教程关于表单的知识。

一、使用form标记

1. form标记出现在任何一个表单窗体的开始，其功能是设置表单的基础数据。使用form标记的语法格式如下所示。

     <form action="" method="post" enctype="application/x-www-form-urlencoded" name="form1" target="_parent">

   name：表单的名字；

   method：数据的传送方式

   action：处理表单数据的页面文件

   enctype：传输数据的MIME类型

   target：处理文件的打开方式。

2. 有如下两种传输数据的MIME类型：

   application/x-www-form-urlencode：默认方式，通常和post一起使用。 

   multipart/form-data：上传文件或图片时的专用类型。

3. 具体操作如下：

   新建一个HTML空白页；

4. 在菜单栏选择’插入‘----’表单‘----’表单‘

   

5. 在’属性‘面板选择需要的参数，如下图：

   

二、使用文本域

1. 文本域的功能是收集页面的信息，包含了获取信息所需的所有选项。例如，在会员登录中需要输入用户名文本字段和登录口令字段。 

   文本域功能是通过标记<input>实现的，具体语法格式如下所示：

     <label>我们的数据

     <input type="类型" name="文本域" id="标识" >

     </label>

   type：文本域内的数据类型；

   name：文本域的名字；

   id：文本域的标识

2. 具体操作如下：

   新建一个HTML空白页

3. 在菜单栏中选择’插入‘---’表单‘---’文本域‘

   ​

4. 在弹出的’输入标签辅助功能属性‘中输入ID和标签等

   

5. 效果如下：

   

6. 选中表单，在’属性‘面板上设置下图中的参数：

   

7. 选中文本域，在’属性‘面板中设置相应的参数，见下图：

   

8. 按F12预览，效果如下：

   

三、使用文本区域

1. 新建一个HTML空白页

2. 在菜单栏选中，‘插入’----‘表单’---‘文本区域’

   

3. 在弹出的’输入标签辅助功能属性‘中输入ID和标签等

   

4. 效果如下：

   

5. 选中表单，在‘属性’面板设置相应的参数

   

6. 选中‘文本区域’，在‘属性’面板中设置相应的参数

   

7. 预览效果如下：

   

四、插入单选按钮

1. 单选按钮是指只能在选择时进行一项相关设置。其具体语法格式如下所示：

     <label>我们的数据

     <input type="radio" name="名字" id="标识" value="值">

     </label>

2. 复选框是指能够同时提供多项相关设置，用户可以随意选择。其具体语法格式如下所示：

     <label>我们的数据

     <input type="checkbox" name="名字" id="标识" value="值" >

     </label>

3. 具体操作如下：

   创建一个HTML空白页

4. 在菜单栏中选择’插入‘----’表单‘----’单选按钮‘

   

5. 在弹出的对话框’输入标签辅助功能属性‘输入ID和标签，标签输入’男‘

   

6. 重复操作，将标签改为’女‘

7. 效果如下：

   

五、插入复选框

1. 在菜单栏中选择’插入‘----’表单‘----’复选框‘

   

2. 在弹出的对话框’输入标签辅助功能属性‘输入ID和标签，标签输入’足球‘

   

3. 重复操作，在标签分别输入’篮球‘、’排球‘

   

4. 按F12预览，效果如下：

   

转载本站内容时，请务必注明来自W3xue，违者必究。