html、css、js入门-6：HTML的表单和框架

表单提提供了浏览器向服务器的数据传输通道，和从服务器获取数据的通道。

 

表单的作用:

    . 通过查看、填写并提交表单信息与服务器进行动态交互

    . 表单有两个基本部分

        -- 实现数据交互的可见的界面元素，比如文本框或按钮
 
        -- 提交后的表单处理

 
    .  界面元素

        -- 使用 <form> 元素创建表单
        -- 在<form> 元素中添加其他表单可以包含的控件元素

          

 

 

表单元素 <form>

  . 定义表单 : 使用成对的 <form></form> 标记

  . 主要属性
 
        -- action: 定义表单被提交时发生的动作，通常
            包含服务方脚本的URL(比如JSP、PHP)

        -- method: 指出表单数据提交的方式，取值为get 或者 post

        -- enctype: 表单数据进行编码的方式

 

<input> 元素

   . <input> 元素用于收集用户信息

   . 该元素是一个空标记,语法为: <input />

   . 主要元素

       -- type: 根据不同的 type 属性值，可以创建各种类型的输入字段，比如文本框、复选框等

       -- value:控件的数据
       -- name:控件的名称

 

 

 

文本框与密码框

    . 文本框:<input type = "text" />

    . 密码框:<input type = "password" />

    . 主要属性

        -- value 属性:由访问者自由输入的任何文本
        -- maxlength属性: 限制输入的字符数
        -- readonly 属性: 设置文本控件只读

      例如:
    
           页面显示:

          姓名:        mary
          密码:        ****

 

单选框和复选框

    . 单选框:  <input type="radio" />

    . 复选框:  <input type="checkbox" />

    . 主要属性

        -- value：文本，当提交form时，如果选中了此单选按钮，那么value就被发送到
            服务器
        -- name : 按钮分组

        -- checked: 设置选中

 

        性别:      ○女士  ○男士
        角色:      □超级管理员
                   □账单管理员

 

 

按钮:

    . 提交按钮: <input type="submit" />
       -- 传送表单数据给服务器端或其它程序处理

    . 重置按钮: <input type="reset" />

       -- 清空清单的内容并把所有表单控件设置为最初的默认值

    . 普通按钮: <input type ="button" />

       -- 用于执行客户端脚本

    . 主要属性
 
       -- value: 按钮的标题文本

 

 

隐藏域和文件选择框

    .  隐藏域: <input type="hidden" />
         -- 在表单中包含不希望用户看见的信息

    .  文件选择框: <input type="file" />
         -- 选择要上传的文件

 

<label> 元素

 . 语法: <label>文本</label>

 . 主要属性:
     -- for:表示与该元素相联系的控件的ID值

 . 作用:

     -- 将文本与控件联系在一起后，单击文本，效果就同单击控件一样

   <input type="checkbox" name="chkHid" id="chkHid" />
   <label for="chkHid">不要公开我的信息</label>

 

基础表单:

    定义基础表单

 

选项框

   . 两种: 下拉选项框和滚动列表
 
   . <select> : 创建选项框
       -- name :选项框命名
       -- size:大于1，则为滚动列表
       -- multiple:设置多选

   . <option>:选项
 
          -- value:选项的值
          -- selected:预先中

 

<textarea>  元素
 
     . 多行文本输入框
 
          -- <textarea>文本</textarea>

     . 主要属性:
 
          -- cols:指定文本区域的列数
          -- rows:指定文本区域的行数
          -- readonly:只读

 

 

为控件分组

     . <fieldset> 元素: 为控件分组
     . <legend> 元素: 为分组指定一个标题

     <fieldset>
           <legend>地址信息</legend>
           地址: <input type="text" /><br/>
           邮箱: <input type="text" />
     </fieldset>

 

      

 

框架

浮动框架的作用

   .浮动框架，有时称为内联框架，用于在一个html页面上引入其他资源

 

 

 
<iframe>  元素

   . 语法: <iframe src="URL"></iframe>
 
   . 主要属性

       -- src: 指定在<iframe> 中显示的文档的URL

       -- width/height: 指定框架的宽度和高度

   <iframe src="Rose.html" height="200" width="400">
   </iframe>