資訊專欄INFORMATION COLUMN
摘要：表單如果表單內(nèi)沒有按鈕，只有元素，那么這個(gè)可以升級(jí)為按鈕。輸入框選中高亮，輸入非數(shù)字，改變顏色可設(shè)置，不能設(shè)置而則可以，但不能設(shè)置最大字符數(shù)。
form 表單
如果form表單內(nèi)沒有submit按鈕，只有button元素，那么這個(gè)button可以升級(jí)為submit按鈕。
form 表單用來向服務(wù)器提交信息，常用屬性
action：提交表單的地址
name：頁面中可能不止一個(gè)表單，用name來區(qū)分，PS：id 也可以
method：提交表單的方法，post或get
target：在何處打開action
enctype：
application/x-www-form-urlencoded：在發(fā)送前編碼所有字符(默認(rèn))
text/plain：空格轉(zhuǎn)換為 "+" ，但不對(duì)特殊字符編碼
multipart/form-data：使用包含文件上傳控件的表單時(shí)，必須使用該值
注：post請(qǐng)求和get請(qǐng)求區(qū)別：參考文章：99% 的人都理解錯(cuò)了 HTTP 中 GET 與 POST 的區(qū)別
post比get安全性高，post通過request body傳遞數(shù)據(jù)，get把參數(shù)包含在 URL 中
post一般用于向服務(wù)器傳送數(shù)據(jù)，get一般用于向服務(wù)器獲取數(shù)據(jù)
get請(qǐng)求頁面可以被收藏，post不可以
get只能進(jìn)行 URL 編碼，而 post支持多種編碼方式
get在 URL 中傳遞參數(shù)有長(zhǎng)度限制，而 post沒有
inputinput 標(biāo)簽用來接收用戶填寫的信息，配合label使用，它的for屬性可以選中form表單內(nèi)的id屬性或者用label把input包裹起來就不需要用for了
常用屬性
type：常用的值
password：輸入的內(nèi)容自動(dòng)自動(dòng)變成小圓點(diǎn)
checkbox：多選，靠name屬性分組，提交到后端的時(shí)候被選中的
value是以 "," 分割的一個(gè)字符串，通過name屬性獲得
radio：?jiǎn)芜x，靠name分組
hidden：暫存一些信息
file：文件上傳
accept設(shè)置上傳文件格式
multiple文件多選
submit/button/reset：submit可以提交表單，button不能提交表單，reset清空表單
placeholder：提示性文字，一旦輸入內(nèi)容就消失
disabled：該input被禁用
require：該input必須被填寫
selectselect用來設(shè)置下拉菜單，屬性multiple可設(shè)置多選
option標(biāo)簽，屬性selected：默認(rèn)選擇
textarea：多行文本輸入，rows，cols設(shè)置默認(rèn)行列 表單腳本可以通過document.forms[0]獲得表單
myColor.elements[0]可獲得到表單中的第一個(gè)字段，多選框name不同，也可以用name的值查找，如myColor.elements[color1]。
myColor.elements.length取得表單中字段的數(shù)量.
myColor.elements[0].disabled = true禁用表單當(dāng)前字段，true為禁用，false為恢復(fù)使用，可以應(yīng)用在表單提交之后，防止用戶反復(fù)提交表單
myText.addEventListener("click",function(){
if(this.elements[3].type === "submit"){
this.elements[3].disabled = true
}
})
autofocus在表單字段中設(shè)置，當(dāng)瀏覽器加載時(shí)自動(dòng)把焦點(diǎn)移到該字段
focus()、change()、blur()分別是獲得焦點(diǎn)時(shí)觸發(fā)，失去焦點(diǎn)并改變value才觸發(fā)，失去焦點(diǎn)時(shí)觸發(fā)，其中change()和blur()先后順序并沒有嚴(yán)格規(guī)定。
輸入框選中高亮，輸入非數(shù)字，改變顏色
myText.elements[0].addEventListener("focus",function(e){
if(e.target.style.borderColor !== "red"){
e.target.style.borderColor = "yellow"
}
})
myText.elements[0].addEventListener("blur",function(e){
console.log(e.target.value)
if(/[^d]/.test(e.target.value)){
e.target.style.borderColor = "red"
}else{
e.target.style.borderColor = ""
}
})
myText.elements[0].addEventListener("change",function(e){
if(/[^d]/.test(e.target.value)){
e.target.style.borderColor = "blue"
}else{
e.target.style.borderColor = ""
}
})
input可設(shè)置size、maxlength，不能設(shè)置rows、cols；而textarea則可以，但不能設(shè)置最大字符數(shù)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96105.html
摘要：處理表格和提交等等重置表單重置表單應(yīng)該使用或當(dāng)用戶單擊重置按鈕重置表單時(shí)，會(huì)觸發(fā)事件，可以在必要的時(shí)候取消重置操作另外也可以通過腳本調(diào)用方法重置表單，在調(diào)用方法重置表單時(shí)會(huì)觸發(fā)事件。在中，表單中新增加了屬性，自動(dòng)把焦點(diǎn)移動(dòng)到相應(yīng)字段。 HTMLFormElement繼承了HTMLElement，它自己獨(dú)有的屬性和方法有： acceptCharset:服務(wù)器能夠處理的字符集，等價(jià)于HT...
摘要：文本框獲得焦點(diǎn)時(shí)，選中其中所有的文本思路利用焦點(diǎn)事件事件，在文本框獲得焦點(diǎn)時(shí)，利用其方法選中所有文本。自動(dòng)切換焦點(diǎn)思路利用事件檢測(cè)用戶輸入新字符后，文本框內(nèi)的字符串是否已經(jīng)達(dá)到最大長(zhǎng)度，若達(dá)到最大長(zhǎng)度，則將焦點(diǎn)切換至下一個(gè)文本框。 JavaScript 表單腳本 通過 document.forms 可以獲得一個(gè)包含當(dāng)前頁面中所有表單的集合 HTMLFormElement 接口 下面是這...
摘要：瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器對(duì)表單字段的名稱和值進(jìn)行編碼，使用和號(hào)分隔不發(fā)送禁用的表單字段只發(fā)送勾選的復(fù)選框和單選按鈕不發(fā)送為和的按鈕多選框中每個(gè)選中的值單獨(dú)一個(gè)條目在單擊提交按鈕提交表單的情況下，也會(huì)發(fā)送提交按鈕。否則不發(fā)送提交按鈕。 瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器： 對(duì)表單字段的名稱和值進(jìn)行URL編碼，使用和號(hào)（&）分隔 不發(fā)送禁用的表單字段 只發(fā)送勾選的復(fù)選框和單選按鈕 不發(fā)送t...
閱讀 2078·2021-10-11 10:59
閱讀 935·2021-09-23 11:21
閱讀 3566·2021-09-06 15:02
閱讀 1620·2021-08-19 10:25
閱讀 3378·2021-07-30 11:59
閱讀 2375·2019-08-30 11:27
閱讀 2586·2019-08-30 11:20
閱讀 2978·2019-08-29 13:15
