<!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>
![]()
