表单--form标签

来源:互联网 发布:下载itunes软件 编辑:程序博客网 时间:2024/05/01 11:12

一、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>

<formaction="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>



0 0
原创粉丝点击