PHP入门 - - 07-->HTML的表单

一、<form>标签及其属性

        <from></form>标签对用来创建一个表单，即定义表单的开始和结束位置，<form>标签具有下面等属性。
       1. action属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。相对和绝对
       2. Method属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.
       3. Target属性用来指定服务器返回结果显示的目标窗口或目标帧。
       4. Title属性用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。
       5. Enctype属性指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：
                   1>. application/x-www-form-urlencoded（默认的设置）
                   2>. multipart/form-data

二、表单字段元素

  •   <input type=“submit”>               -- 提交     
  •   <input type=“reset”>                 -- 重置
  •   <input type=“text”>                   -- 文本框           属性：size（在文本框中显示的字的个数）、value、maxlength（最多可以输入的字数）、readonly（只读）、disabled
  •   <input type=“checkbox”>           -- 复选框           属性：checked
  •   <input type=“radio”>                 -- 单选框（name属性必须相同才为一个组，这样就只能选一个了）
  •   <input type=“hidden”>               --  隐藏
  •   <input type=“password”>           -- 密码框
  •   <input type=“button”>               -- 普通按钮
  •   <input type=“file”>                    -- 文件上传
  •   <input type=“image”>                -- 图片
  •   <select></select>    <option></option>     -- 下拉列表
                    <select>标签的属性：multiple、size、name        
                    <option>标签的属性：value、selected
<tr>
    <th><label for="gn" accesskey="s">下拉列表</label>(<u>s</u>)</th>
    <td>
          <select id="gn" name="gn">
                        <option value="0">--请选择--</option>
                        <option value="1">111111</option>
                        <option value="2">2222222</option>
                        <option>333333</option>
                        <option>4444444</option>
                        <option selected>55555555</option>
                        <option>66666666</option>
                    
          </select>
    </td> 
</tr>

          1>.如上面代码当，如果选111111时，提交后gn=1；如果选3333333，则gn=3333333。也就是说有value值则为value值，没有就是属性值。

          2>.的那个<select>设置了size="...."后，列表就成了带滚动条的了，显示的是size设置数字的个数。

  • <textarea></textarea>                -- 多行文本域
                   属性：cols、rows
  • <label>
                   属性：for、accesskey

                      如上代码中给<select>标签设置一个id，然后让<label>的for=id的值，accesskey为快捷键的字母

 

示例：

表单的示例

   代码：

        

  1 <html>
  2     <head>
  3         <title>表单的应用</title>
  4         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5 
  6     </head>    
  7 
  8     <body>
  9         <table border="1" width="500" align="center">
 10 
 11         <form name="frm" action="http://localhost/cms/login1.php" method="get" target="_blank" title="这是表单" enctype="multipart/form-data">    
 12             <caption>表单的应用</caption>
 13 
 14             <tr>
 15                 <th><label for="user" accesskey="u">文本域</label>(<u>u</u>)</th>
 16                 <td>
 17                     <input id="user" type="text" name="username" size="30" maxlength="10"  value="username">
 18                 </td>    
 19             </tr>    
 20 
 21             <tr>
 22                 <th>密码域</th>
 23                 <td>
 24                     <input type="password" name="pass" size="25" value="hello">
 25                 </td>    
 26             </tr>    
 27             <tr>
 28                 <th>复选框</th>
 29                 <td>
 30                     玩游戏 <input type="checkbox" checked name="del[]">
 31                     看电影 <input type="checkbox" name="del[]">
 32                     旅游<input type="checkbox" name="del[]">
 33                     看书<input type="checkbox" checked name="del[]">
 34                     写字<input type="checkbox" name="del[]">
 35                 </td>    
 36             </tr>    
 37 
 38             <tr>
 39                 <th>单选框1</th>
 40                 <td>
 41                     <input type="radio" name="sex" checked> 男
 42                     <input type="radio" name="sex"> 女
 43                     <input type="radio" name="sex">保密
 44                 </td>    
 45             </tr>    
 46             <tr>
 47                 <th>单选框2</th>
 48                 <td>
 49                     <input type="radio" name="sex1"> 男
 50                     <input type="radio" name="sex1" checked> 女
 51                     <input type="radio" name="sex1">保密
 52                 </td>    
 53             </tr>    
 54 
 55             <tr>
 56                 <th>上传文件</th>
 57                 <td>
 58                     <input type="file" name="picture">
 59                 </td>    
 60             </tr>    
 61 
 62             <tr>
 63                 <th><label for="gn" accesskey="s">下拉列表</label>(<u>s</u>)</th>
 64                 <td>
 65                     <select id="gn" name="gn">
 66                         <option value="0">--请选择--</option>
 67                         <option value="1">111111</option>
 68                         <option value="2">2222222</option>
 69                         <option>333333</option>
 70                         <option>4444444</option>
 71                         <option selected>55555555</option>
 72                         <option>66666666</option>
 73                     </select>    
 74                 </td>    
 75             </tr>    
 76 
 77 
 78             <tr>
 79                 <th>列表</th>
 80                 <td>
 81                     <select name="gn1" size=5>
 82                         <option value="1">111111</option>
 83                         <option value="2">2222222</option>
 84                         <option>333333</option>
 85                         <option>4444444</option>
 86                         <option>55555555</option>
 87                         <option>66666666</option>
 88                     </select>    
 89                 </td>    
 90             </tr>    
 91 
 92             <tr>
 93                 <th>多选列表</th>
 94                 <td>
 95                     <select name="gn1" size=5 multiple>
 96                         <option value="1">111111</option>
 97                         <option value="2">2222222</option>
 98                         <option>333333</option>
 99                         <option>4444444</option>
100                         <option>55555555</option>
101                         <option>66666666</option>
102                     </select>    
103                 </td>    
104             </tr>    
105 
106             <tr>
107                 <th>多行文本域</th>
108                 <td>
109                     <textarea cols="40" rows="6" name="message">在这里输入你的信息</textarea>
110                 </td>    
111             </tr>    
112             <input type="hidden" name="id" value="100">
113             <tr>
114                 <td colspan="2" align="center">
115                     <input type="submit" name="sub" value="提交">
116                     <input type="image" src="dl.gif">    
117                     <input type="reset">
118                     <input type="button" value="清空" onclick="document.frm.username.value=''" >
119                 </td>
120             </tr>
121         </form>    
122     </table>
123         <a href="" title="this is a link">aaaaa</a><br>
124         <b title="this is b tag">bbbbb </b>    
125     </body>    
126 </html>

 

 

 

 

 

 

 

posted @ 2013-09-13 16:54  不得不爱xxy  阅读(288)  评论(0)  编辑  收藏  举报