HTML學習(六)——表單

<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 傳輸目標
action不設置的情況下,默認是發送給自己。method如果採用get,那麼在傳輸時,瀏覽器地址一欄會顯示信息傳輸內容,如果採用post,傳輸的內容會被隱藏。


按鈕圖像與圖像按鈕:

按鈕圖像:即按鈕上放置圖片,可以賦予提交和重置的功能

<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>下方

發佈了34 篇原創文章 · 獲贊 5 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章