表单

表单元素

1  form   表单

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

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

　　

• label  标签为 input 元素定义标注

  　　<input type="checkbox" name="" id="a"/>

  　　<label for="a">……</label>

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

 

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

  　　<input type="checkbox" name="" checked/>

　　　<input type="radio" name="" checked/>

 

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

  　　<input type="checkbox" name="" disabled/>

 

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

效果图:

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

    .text1{
        width: 200px;
        height: 40px;
        background: url(tianqi.gif) 0 center no-repeat;
    }
    .text1 input{
        width: 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;
    }