在<form>標籤內定義的<input>標籤有很重要的地位，這個標籤是個單個標籤。<input type>可以用來定義一個表單的類型，一共有10中表單類型。
![]()
HTML中<input>標籤的屬性
屬性
值
描述
aceerpt
mime_type
文件上傳來提交的文件類型
align
left
左對齊
right
右對齊
top
上對齊
middle
居中對齊
bottom
下對齊
alt
text
圖像輸入的文字描述
type
text
單行文字輸入文本框
password
密碼框
button
普通的按鈕
submit
提交按鈕，會把表單中的數據發送到服務器
reset
重置按鈕,會清空表單中的所有數據
radio
單選按鈕
checkbox
複選框
hidden
隱藏的輸入字段
file
輸入字段和瀏覽按鈕，供文件上傳
image
圖像形式的提交按鈕
name
field_name
控件的名稱
value
value
input元素的值
maxlength
number
輸入字段中字符的最大長度
readonly
readonly
輸入字段爲只讀
checked
checked
input元素首次加載時被選中
disabled
disabled
當input元素加載時禁用此元素
2. 除了input表單的類型外，還可以定義多行文本框 ,用標籤<textarea></textatea>定義一個多行文本框
3.用<select></select>標籤定義一個下拉列表框，此標籤具有selected和value屬性，seleted屬性用來指定默認的選項，value屬性用來和<option>標籤指定的那一個選項賦值，這個值是用來傳送到服務器上的。
<html>
<span style="white-space:pre"> </span><head><title>表單設計綜合練習</title></head>
<span style="white-space:pre"> </span><body>
<span style="white-space:pre"> </span><!--設計一個表格 居中對齊，寬度500 邊框線寬度爲0 單元格內容與邊框的像素爲2，單元格直接的間距爲0-->
<span style="white-space:pre"> </span><table align="center" width="500" border="0" cellpadding="2" cellspacing="0">
<span style="white-space:pre"> </span><caption><h2>員工信息</h2></caption> <!--表格的標題-->
<span style="white-space:pre"> </span><form action="123.php" method="post"> <!--定義個表單用POST方式提交到《123.php》-->
<span style="white-space:pre"> </span><!---------------創建文本框------------------------------->
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>姓名</th> <!--表頭-->
<span style="white-space:pre"> </span><!--表格的數據標籤是一個文本框，控件名爲username長度爲30字符數-->
<span style="white-space:pre"> </span><td><input type="text" name="username" size="30"></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!---------------創建文本框------------------------------->
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>密碼</th> <!--表頭-->
<span style="white-space:pre"> </span><!--表格的數據標籤是一個文本框，控件名爲username長度爲30字符數-->
<span style="white-space:pre"> </span><td><input type="password" name="paseeword" size="30"></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!---------------創建單選框按鈕------------------------------->
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>性別</th> <!--表頭-->
<span style="white-space:pre"> </span><!--創建一個單選按鈕 默認選中狀態-->
<span style="white-space:pre"> </span><td><input type="radio" name="性別" value="0" checked>女
<span style="white-space:pre"> </span><input type="radio" name="性別" value="1" >男
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!----------------創建複選框------------------------------>
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>工作內容</th> <!--表頭-->
<span style="white-space:pre"> </span><!--創建一個單選按鈕 默認選中狀態-->
<span style="white-space:pre"> </span><td><input type="checkbox" name="銷售" value="0" checked>銷售
<span style="white-space:pre"> </span><input type="checkbox" name="售後" value="1" >售後
<span style="white-space:pre"> </span><input type="checkbox" name="客服" value="2" >客服<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!----------------創建下拉列表框------------------------------>
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>部門</th> <!--表頭-->
<span style="white-space:pre"> </span><!--創建一個單選按鈕 默認選中狀態-->
<span style="white-space:pre"> </span><td>
<span style="white-space:pre"> </span><select name="部門">
<span style="white-space:pre"> </span><option value="1">銷售部</option>
<span style="white-space:pre"> </span><option value="2">經理部</option>
<span style="white-space:pre"> </span><option value="3">主管部</option>
<span style="white-space:pre"> </span><option value="4">售後部</option>
<span style="white-space:pre"> </span></select>
<span style="white-space:pre"> </span></td><span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!----------------創建下創建多行文本框------------------------------>
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span><th>個人情況</th> <!--表頭-->
<span style="white-space:pre"> </span><!--創建一個單選按鈕 默認選中狀態-->
<span style="white-space:pre"> </span><td>
<span style="white-space:pre"> </span><!--創建一個多行文本框，每行40個字符，共4行-->
<span style="white-space:pre"> </span><textarea name="個人情況" rows="5" cols="50"></textarea>
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span><!----------------創建按鈕------------------------------>
<span style="white-space:pre"> </span><tr> <!--插入一行表格-->
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><!--創建一個單選按鈕 默認選中狀態-->
<span style="white-space:pre"> </span><td colspan="3" align="center">
<span style="white-space:pre"> </span><input type="submit" name="submit" value="提交">
<span style="white-space:pre"> </span><input type="reset" name="reset" value="重置">
<span style="white-space:pre"> </span><input type="button" name="button" value="普通按鈕">
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></form>
<span style="white-space:pre"> </span></table>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></body>
</html>
