一、前言

前面我們介紹了web的快速開發，這次我們講點更深層次些的，看這面之前建議先看

上篇，之後在食用這篇。

二、正文部分

如圖示：點選webapp上面的小三角形點到直到看到p位置

我們在建立好了之後這裡會有jsp的空單子，我們在這輸入的內容，會先反饋到前端，之後再進行

後端資料處理和接收。

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

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

要先點選這個執行之後，我們要去百度搜索localhost:8080 我們來看看效果

感覺挺大的，所以我們一般用<h2>內容</h2>

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

點選執行之後再到百度將剛才的內容重新整理就可以得到新內容瞭如圖：www.cppcns.com

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

點選執行之後就可以在百度上重新整理就可以得到了

那我們來輸入試試：

我們發現，密碼可以www.cppcns.com看到，沒有任何加密，所以我們只需要把txt改成password即可

點選執行後 在百度重新整理檢視：

該成之後如圖：

就可以通過小眼睛標識來控制是否可見

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

id所對應的是在前段顯示，name而是在後端傳輸資料的時候起作用

我們發現輸完賬號密碼之後沒法提交，這就需要設定一個按鈕，如圖，輸入劃線的部分

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

但是你會發現，點了提交沒反應，這時我們就要加入<form></form>將整個包起來

<form></form>相當於一個問卷，有了問卷，就可以提交了。

點選執行之後呢，就可以如圖：

點選提交後，會在網頁上顯示出來，這時name的作用就體現出來了。

第四步：既然這是段位提交，那顯然少不了段位選擇，本來應該是&lfUSJXV

但是如果手抖寫成<option>內容<option>,少了/,會怎麼樣呢

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

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

之後點選執行在百度上重新整理就可以了

也可以設定不同的提交按鈕，只需要一個value='' ''即可裡面就可設定內容了

如圖：

我們還可以設定單選多選，那又是怎麼實現呢

單選：單選的關鍵詞是"radhttp://www.cppcns.comio",我們前面知道了設定一個功能的格式是<input type=" ">,

所以如圖：

結果是：

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

這次如圖就可以了

我們要想給這個加上一個預設值，預設選的那個，只需要加上checked即可如

之後：

多選：多選和單選的區別在於把radio改為checkbox

執行後如圖：

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

設定成點漢字也可以選擇直接加<label>內容</label>，如圖

就可以實現點文字也能選上了：

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

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

如圖：

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

上次寫了個粗略版本

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

你想要找的在這：❤三種方式俯瞰後端資料接收❤(建議收藏)

還有這裡：直通大廠web入門級網頁快速開發(❤建議收藏❤)

到此這篇關於一文帶你玩轉web表單網頁的文章就介紹到這了,更多相關Script web表單網頁內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！