浏覽網頁時,讀者經常會看到單行文本輸入框、單選按鈕、複選框、重置按鈕等,使用<input/>控件可以在表單中定義這些元素,其基本文法格式如下。
<input type=”控件類型”/>
在上述文法中,type屬性為其最基本的屬性,取值有多種,用來指定不同的控件類型。除type屬性外,<input/>控件還可以定義很多其他屬性,其中,比較常用的如id、name、value、size,它們分别用來指定input控件的ID值、名稱、控件中的預設值和控件在頁面中的顯示寬度。
接下來通過一個案例來示範<input/>控件的使用。
在chapter01檔案夾下建立一個HTML檔案htmlDemo06,在該檔案中使用表單控件來顯示
注冊頁面,其關鍵代碼如檔案1-6所示。
檔案1-6 htmlDemo06.html
<body>
<fieldset>
<legend注冊新使用者</legendwW.itheima.Com
<!--表單資料的送出方式為POST--->
<form action="#" method="post">
<table cellpadding="2" align="center">
<tr>
<td align="right">使用者名:</td>
<td>
<!--1.文本輸入框控件-->
<input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">密碼:</td>
<!--2.密碼輸入框控件-->
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<!--3.單選輸入框控件,由于無法輸入value,是以預先定義好-->
<input type="radio"name="gender"value="male"/>男
<input type="radio" name="gender" value="female"/> 女
</td>
</tr>
<tr>
<td align="right">興趣:</td>
<td>
<!--4.複選框控件-->
<input type="checkbox"name="interest"value="film"/>看電影
<input type="checkbox"name="interest"value="code"/>敲代碼
<inputtype="checkbox"name="interest"value="game"/>玩遊戲
</td>
</tr>
<tr>
<td align="right">頭像:</td>
<td>
<!--5.檔案上傳控件-->
<input type="file" name="photo" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<!--6.送出按鈕控件-->
<input type="submit"value="注冊"/>
<!--7.重置按鈕控件,單擊後會清空目前form-->
<input type="reset"value="重填"/>
</td>
</tr>
</table>
</form>
</fieldset>
</body>
在檔案1-6中,分别使用<input/>标記定義了文本輸入框控件、密碼輸入框控件、單選框和複選框控件、檔案上傳控件以及送出和重置按鈕控件。在上述控件中,name屬性代表控件名稱,value屬性表示該控件的值。需要注意的是,單選框控件和複選框控件必須指定相同的name值,這是為了友善在處理頁面資料時擷取表單傳遞的值(表單所傳遞的就是該控件的value值)。上述代碼中,還用了<fieldset><legend>标記。<fieldset>标記的作用是将表單内的元素分組,而<legend>标記則為<fieldset>标記定義标題。
使用浏覽器打開檔案1-6,顯示結果如圖1-8所示。
圖1-8表單控件的使用
填寫完圖1-8中所示的表單資料後,頁面如圖1-9所示。
圖1-9表單控件的使用
從圖1-9可以看出,密碼輸入框中内容為不可見狀态,單選按鈕隻能選擇一個值,而複選框可以選擇多個值。
與其他語言類似,HTML中也提供了代碼注釋,它以“<!–”開頭,以“–>”結束,其文法如下所示。
<!--注釋内容-->
在檔案1-6中,就大量地使用了HTML注釋,被注釋的内容不會顯示到浏覽器頁面上,但是通過檢視浏覽器中的源代碼可以看到HTML中的注釋資訊。