JavaScript web表單功能交流干貨滿滿
一、前言
前面我們說(shuō)了有關(guān)前端顯示的問(wèn)題,現(xiàn)在我們回歸之前的內(nèi)容,豐富一些表單操作。
二、正文部分
通過(guò)我們之前的內(nèi)容,相信大家對(duì)于idea中的環(huán)境配置已經(jīng)非常熟悉了吧,那么我們現(xiàn)在就
不在講環(huán)境配置了還有不太明白的同學(xué)可以在我的第一篇中找到相關(guān)的內(nèi)容。
那么直接如圖:
這是我們最開(kāi)始做的東西,我們先運(yùn)行得
在輸完賬號(hào)密碼我們提交后會(huì)在此網(wǎng)頁(yè)中顯示出來(lái),這對(duì)于賬號(hào)密碼來(lái)說(shuō)使我們不愿意看到
的所以我們只需要在form表單中加入method=" post"
method=" post"
是加密提交我們寫(xiě)他,不寫(xiě)或者get都是公開(kāi)提交,運(yùn)行之后
此時(shí)輸入賬號(hào)密碼提交之后都不會(huì)顯示出來(lái)了。
其實(shí)非加密提交在我們平時(shí)的搜索中十分常見(jiàn)的如圖:
我們?cè)谔峤恢鬀](méi)有一點(diǎn)顯示,這很常的不舒服,所以我們
<script type="text/javascript"> function 提交() { alert("提交成功") } </script>
其中fuction 后的名字是任意的 ,alert所顯示的內(nèi)容也是任意的,我們還要在提交按鈕那里
加上這個(gè)功能
運(yùn)行之后我們,輸入后點(diǎn)擊提交后可以得到,之后點(diǎn)確定即可提交成功
若是我們也想在重置那里也來(lái)個(gè)提示,原理也是一樣的
重置按鈕那里:
注意寫(xiě)得功能必須對(duì)應(yīng)即可:
運(yùn)行之后:點(diǎn)擊重置
點(diǎn)擊確定即可成功清除。
我們?cè)谳斎胭~號(hào)密碼的時(shí)候感覺(jué)框框太大或者太小,所以我們可以控制文本框的長(zhǎng)度
可以用size去控制
賬號(hào)是用size控制的,密碼是默認(rèn)的長(zhǎng)度,我們來(lái)對(duì)比一下即可
長(zhǎng)度明顯不同,這我們就控制了文本框的長(zhǎng)度
然后我們覺(jué)得控制了文本框的長(zhǎng)度,還遠(yuǎn)遠(yuǎn)不夠,比如要設(shè)置不能超過(guò)多少位,用maxlength=" "來(lái)限制所要輸入的長(zhǎng)度
此時(shí)運(yùn)行之后再查看發(fā)現(xiàn)確實(shí)可以,到第五位之后就輸不了了
maxlength字面意思也是最大長(zhǎng)度,可謂是非常的好記。
多行文本框的輸入:textares,可以輸入大量信息
到此這篇關(guān)于JavaScript web表單功能交流干貨滿滿的文章就介紹到這了,更多相關(guān)JavaScript web 表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在Node.js中使用Javascript Generators詳解
下面小編就為大家?guī)?lái)一篇在Node.js中使用Javascript Generators詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-05小程序api實(shí)現(xiàn)promise封裝過(guò)程解析
這篇文章主要介紹了小程序api實(shí)現(xiàn)promise封裝過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11javascript的字符串按引用復(fù)制和傳遞,按值來(lái)比較介紹與應(yīng)用
字符串是按引用復(fù)制和傳遞的,但是是按值來(lái)比較的;當(dāng)按值復(fù)制或傳遞時(shí),將在計(jì)算機(jī)內(nèi)存中分配一塊空間并將原值復(fù)制到其中,需要的朋友可以參考下2012-12-12cnblogs 代碼高亮顯示后的代碼復(fù)制問(wèn)題解決實(shí)現(xiàn)代碼
cnblogs是比較有名的技術(shù)博客基地,很多技術(shù)達(dá)人都在里面發(fā)布技術(shù)文章, 不過(guò)由于代碼不利于復(fù)制,因?yàn)轫?yè)面里面有pre標(biāo)簽等問(wèn)題2011-12-12利用JavaScript中的高階函數(shù)和閉包實(shí)現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案,使得我們能夠靈活地封裝和管理代碼操作,所以本文將為大家介紹命令模式的概念、應(yīng)用場(chǎng)景以及在JavaScript中的實(shí)現(xiàn)方式,需要的可以參考一下2023-06-06JS中頁(yè)面與頁(yè)面之間超鏈接跳轉(zhuǎn)中文亂碼問(wèn)題的解決辦法
在原頁(yè)面一張圖片上添加了一個(gè)鏈接,鏈接中有中文,于是在跳轉(zhuǎn)過(guò)程中出現(xiàn)中文亂碼問(wèn)題,下面給大家分享下解決方案2016-12-12layer彈出子iframe層父子頁(yè)面?zhèn)髦档膶?shí)現(xiàn)方法
這篇文章主要介紹了layer彈出子iframe層父子頁(yè)面?zhèn)髦档膶?shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11解決layer.msg 不居中 ifram中的問(wèn)題
今天小編就為大家分享一篇解決layer.msg 不居中 ifram中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09