一、form的各种元素及属性
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/*IE6下有外边距问题*/
form{margin:0;}
/*记住默认border 2px*/
input{margin:0;padding:0;}
/*一般只设置宽度,不设置高度*/
select{margin:0;}
/*resize:none;禁止用户调整尺寸 overflow:auto 溢出时才出现滚动条 outline:none;去掉焦点框,看需求*/
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}
form{border:1px solid red;}/*用于测试form之间的间隙*/
</style>
</head>
<body>
<form action="http://www.miaov.com/" method="get" target="_blank">
提交按钮:<input type="submit" value="提交OK" name="" />
<br/><br/>
文本框:<input type="text" name="" />
<br/><br/>
密码框:<input type="password" name="" />
<br/><br/>
单选按钮:
<input type="radio" name="gender" id="a" /><label for="a">男</label>
<input type="radio" name="gender" id="b" /><label for="b">女</label>
<br/><br/>
<!--
checked 默认选中
disabled 禁用
-->
复选框:
<input type="checkbox" name="" disabled />宅
<input type="checkbox" name="" disabled />腐
<input type="checkbox" name="" />逛街
<input type="checkbox" name="" />健身
<input type="checkbox" name="" />直排
<input type="checkbox" name="" checked/>旅游
<input type="checkbox" name="" />美食
<br/><br/>
<hr/>
上传:<input type="file" name="" />
<br/><br/>
图片:<input src="sun.jpg" type="image" name="" />
<br/><br/>
按钮:<input type="button" name="" />
<br/><br/>
重置:<input type="reset" name="" />
<br/><br/>
隐藏:<input type="hidden" name="" />
<br/><br/>
<hr/>
下拉选框:
<select>
<option>1999</option>
<option>1998</option>
<option selected>1997</option>
<option>1996</option>
<option>1995</option>
</select>
<br/><br/>
文本域:<textarea></textarea>
</form>
<form>form2</form>
</body>
</html>
二、form元素的问题:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input{margin:0;padding:0;}
/*background:0 center左右居左,上下居中*/
.text{width:300px; height:40px; border:1px solid blue; background:url(sun.jpg) 0 center no-repeat #FFC;}
.box{width:300px; margin-top:50px; height:40px; border:1px solid blue; background:url(sun.jpg) 0 center no-repeat #FFC;}
/*用作于间隙*/
.box input{width:300px; height:40px;border:none; background:none;}
</style>
</head>
<body>
<input type="text" name="" class="text"/>
<!--解决input背景图滚动的方法-->
<div class="box">
<input type="text" name=""/>
</div>
</body>
</html>