HTML5 表單元素第一節 基本元素詳解

2021-10-03 02:45:09 字數 3080 閱讀 6706

表單是html中獲取使用者輸入的手段,對於web應用系統極其重要。

比如這個搜尋框,就是乙個表單,使用者可以在上面輸入任何字元,然後進行相應的操作。

比如這個**的登入框,也是個表單,使用者輸入的資訊會被傳送到伺服器,然後進行登陸操作。

所以,幾乎每個**都會有表單。

form

用於為使用者輸入建立html表單

input

用於蒐集使用者資訊

form元素屬性

methon(僅參考)

用於傳送form-data的http方法

action(僅參考)

當提交表單時向何處傳送表單資料

input元素屬性

type

input元素的型別

value

input元素的值

input的屬性多達29種,在這篇文章中,我只講解常用的十幾種。

通過forminput我們可以建立乙個最簡單的表單。

>

>

>

建立表單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我們可以把文字框拓寬,但是整體放大需要另乙個屬性textarearowscols

結果如下?

以上就是建立表單的基本內容。

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...