JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁
一、前言
前面我們介紹了web網(wǎng)頁的快速開發(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>這是格式，說明中間的內(nèi)容是
一個(gè)h1 大小的標(biāo)題，h1--h6標(biāo)題在逐漸減小，要慎用h1，因?yàn)閔1比較大
要先點(diǎn)擊這個(gè)運(yùn)行之后，我們要去百度搜索localhost:8080 我們來看看效果
感覺挺大的，所以我們一般用<h2>內(nèi)容</h2>
第二步：我們輸入以下圈起來的內(nèi)容，<input type=" ">是格式，"txt"表示后面是一個(gè)框
點(diǎn)擊運(yùn)行之后再到百度將剛才的內(nèi)容刷新就可以得到新內(nèi)容了如圖：
但是我們感覺這樣在一行不太好看，所以我們只需要加個(gè)換行的<br>即可
點(diǎn)擊運(yùn)行之后就可以在百度上刷新就可以得到了
那我們來輸入試試：
我們發(fā)現(xiàn)，密碼可以看到，沒有任何加密，所以我們只需要把txt改成password即可
點(diǎn)擊運(yùn)行后 在百度刷新查看：
該成之后如圖：
就可以通過小眼睛標(biāo)識(shí)來控制是否可見
第三步：我們只需要加入name和id，其中，冒號(hào)下的表示一個(gè)類似標(biāo)識(shí)符的東西，
id所對(duì)應(yīng)的是在前段顯示，name而是在后端傳輸數(shù)據(jù)的時(shí)候起作用
我們發(fā)現(xiàn)輸完賬號(hào)密碼之后沒法提交，這就需要設(shè)置一個(gè)按鈕，如圖，輸入劃線的部分
<input type=" ">是一種格式，submit是一個(gè)提交按鈕
但是你會(huì)發(fā)現(xiàn)，點(diǎn)了提交沒反應(yīng)，這時(shí)我們就要加入<form></form>將整個(gè)包起來
<form></form>相當(dāng)于一個(gè)問卷，有了問卷，就可以提交了。
點(diǎn)擊運(yùn)行之后呢，就可以如圖：
點(diǎn)擊提交后，會(huì)在網(wǎng)頁上顯示出來，這時(shí)name的作用就體現(xiàn)出來了。
第四步：既然這是段位提交，那顯然少不了段位選擇，本來應(yīng)該是<option>內(nèi)容</option>
但是如果手抖寫成<option>內(nèi)容<option>,少了/,會(huì)怎么樣呢
就會(huì)多出許多空格，且這些空格是可以選擇的
這就很難受的，所以還是變成在idea代碼中加上/,如圖：
之后點(diǎn)擊運(yùn)行在百度上刷新就可以了
也可以設(shè)置不同的提交按鈕，只需要一個(gè)value='' ''即可里面就可設(shè)置內(nèi)容了
如圖：
我們還可以設(shè)置單選多選，那又是怎么實(shí)現(xiàn)呢
單選：單選的關(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)漢字卻沒反應(yīng)無法選中，所以我們可以
設(shè)置成點(diǎn)漢字也可以選擇直接加<label>內(nèi)容</label>，如圖
就可以實(shí)現(xiàn)點(diǎn)文字也能選上了：
有時(shí)候我們寫錯(cuò)太多，不想一個(gè)一個(gè)刪除，這時(shí)我們就可以用一個(gè)重置按鈕reset英文理解為
再設(shè)置，就是重置了，我們把上次的按鈕改成提交按鈕。
如圖：
點(diǎn)擊重置就可以清除了所有了。
上次寫了個(gè)粗略版本
還有其他的我們之后去了解。
你想要找的在這：❤三種方式俯瞰后端數(shù)據(jù)接收❤(建議收藏)
還有這里：直通大廠web入門級(jí)網(wǎng)頁快速開發(fā)(❤建議收藏❤)
到此這篇關(guān)于JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁的文章就介紹到這了,更多相關(guān)JavaScript web表單網(wǎng)頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript比較兩個(gè)日期相差天數(shù)的方法
這篇文章主要介紹了javascript比較兩個(gè)日期相差天數(shù)的方法,涉及javascript針對(duì)日期的轉(zhuǎn)換與比較的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript把15位身份證轉(zhuǎn)成18的函數(shù)
非常不錯(cuò)的，看了這個(gè)大家就明白身份證的運(yùn)算規(guī)則了2008-10-10
JS Generator函數(shù)yield表達(dá)式示例詳解
這篇文章主要為大家介紹了JS Generator函數(shù)yield表達(dá)式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要給大家介紹了關(guān)于如何利用JS hash制作單頁Web應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
毫秒轉(zhuǎn)時(shí)間的方法有很多，在本文將為大家介紹下js中是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下2013-09-09
js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)前端界面導(dǎo)航欄下拉列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
如何在TypeScript?中實(shí)現(xiàn)接口的類
這篇文章主要介紹了TypeScript?中實(shí)現(xiàn)接口的類,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JS根據(jù)生日算年齡的方法,涉及javascript操作時(shí)間的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-05-05
JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法,結(jié)合實(shí)例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對(duì)輸入字符串的遍歷、逆序輸出等方法實(shí)現(xiàn)字符串反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了簡單了解TypeScript中如何繼承 Error 類，一個(gè)典型的網(wǎng)站服務(wù)器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我們希望這些類都擁有 Error 的特性：有錯(cuò)誤消息、有調(diào)用棧、有方便打印的 toString 等。,需要的朋友可以參考下2019-06-06