表单代码、标签及属性

表单标签及属性实例      

 表单代码、标签及属性

 

一、基本架构

       <form action=" 接收方URL地址"method="提交方式">...</form>

                 name="表单名称"  

                 action="接收方URL地址"

                 method="提交方式"： get 发送小量的内容 

                                                     post发送大量的内容，比较安全。

 

二、文件型表单

          <form name=""action="" method=""><input type="类型"name="资料名"value="预设值"><input>...</form>

           <input >表单选项属性：

                  type="栏位类型"：

                                username    单行输入文本           textarea         多行文字输入

                                submit         提交按钮                 imput             图形按钮

                                checkbox     复选按钮                 radio              单选钮

                                 reset           重设按钮                 password       密码

                                 hidden         隐藏栏位

                   name="资料栏名"， P.S.若type为submitⅱreset  则name不必设定 。

                   value="文件上的预设值"

                   size="设定栏位的宽度"

                   maxlength="限制最大输入字串的长度"

                   type=checkbox checked   预设

                   type=radio checked      初值

                   type=image src="图档名"

                   type=image align="图文对齐"：

                            top    文字对齐图片之顶端    middle   文字对齐图片之中间

                            buttom 文字对齐图片之底部

                   实例1，单行文本、提交按钮、重设按钮三种常用的表单 

                            代码：

<form action=""method="">
   <input type=""name="username"value="">
  <input type="submit"name=""value="提交">
  <input type="reset"name=""value="重设">
</form>

                            效果：

  

                   实例2 ，复选框                           

                            代码：

<form action="form.asp" method="post">
   爱好 ：
  <input type="checkbox"name="01"vaiue="足球">
   足球
  <input type="checkbox"name="02"vaiue="篮球">
   篮球
  <input type="checkbox"name="03"vaiue="跳高">
   跳高
  <input type="checkbox"name="04"vaiue="游泳">
   游泳
  <input type="checkbox"name="05"vaiue="其它">
  其它
  <input type="submit"name="提交"vaiue="提交">
</form>

                            效果：

 

 

  三、选择式表单 <form action="" method=""><select>

                           <option><option>...</select></form>

        <select>表单选项属性：

                    name="资料栏位名"

                    size="个数"

                    multiple   多重选项

         <option>表单选项属性：

                   value="传回值"

                   selected  预先选取的选项

四、多列输入文字区表单

       <form action="" method=""><textarea name="变数名" cols="字元数"rovs="列数">文字信息</textarea>

                   <input type="submit"vaiue="提交"></form>

              <textarea>表单选项属性： 

                  name=变数名称

                  cols=字元数

                   rows=列数

                   wrap="换行"：

                   off      表输入的文字超过栏宽时，不会自动换行（预设值）

                   virtual  表输入的文字在超过栏宽时会自动换行

                  <textarea>输入区设定预设字串</textarea>

                  实例3，多行信息框

                            代码：

<form action="form.asp"method="post">

  <textarea name="textarea"cols="50"rovs="10">请填写您的信息</textarea>

  <input type="submit"vaiue="提交">

</form>

                            效果：

 

     

相关连接：表单标签及属性实例