一、前言

前面我們介紹了web網(wǎng)頁的快速開發(fā)，這次我們講點更深層次些的，看這面之前建議先看

上篇，之后在食用這篇。

二、正文部分

如圖示：點擊webapp上面的小三角形點到直到看到j(luò)sp位置

我們在創(chuàng)建好了之后這里會有jsp的空單子，我們在這輸入的內(nèi)容，會先反饋到前端，之后再進行

后端數(shù)據(jù)處理和接收。

第一步：我們先在這輸入一些東西如圖：其中<h1>內(nèi)容</h1>這是格式，說明中間的內(nèi)容是

一個h1 大小的標(biāo)題，h1--h6標(biāo)題在逐漸減小，要慎用h1，因為h1比較大

要先點擊這個運行之后，我們要去百度搜索localhost:8080 我們來看看效果

感覺挺大的，所以我們一般用<h2>內(nèi)容</h2>

第二步：我們輸入以下圈起來的內(nèi)容，<input type=" ">是格式，"txt"表示后面是一個框

點擊運行之后再到百度將剛才的內(nèi)容刷新就可以得到新內(nèi)容了如圖：

但是我們感覺這樣在一行不太好看，所以我們只需要加個換行的<br>即可

點擊運行之后就可以在百度上刷新就可以得到了

那我們來輸入試試：

我們發(fā)現(xiàn)，密碼可以看到，沒有任何加密，所以我們只需要把txt改成password即可

點擊運行后 在百度刷新查看：

該成之后如圖：

就可以通過小眼睛標(biāo)識來控制是否可見

第三步：我們只需要加入name和id，其中，冒號下的表示一個類似標(biāo)識符的東西，

id所對應(yīng)的是在前段顯示，name而是在后端傳輸數(shù)據(jù)的時候起作用

我們發(fā)現(xiàn)輸完賬號密碼之后沒法提交，這就需要設(shè)置一個按鈕，如圖，輸入劃線的部分

<input type=" ">是一種格式，submit是一個提交按鈕

但是你會發(fā)現(xiàn)，點了提交沒反應(yīng)，這時我們就要加入<form></form>將整個包起來

<form></form>相當(dāng)于一個問卷，有了問卷，就可以提交了。

點擊運行之后呢，就可以如圖：

點擊提交后，會在網(wǎng)頁上顯示出來，這時name的作用就體現(xiàn)出來了。

第四步：既然這是段位提交，那顯然少不了段位選擇，本來應(yīng)該是<option>內(nèi)容</option>

但是如果手抖寫成<option>內(nèi)容<option>,少了/,會怎么樣呢

就會多出許多空格，且這些空格是可以選擇的

這就很難受的，所以還是變成在idea代碼中加上/,如圖：

之后點擊運行在百度上刷新就可以了

也可以設(shè)置不同的提交按鈕，只需要一個value='' ''即可里面就可設(shè)置內(nèi)容了

如圖：

我們還可以設(shè)置單選多選，那又是怎么實現(xiàn)呢

單選：單選的關(guān)鍵詞是"radio",我們前面知道了設(shè)置一個功能的格式是<input type=" ">,

所以如圖：

結(jié)果是：

我們發(fā)現(xiàn)三個都能選，所以我們必須加上name修飾，用相同的指向，表示只能選擇一個

這次如圖就可以了

我們要想給這個加上一個默認(rèn)值，默認(rèn)選的那個，只需要加上checked即可如

之后：

多選：多選和單選的區(qū)別在于把radio改為checkbox

運行后如圖：

就可以了，離得太近，我們有時候點不到框框，點漢字卻沒反應(yīng)無法選中，所以我們可以

設(shè)置成點漢字也可以選擇直接加<label>內(nèi)容</label>，如圖

就可以實現(xiàn)點文字也能選上了：

有時候我們寫錯太多，不想一個一個刪除，這時我們就可以用一個重置按鈕reset英文理解為

再設(shè)置，就是重置了，我們把上次的按鈕改成提交按鈕。

如圖：

點擊重置就可以清除了所有了。

上次寫了個粗略版本

還有其他的我們之后去了解。

你想要找的在這：❤三種方式俯瞰后端數(shù)據(jù)接收❤(建議收藏)

還有這里：直通大廠web入門級網(wǎng)頁快速開發(fā)(❤建議收藏❤)

到此這篇關(guān)于JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁的文章就介紹到這了,更多相關(guān)JavaScript web表單網(wǎng)頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論