JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁(yè)
一、前言
前面我們介紹了web網(wǎng)頁(yè)的快速開(kāi)發(fā)，這次我們講點(diǎn)更深層次些的，看這面之前建議先看
上篇，之后在食用這篇。
二、正文部分
如圖示：點(diǎn)擊webapp上面的小三角形點(diǎn)到直到看到j(luò)sp位置
我們?cè)趧?chuàng)建好了之后這里會(huì)有jsp的空單子，我們?cè)谶@輸入的內(nèi)容，會(huì)先反饋到前端，之后再進(jìn)行
后端數(shù)據(jù)處理和接收。
第一步：我們先在這輸入一些東西如圖：其中<h1>內(nèi)容</h1>這是格式，說(shuō)明中間的內(nèi)容是
一個(gè)h1 大小的標(biāo)題，h1--h6標(biāo)題在逐漸減小，要慎用h1，因?yàn)閔1比較大
要先點(diǎn)擊這個(gè)運(yùn)行之后，我們要去百度搜索localhost:8080 我們來(lái)看看效果
感覺(jué)挺大的，所以我們一般用<h2>內(nèi)容</h2>
第二步：我們輸入以下圈起來(lái)的內(nèi)容，<input type=" ">是格式，"txt"表示后面是一個(gè)框
點(diǎn)擊運(yùn)行之后再到百度將剛才的內(nèi)容刷新就可以得到新內(nèi)容了如圖：
但是我們感覺(jué)這樣在一行不太好看，所以我們只需要加個(gè)換行的<br>即可
點(diǎn)擊運(yùn)行之后就可以在百度上刷新就可以得到了
那我們來(lái)輸入試試：
我們發(fā)現(xiàn)，密碼可以看到，沒(méi)有任何加密，所以我們只需要把txt改成password即可
點(diǎn)擊運(yùn)行后 在百度刷新查看：
該成之后如圖：
就可以通過(guò)小眼睛標(biāo)識(shí)來(lái)控制是否可見(jiàn)
第三步：我們只需要加入name和id，其中，冒號(hào)下的表示一個(gè)類似標(biāo)識(shí)符的東西，
id所對(duì)應(yīng)的是在前段顯示，name而是在后端傳輸數(shù)據(jù)的時(shí)候起作用
我們發(fā)現(xiàn)輸完賬號(hào)密碼之后沒(méi)法提交，這就需要設(shè)置一個(gè)按鈕，如圖，輸入劃線的部分
<input type=" ">是一種格式，submit是一個(gè)提交按鈕
但是你會(huì)發(fā)現(xiàn)，點(diǎn)了提交沒(méi)反應(yīng)，這時(shí)我們就要加入<form></form>將整個(gè)包起來(lái)
<form></form>相當(dāng)于一個(gè)問(wèn)卷，有了問(wèn)卷，就可以提交了。
點(diǎn)擊運(yùn)行之后呢，就可以如圖：
點(diǎn)擊提交后，會(huì)在網(wǎng)頁(yè)上顯示出來(lái)，這時(shí)name的作用就體現(xiàn)出來(lái)了。
第四步：既然這是段位提交，那顯然少不了段位選擇，本來(lái)應(yīng)該是<option>內(nèi)容</option>
但是如果手抖寫(xiě)成<option>內(nèi)容<option>,少了/,會(huì)怎么樣呢
就會(huì)多出許多空格，且這些空格是可以選擇的
這就很難受的，所以還是變成在idea代碼中加上/,如圖：
之后點(diǎn)擊運(yùn)行在百度上刷新就可以了
也可以設(shè)置不同的提交按鈕，只需要一個(gè)value='' ''即可里面就可設(shè)置內(nèi)容了
如圖：
我們還可以設(shè)置單選多選，那又是怎么實(shí)現(xiàn)呢
單選：?jiǎn)芜x的關(guān)鍵詞是"radio",我們前面知道了設(shè)置一個(gè)功能的格式是<input type=" ">,
所以如圖：
結(jié)果是：
我們發(fā)現(xiàn)三個(gè)都能選，所以我們必須加上name修飾，用相同的指向，表示只能選擇一個(gè)
這次如圖就可以了
我們要想給這個(gè)加上一個(gè)默認(rèn)值，默認(rèn)選的那個(gè)，只需要加上checked即可如
之后：
多選：多選和單選的區(qū)別在于把radio改為checkbox
運(yùn)行后如圖：
就可以了，離得太近，我們有時(shí)候點(diǎn)不到框框，點(diǎn)漢字卻沒(méi)反應(yīng)無(wú)法選中，所以我們可以
設(shè)置成點(diǎn)漢字也可以選擇直接加<label>內(nèi)容</label>，如圖
就可以實(shí)現(xiàn)點(diǎn)文字也能選上了：
有時(shí)候我們寫(xiě)錯(cuò)太多，不想一個(gè)一個(gè)刪除，這時(shí)我們就可以用一個(gè)重置按鈕reset英文理解為
再設(shè)置，就是重置了，我們把上次的按鈕改成提交按鈕。
如圖：
點(diǎn)擊重置就可以清除了所有了。
上次寫(xiě)了個(gè)粗略版本
還有其他的我們之后去了解。
你想要找的在這：❤三種方式俯瞰后端數(shù)據(jù)接收❤(建議收藏)
還有這里：直通大廠web入門(mén)級(jí)網(wǎng)頁(yè)快速開(kāi)發(fā)(❤建議收藏❤)
到此這篇關(guān)于JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁(yè)的文章就介紹到這了,更多相關(guān)JavaScript web表單網(wǎng)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類型中，是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值，即undefined 和 null。2010-10-10
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
不使用jquery實(shí)現(xiàn)js打字效果示例分享
js打字效果示例js打字效果示例,data-period設(shè)置從打字返回刪字的時(shí)間，data-rotate可加減中英文詞語(yǔ)，不用jquery支持2014-01-01
學(xué)習(xí)JavaScript設(shè)計(jì)模式(代理模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹代理模式，對(duì)代理模式進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-12-12
利用JS+Canvas給南方的冬季來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪
現(xiàn)在冬天下雪已經(jīng)是很常見(jiàn)的事情了,為了應(yīng)景,我們可以為我們的網(wǎng)站增加雪花飄落的效果,這個(gè)應(yīng)該還是很不錯(cuò)的,下面這篇文章主要給大家介紹了關(guān)于利用JS+Canvas給南方的冬季來(lái)一場(chǎng)紛紛揚(yáng)揚(yáng)的大雪,需要的朋友可以參考下2022-12-12
如何實(shí)現(xiàn)JavaScript動(dòng)態(tài)加載CSS和JS文件
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)加載CSS和JS文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-10-10
這篇文章主要為大家詳細(xì)介紹了JS輪播圖的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了微信小程序 如何保持登錄狀態(tài),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
想必大家對(duì)窗口抖動(dòng)一詞并不陌生吧，其實(shí)原理很簡(jiǎn)單，下面為大家簡(jiǎn)單介紹下js中時(shí)如何實(shí)現(xiàn)的，喜歡的朋友可以參考下2013-09-09