HTML高階標籤（3）————表單的應用
阿新 • • 發佈：2019-02-13
在HTML開發中，標籤的種類和數量很多，不可能說每一種都研究透。很多可以用CSS來控制的標籤，我們基本沒有必要在上面浪費時間。所以，我們只要掌握在HTML開發中比較常用的標籤就完全可以了。
首先，先寫一個最簡單的登入表單。
<html> <head> <title>表單的應用</title> </head> <body> <table border="1" width="500" align="center"> <form name="frm" action="login.php"> <caption>表單的應用</caption> <tr> <th>文字域(<u>U</u>)</th> <td> <input type="text" name="username" value="username"> </td> </tr> <tr> <th>密碼域</th> <td> <input type="password" name="password" value="password"> </td> </tr>
<span style="white-space:pre"> </span><tr><span style="white-space:pre"> </span><td colspan="2" align="center"><span style="white-space:pre"> </span><input type="submit" name="sub"><span style="white-space:pre"> </span><input type="reset">
<span style="white-space:pre"> </span><input type="image" src="ucai.png"><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></form>
<span style="white-space:pre"> </span></table><span style="white-space:pre"> </span></body></html>
一個簡單的表單就完成了，注意<form>標籤應該放在<table>裡面，新增其他欄位元素時，也應該遵循這個方式。
接下來，再新增一個單選框和複選框。
<tr>
<th>複選框</th>
<td>
game<input type="checkbox">
movie<input type="checkbox">
travel<input type="checkbox">
reading<input type="checkbox">
writing<input type="checkbox">
</td>
</tr>
<tr>
<th>單選框</th>
<td>
<input type="radio" name="sex" checked>boy
<input type="radio" name="sex">girl
<input type="radio" name="sex">secret
</td>
</tr>
然而，複選框可一全部選擇，也可以都不選擇。單選框則必須有一個選擇的，所以要加上一個預設項，也就在後面新增一個checked。還有，單選框中的選項都是以互斥的方式存在的，所有將他們相當於放在一個數組中一樣，也就是命名都一樣的話，就可以保證他們的互斥性。要不然，就一個都選不了。
這是執行後的結果：
表單中少不了的肯定有列表，下面再介紹幾種常用的列表：普通列表，下拉列表，多選列表。
<th>下拉列表</th>
<td>
<select name="list">
<option>--請選擇--</option>
<option>111111</option>
<option selected>222222</option><span style="white-space:pre"> </span><!--預設選項-->
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>普通列表</th>
<td>
<select name="list1" size="4"><span style="white-space:pre"> </span><!--下拉長度為4-->
<option>--請選擇--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>多選列表</th>
<td>
<select name="list2" multiple><span style="white-space:pre"> </span><!--multiple表示為多選列表-->
<option>--請選擇--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
標籤的內外關係不要搞混了。
執行結果：
最後，再寫一個多行文字域。在很多需要描述的地方，多行文字域就派上用場了。
<tr>
<th>多行文字域</th>
<td>
<textarea cols="20" rows="10" name="message">typing your message here</textarea>
</td>
</tr>
看看執行後的樣子：
字數超過文字框大小時，會自動新增滾動條。
好了，常用的也就是這些了，大家共同學習進步。