JavaScript web表單功能交流幹貨滿滿

一、前言

前面我們說瞭有關前端顯示的問題,現在我們回歸之前的內容,豐富一些表單操作。

二、正文部分

通過我們之前的內容,相信大傢對於idea中的環境配置已經非常熟悉瞭吧,那麼我們現在就

不在講環境配置瞭還有不太明白的同學可以在我的第一篇中找到相關的內容。

那麼直接如圖:

這是我們最開始做的東西,我們先運行得

在輸完賬號密碼我們提交後會在此網頁中顯示出來,這對於賬號密碼來說使我們不願意看到

的所以我們隻需要在form表單中加入method=" post"

method=" post"是加密提交我們寫他,不寫或者get都是公開提交,運行之後

此時輸入賬號密碼提交之後都不會顯示出來瞭。

其實非加密提交在我們平時的搜索中十分常見的如圖:

我們在提交之後沒有一點顯示,這很常的不舒服,所以我們

   <script type="text/javascript">
        function 提交() {
         alert("提交成功")
        }
    </script>

其中fuction 後的名字是任意的 ,alert所顯示的內容也是任意的,我們還要在提交按鈕那裡

加上這個功能

運行之後我們,輸入後點擊提交後可以得到,之後點確定即可提交成功

若是我們也想在重置那裡也來個提示,原理也是一樣的

重置按鈕那裡:

註意寫得功能必須對應即可:

運行之後:點擊重置

點擊確定即可成功清除。

我們在輸入賬號密碼的時候感覺框框太大或者太小,所以我們可以控制文本框的長度

可以用size去控制

賬號是用size控制的,密碼是默認的長度,我們來對比一下即可

長度明顯不同,這我們就控制瞭文本框的長度

然後我們覺得控制瞭文本框的長度,還遠遠不夠,比如要設置不能超過多少位,用maxlength=” “來限制所要輸入的長度

此時運行之後再查看發現確實可以,到第五位之後就輸不瞭瞭

maxlength字面意思也是最大長度,可謂是非常的好記。

多行文本框的輸入:textares,可以輸入大量信息

到此這篇關於JavaScript web表單功能交流幹貨滿滿的文章就介紹到這瞭,更多相關JavaScript web 表單內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: