<input>表單是提供給網頁瀏覽者輸入、勾選和選取的數據,以便提供到服務器數據庫的工具。
文本欄:
<input type="text" name="欄位名稱" value="欄位內定值" size="欄位顯示寬度" maxlength="欄位數據輸入最大長度" readonly="readonly">
對於普通的文本欄表單,一般需要如下屬性名稱:type, name, value, size, maxlength
密碼欄:
<input type="password" name="欄位名稱" value="欄位內定值" size="欄位顯示寬度" maxlength="欄位數據輸入最大長度" readonly="readonly">
對於密碼欄表單,一般需要如下屬性名稱:type, name, value, size, maxlength
隱藏欄:
<input type="hidden" name="欄位名稱" value="欄位值">
隱藏欄用於放置固定要發送到數據庫的值,但是又不想讓瀏覽者發現或更改的數值。
複選框:
愛好:<input type="checkbox" name="hobby" value="音樂"> 音樂 <input type="checkbox" name="hobby" value="體育"> 體育
複選框的<input>屬性名稱type需要設定爲checkbox;同一個複選框內容下的name要保持一致;同時設定不同的value,意思是當該選框勾選時,會自動發送value值到數據庫。
屬性名稱還包括:checked(默認狀態下選框就是選中的), disabled(默認狀態下就不能修改的選框)
單選框:
性別:<input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" value="女"> 女
單選框的<input>屬性名稱type需要設定爲radio;同個單選框內容下的name要保持一致;同時設定不同的value,意思是當該選框勾選時,會自動發送value值到數據庫。
屬性名稱還包括:checked(默認狀態下選框就是選中的), disabled(默認狀態下就不能修改的選框)
窗體欄位:
地址:<select name="address"> <option value="上海">上海 <option value="南京“>南京 <option value="深圳” selected>深圳 </select>
即創建一個窗體表單,可以選擇上海、南京或深圳作爲地址,其中深圳市首選項。
標記<select>還可以添加屬性名稱size,設定值爲數字,將可選表單擴展爲多行,同時顯示多個選項。屬性名稱multiple,添加後支持多選。
加入標記<optgroup lable=""> </optgroup>可以對錶單內容進行分組。
<select name="address">
<optgroup label="上海">
<option value="徐彙區">徐彙區
<option value="寶山區“>寶山區
</optgroup>
<optgroup label="深圳">
<option value="南山區">南山區
<option value="福田區“>福田區
</optgroup>
</select>
文字區塊:
<textarea name="content"> </text area>
屬性名稱:cols 文字區塊長度;rows 文字區塊寬度
按鈕與表單功能結構:
<input type="submit" value="提交">
<input type="reset" value="重置"> 點擊後表單會恢復到初始化狀態
注意,在使用按鈕功能時,必須用<form> </form>限制住所有表單內容區域。<form>標記具有如下屬性名稱:
屬性名稱 | 設定值 | 說明 |
name | 字符串 | 爲接下來的表單命名 |
method | get/post | 表單的傳輸方式 |
action | URL | 傳輸目標 |
按鈕圖像與圖像按鈕:
按鈕圖像:即按鈕上放置圖片,可以賦予提交和重置的功能
<button name="欄位名稱" type=“submit/reset”> <img src="URL"> </button>
圖像按鈕:將圖像設置爲可以點擊的按鈕,沒有提交和重置的功能
<input type="image" src="URL" alt="文本">
允許上傳文件:
上傳:<input type="file" name="uploadfile">
爲表單加上外框和標題:
<fieldset>...</fieldset>:放置於<form>...</form>內
<legend>註冊表單</legend>:放置於<fieldset>下方