表单

表单元素

1 form 表单

2 <input type="…… " name="" value="" />

text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏

label 标签为 input 元素定义标注

　　　这样点击后面的文本时候，前面选择框就会被选中或者取消选中。

checked 在页面加载时默认选定的 input 元素。

disabled 属性规定应该禁用 input 元素。

select/option 下拉选框

　　对高度的支持不兼容；

textarea 文本域

　　各个浏览器下的默认滚动条显示不兼容(ie默认就有滚动条，给textarea加overflow:atuo解决这个问题)

　　css3新增 resize 调整尺寸属性(textarea边框是可以任由用户拖动的，为了布局不至于混乱，给textarea加resize:none使用户不能缩放textarea的大小)；

3. 表单示例

<form>
    文本框：<input type="text"/><br/><br/>
    密码框：<input type="password"/><br/><br/>
    隐藏：<input type="hidden"/><br/><br/>
    上传文件：<input type="file"/><br/><br/>
    单选框： <input type="radio" name="gender" id="female"/><label for="female">男</label> 
             <input type="radio" name="gender" id="male"/><label for="male">女</label> 
             <br/><br/>
    重置：<input type="reset" value="重置"/><br/><br/>
    提交：<input type="submit" value="提交"/><br/><br/>
    按钮：<input type="button" value="按钮"/><br/><br/>
    图片：<input type="image" value="图片" src="tianqi.gif"/><br/><br/>
    复选框：<input type="checkbox" id="singing" checked/><label for="singing" >唱歌</label>  
            <input type="checkbox" id="dancing" disabled/><label for="dancing" >跳舞</label> 
            <input type="checkbox" id="pingpong"/><label for="pingpong">打羽毛球</label>
            <br/><br/>
    下拉框：<select>
                <option>1997</option>
                <option selected>1996</option>
                <option>1995</option>
                <option>1994</option>
            </select>
            <br/><br/>
    文本域：<textarea></textarea>
</form>

效果图：

4.IE6下input背景滚动(表单兼容性问题)

在input里面加张图片

    .text{
         200px;
        height: 40px;
        background: url(tianqi.gif) 0 center no-repeat;
    }
<input type="text" name="" class="text"/><br/><br/>

效果图:

这样是实现了在文本框左边加了张小图片，可是不停输入文本的话，在ie6下，小图片会滚动不见了。为了解决这个问题，在外面包一层div来模拟这个效果。代码如下

    .text1{
         200px;
        height: 40px;
        background: url(tianqi.gif) 0 center no-repeat;
    }
    .text1 input{
         200px;
        height: 40px;
        background: none;
    }
<div class="text1">
    <input type="text" name="" />
</div>

小图片在作为div的背景，这样就解决问题了。

效果图跟上面的是一样的。

5.表单默认样式重置

    form{
        margin: 0;
    }
    input,textarea{padding: 0;}
    textarea{
        resize:none;
        overflow: auto;
    }