表單是html中獲取使用者輸入的手段,對於web應用系統極其重要。
比如這個搜尋框,就是乙個表單,使用者可以在上面輸入任何字元,然後進行相應的操作。
比如這個**的登入框,也是個表單,使用者輸入的資訊會被傳送到伺服器,然後進行登陸操作。
所以,幾乎每個**都會有表單。
form
用於為使用者輸入建立html表單
input
用於蒐集使用者資訊
form元素屬性
methon(僅參考)
用於傳送form-data的http方法
action(僅參考)
當提交表單時向何處傳送表單資料
input元素屬性
type
input元素的型別
value
input元素的值
input的屬性多達29種,在這篇文章中,我只講解常用的十幾種。
通過form
和input
我們可以建立乙個最簡單的表單。
>
>
>
建立表單title
>
head
>
>
效果如下?
可以看到,我可以任意輸入任何字元,且沒有長度限制。
可以建立乙個單行文字框。這也是最基本的表單元素,下面我來講解其他屬性。
通過對value=""
的賦值,可以實現佔位的效果。
效果如下?
當我再輸入的時候,
可以看到是直接在這個後面進行輸入的。
並且前面的佔位符是可以刪除的。
比如說開啟csdn,我們看到的表單是這樣的
當你要輸入時,會變成這樣
輸入內容後,這個python高階之路就消失了。這樣的表單是如何實現的呢?
就是input的placeholder
屬性
type
="text"
placeholder
="yzh"
>
效果如下?
當我輸入的時候就會有相同的效果。
這就是實際上不占用文字框的佔位符的實現。
前幾個我們輸入的單行文字框,可輸入的字元都是無限的,可以一直輸入下去,但是一般的搜尋引擎,最多字數都是20個左右,
所以我們如果要限制輸入的字數的話,需要乙個屬性maxlength
type
="text"
placeholder
="yzh"
maxlength
="8"
>
執行結果如下?
作為對比,上面的是不限字數的。
當我限制了最大字數為8的時候,我是無法再多輸入的。
前幾個文字框,都是定死的,如何能讓文字框變大能同時顯示更多的內容呢?這就需要乙個引數size
type
="text"
placeholder
="yzh"
size
="60"
>
效果如下?
增加乙個引數readonly
,就可以將文字框的內容變成只能讀取,不能更改或者增添的內容。
type
="text"
value
="yzh"
readonly
>
我還是拿**登入來舉例子。
一般情況下我們輸入的密碼,顯示到螢幕上都會是小黑點。那麼這一點是如何u做到的呢?
答案就是password
屬性。這個是type的乙個型別。
type
="password"
placeholder
="密碼"
>
效果如下?
當我們輸入時?
就變成這樣的小黑點啦。
通過size
我們可以把文字框拓寬,但是整體放大需要另乙個屬性textarea
rows
和cols
結果如下?
以上就是建立表單的基本內容。
HTML5表單元素
新的表單元素 1.datalist元素 規定輸入域的選項列表,datalist屬性規定form或input域應該擁有的自動完成的功能。當使用者在自動完成域中開始輸出時,瀏覽器應該在域中顯示填寫的選項。2.keygen提供一種驗證使用者的可靠方法。用於表單的金鑰對生成器字段。當提交表單時,會生成兩個鍵...
HTML 5 表單元素
html5 的新的表單元素 html5 擁有若干涉及表單的元素和屬性。本章介紹以下新的表單元素 datalist 元素 datalist 元素規定輸入域的選項列表。列表是通過 datalist 內的 option 元素建立的。如需把 datalist 繫結到輸入域,請用輸入域的 list 屬性引用 ...
HTML5表單元素
表單驗證觸發oninvalid事件 通過setcustomvalidity方法設定修改內容 action method get type text name uname pattern d required class uname type submit name form var input do...