html表单标签简介

html表单标签

html表单用于收集不同类型的用户输入

1 form标签

常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
         method:请求方式：get 和post
         enctype:表示是表单提交的类型
                默认值：application/x-www-form-urlencoded  普通表单
                       multipart/form-data  多部分表单(一般用于文件上传)

     get:
       1.地址栏,请求参数都在地址后拼接 path?name="张三"&password="123456"
       2.不安全
       3.效率高
       4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
     post：
       1.地址栏：请求参数单独处理。
       2.安全可靠
       3.效率低
       4.post请求大小理论上无限。
使用情况：一般用于插入修改等操作                                       

1.1 input标签

type: 以下为type可能要取的值： 
      1.1   text 文本框  输入内容
      1.2   password  密码框   密文或者掩码
      1.3   radio 表示是单选，name必须一致；value：提交给服务器的数据
                  表示同一组中只能选中一个( checked ="checked" 表示选中)
      1.4  checkbox  表示多选 ，name必须一致，
                 表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
      1.5   file ：表示上传控件                
      以上具有输入性质的必须要有name属性,一开始写value表示是默认值(以后获取输入框的内容要根据name来取)   
     以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
      1.6 submit   提交
      1.7 reset   重置
      1.9 image   图片提交按钮
     以上所有input的属性： width 设置宽度，height 设置高度  border 设置边框
      1.10 button 普通按钮
      1.11 hidden  表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)

name属性：表单元素名字，只有name属性才能提交给服务器。     

1.2 select 元素

(下拉列表)

<select name="city">   <!--select标签添加该属性multiple="multiple"表示多选-->  
     <!--option表示下拉列表项-->
    <option value="北京">北京</option> 
     <!--selected="selected"表示选中该项-->
    <option value="上海" selected="selected">上海</option>
    <option value="广州">广州</option>
    <option value="杭州">杭州</option>
</select>

1.3 textarea元素

(文本域)

需要指定输入的区域位置大小

 <textarea cols="100" rows="5">  表示5行100列的区域可以输入内容，该元素没有value属性

3.1.4 示例及效果图如下

    <form action="" method="get">
                <table align="center">
                    <caption>
                        <h1>注册</h1></caption>
                    <tr>
                        <td align="right">用户名：</td>
                        <td><input type="text" name="username" value="bluesky" /></td>
                    </tr>
                    <tr>
                        <td align="right">密码：</td>
                        <td><input type="password" name="password" /></td>
                    </tr>
                    <tr>
                        <td align="right">确认密码：</td>
                        <td><input type="password" name="confirmpwd" /></td>
                    </tr>
                    <tr>
                        <td align="right">性别：</td>
                        <td>
                            <input type="radio" name="sex" value="男" />男
                            <input type="radio" name="sex" value="女" checked="checked" />女
                        </td>
                    </tr>
                    <tr>
                        <td align="right">爱好：</td>
                        <td>
                            <input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
                            <input type="checkbox" name="hobby" value="足球 " />足球
                            <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
                            <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td align="right">上传头像：</td>
                        <td>
                            <input type="file" name="upload" />
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td align="right">居住地：</td>
                        <td>
                            <select name="city">
                                <option value="北京">北京</option>
                                <option value="上海" selected="selected">上海</option>
                                <option value="广州">广州</option>
                                <option value="杭州">杭州</option>
                            </select>
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td align="right">个人介绍：</td>
                        <td>
                            <textarea cols="100" rows="5">
                     </textarea>
                        </td>
                    </tr>
                    </tr>
                    <tr>
                        <td></td>
                        <td align="center">
                            <input type="submit" value="注册" />
                            <input type="reset" value="重置" />
                        </td>
                    </tr>
                </table>
    </form>