HTML 【表单】

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分： 表单标签、 表单域、表单按钮。

表单标签

< form  action = " "  method = "post" >         < /form>

                                                     用于申明表单，定义采集数据的范围，也就是<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。

                                                                      -- action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.

-- method=get或post指明提交表单的HTTP方法

<form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复；name可重复；get提交有长度限制，并且编码后的内容在地址栏可见，post提交无长度限制，且编码后内容不可见。

 

表单元素

 

一 文本类

 

1 文本框  

            是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等

 < input  type = " text " />

                                 < input type="text" name="..." size="..." maxlength="..." value="...">

 

                                -- type="text"     定义单行文本输入框；

                                -- name               定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                                -- size                  定义文本框的宽度，单位是单个字符宽度；

                                -- maxlength       最多输入的字符数。

                                -- value               文本框的初始值

                              例

                                   <input type="text" name="example1" size="20" maxlength="15" />

2 密码框

          用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

    < input  type = "password" />

 

                               -- <input type="password" name="..." size="..." maxlength="...">

 

                               --type="password"     定义密码框；

                               -- name                       密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                               -- size                          密码框的宽度，单位是单个字符宽度；

                               -- maxlength               最多输入的字符数。

                               -- value                       文本框的初始值

                            例

                                <input type="password" name="example3" size="20" maxlength="15">

3 文本域

            也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<  textarea >   < / textarea >    

 

                                         <TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>

 

                                        --name         定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                                        -- cols           定义多行文本框的宽度，单位是单个字符宽度；

                                        -- rows         定义多行文本框的高度，单位是单个字符宽度；

                                        -- wrap         定义输入内容大于文本域时显示的方式，可选值如下：

                                                        默认值是文本自动换行,而数据在被提交处理时自动换行的地方不会有换行符出现；

                                                        Off，用来避免文本换行，必须用Return才能将插入点移到下一行；

                                                        Virtual，允许文本自动换行。

                                                       Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

                                         例

                                           <TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>

4 隐藏域

           用来收集或发送信息的不可见元素，访问者隐藏域看不见。当表单被提交时将信息发送到服务器上。

 < input  type = " hidden " / >

 

                                             <input type="hidden" name="..." value="...">

 

                                             -- type="hidden"   定义隐藏域；

                                             -- name                  定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                                             -- value                  性定义隐藏域的值

                                           例

                                              <input type="hidden" name="ExPws" value="dd">

二 按钮类

 

1 一般按钮  

              一般按钮用来控制其他定义了处理脚本的处理工作。

< input type = " button " / >

 

                                          <input type="button" name="..." value="..." onClick="...">

 

                                         -- type="button"   定义一般按钮；

                                         -- name                  定义一般按钮的名称；

                                         -- value                  定义按钮的显示文字；

                                         -- onClick               也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

                                    例 

                                        <input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">

2 提交按钮 

            提交按钮用来将输入的信息提交到服务器。

< input type = " submit " / >

 

                                          <input type="submit" name="..." value="...">

 

                                       -- type="submit"   定义提交按钮；

                                       -- name                  定义提交按钮的名称；

                                       -- value                  定义按钮的显示文字；

                                     例

                                       <input type="submit" name="mySent" value="发送">

3 重置按钮

             用来重置表单。

< input type = " reset " /  >

 

                                           <input type="reset" name="..." value="...">

 

                                         -- type="reset"  定义复位按钮；

                                         -- name              定义复位按钮的名称；

                                         -- value              定义按钮的显示文字；

                                        例

                                          <input type="reset" name="myCancle" value="取消">

4 图片按钮  

                把图片作为提交按钮

< input type = " image " / >

                                         

                                           <input  type="image" src=" "  / >

 

                                         -- type="image"    定义图片按钮

                                         -- src                      图片地址

 

  -- disabled，使按钮失效；enable，使可用。

 

三 选择类

 

1 单选框

          访问者在单选项中选择唯一的答案.

 < input  type = " reido " / >

 

                                            <input type="radio" name="..." value="..." checked = "checked" >

 

                                         --  type="radio"             定义单选框；

                                         --  name                         定义单选框的名称，分组

                                         -- value                          定义单选框的值，给程序看的

                                         -- checked="checked"   定义默认选项

                                      例

                                        <input type="radio" name="sex" value="1" checked="checked" id=" nan " />

                                        <label  for = "  nan "> 男 </ label>                                                               -- 点击字符“ 男 ” 也能选中按钮 

                                        <input type="radio" name="sex" value="0"  id=" nv " />

                                        <label  for = "  nan "> 女 </ label>

2 复选框

              在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

< input  type = "checkbox " / >                                           

                                           <input  type="checkbox" name="..." value="...">

 

                                       -- type="checkbox"     定义复选框；

                                       -- name                        定义复选框的名称，分组，每一个多选分一组；

                                       -- value                        定义复选框的值，给程序看的

                                    例

                                 <input type="checkbox" name="bao" id="bao1" value="b001" />
                                 <label for="bao1">香辣鸡腿堡</label>

                                  <input type="checkbox" name="bao"  id="bao2" value= "b002"/>

                                  <label for="bao2">劲脆鸡腿堡</label> 

                                  <input type="checkbox" name="bao"  id="bao3" value= "b003"/>

                                  <label for="bao3">深海鳕鱼堡</label> 

3 下拉选择框

                 允许你在一个有限的空间设置多种选项

< select >

 

     < option> - - -  < /option>

 

< /select >
       

                                         <select name="..." size="..." multiple>

                                                       ......

                                        <option value="..." selected>...</option>

                                                       ......

                                        </select>

 

                                      -- size              定义下拉选择框的行数；

                                      -- name           定义下拉选择框的名称；

                                      -- multiple       表示可以多选，按Ctrl可以多选,如果不设置本属性，那么只能单选；

                                      -- value            定义选择项的值；

                                      -- selected       表示默认已经选择本选项。

                                   例

                                  <select name="mySelt" size="3" multiple>

                                  <option value="1" selected></option>

                                  <option value="d2"></option>

                                  <option value="3"></option>

                                  </select>

4 文件上传框

              用户用来上传自己的文件，文件上传框看上去和其它文本域差不多，包含一个浏览按钮。访问者可以输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

   注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。

            表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码；

            表单的传送方式必须设置成POST。

 

< inpot  type ="file" / >

 

                                      <input type="file" name="..." size="15" maxlength="100">

 

                                   -- type="file"       定义文件上传框；

                                   -- name                定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；

                                   --size                    定义文件上传框的宽度，单位是单个字符宽度；

                                  -- maxlength         定义最多输入的字符数。

                               例

                                    <input type="file" name="myfile" size="15" maxlength="100">