<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
默认样式重置
-->
input {
padding: 0;
margin: 0;
}
select {
margin: 0;
}
textarea {
padding: 0;
margin: 0;
}
form {
width: 700px;
height: 650px;
border: 1px solid black;
}
span {
border: 2px solid #60F;
color: red;
}
p label {
font-weight: bold;
color: blue;
}
.form2 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/" method="get" target="_blank">
<!--form中的一些标签属性分析→input：为浏览器服务（让浏览器知道是什么类型的输入标签）。value：为用户和服务器服务（让用户和服务器知道输入的是什么值）。name：为服务器服务（方便服务器调用和修改value）。id：为label标签的for属性服务（方便for的值关联本标签）； -->
提交按钮：
<input type="submit" value="我要提交" name="" id="submit" />
<br />
重置按钮：
<input type="reset" value="我要重置" name="" id="reset" />
<br />
文本框：
<input type="text" value="写入您的信息" name="" id="user" />
<br />
密码框：
<input type="password" value="" name="" id="psw" />
<br />
单选框：
<input type="radio" value="man" name="sex" id="man" />
<label for="man">男</label>
<input type="radio" value="woman" name="sex" id="woman" />
<label for="woman">女</label>
<br />
多选框： <br />
<p> 您的兴趣： <br />
<!--checked：默认选中属性。disabled：禁用属性 -->
<input type="checkbox" name="chifan" />
吃饭
<input type="checkbox" name="shuijiao" checked="checked" />
睡觉
<input type="checkbox" name="dadoudou" disabled="disabled" />
打豆豆（禁止用户选择该选项） </p>
<!--该类型不兼容，解决：用flash代替 -->
设置您的头像：
<input type="file" value="提交头像" name="" />
<br />
<!--后期会用到button按钮 -->
<input type="button" name="" />
<br />
您的配偶情况：
<select name="" id="">
<option value="weihun">未婚</option>
<option value="yihun">已婚</option>
<option value="liyi">离异</option>
</select>
<br />
个人介绍： <br />
<textarea name="" id="" cols="10" rows="5">
</textarea>
<br />
<hr />
<span>快捷入口：</span>
<!--label标签的应用 -->
<p>重新输入用户名→
<label for="user">点我</label>
</p>
<p>重新输入密码→
<label for="psw">点我</label>
</p>
<p>重新输入（性别：男）→
<label for="man">点我</label>
</p>
<p>重新输入（性别：女）→
<label for="woman">点我</label>
</p>
<p>提交→
<label for="submit">点我</label>
</p>
<p>重置→
<label for="reset">点我</label>
</p>
</form>
<!--检测form是否有外边距 -->
<form action="" class="form2">
form2
</form>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
