表單腳本

wangtdgoodluck 發布于2019-08-22 18:42 / 606人閱讀

摘要：表單如果表單內沒有按鈕，只有元素，那么這個可以升級為按鈕。輸入框選中高亮，輸入非數字，改變顏色可設置，不能設置而則可以，但不能設置最大字符數。

form 表單

如果form表單內沒有submit按鈕，只有button元素，那么這個button可以升級為submit按鈕。

form 表單用來向服務器提交信息，常用屬性

action：提交表單的地址

name：頁面中可能不止一個表單，用name來區分，PS：id 也可以

method：提交表單的方法，post或get

target：在何處打開action

enctype：

application/x-www-form-urlencoded：在發送前編碼所有字符(默認)

text/plain：空格轉換為 "+" ，但不對特殊字符編碼

multipart/form-data：使用包含文件上傳控件的表單時，必須使用該值

注：post請求和get請求區別：參考文章：99% 的人都理解錯了 HTTP 中 GET 與 POST 的區別

post比get安全性高，post通過request body傳遞數據，get把參數包含在 URL 中

post一般用于向服務器傳送數據，get一般用于向服務器獲取數據

get請求頁面可以被收藏，post不可以

get只能進行 URL 編碼，而 post支持多種編碼方式

get在 URL 中傳遞參數有長度限制，而 post沒有

input

input 標簽用來接收用戶填寫的信息，配合label使用，它的for屬性可以選中form表單內的id屬性或者用label把input包裹起來就不需要用for了
常用屬性

type：常用的值

password：輸入的內容自動自動變成小圓點

checkbox：多選，靠name屬性分組，提交到后端的時候被選中的
value是以 "," 分割的一個字符串，通過name屬性獲得

radio：單選，靠name分組

hidden：暫存一些信息

file：文件上傳

accept設置上傳文件格式

multiple文件多選

submit/button/reset：submit可以提交表單，button不能提交表單，reset清空表單

placeholder：提示性文字，一旦輸入內容就消失

disabled：該input被禁用

require：該input必須被填寫

select

select用來設置下拉菜單，屬性multiple可設置多選

option標簽，屬性selected：默認選擇

textarea：多行文本輸入，rows，cols設置默認行列 表單腳本


    Red
    Green
    Blue

可以通過document.forms[0]獲得表單

myColor.elements[0]可獲得到表單中的第一個字段，多選框name不同，也可以用name的值查找，如myColor.elements[color1]。

myColor.elements.length取得表單中字段的數量.

myColor.elements[0].disabled = true禁用表單當前字段，true為禁用，false為恢復使用，可以應用在表單提交之后，防止用戶反復提交表單

myText.addEventListener("click",function(){
    if(this.elements[3].type === "submit"){
        this.elements[3].disabled = true
    }
})

autofocus在表單字段中設置，當瀏覽器加載時自動把焦點移到該字段

focus()、change()、blur()分別是獲得焦點時觸發，失去焦點并改變value才觸發，失去焦點時觸發，其中change()和blur()先后順序并沒有嚴格規定。
輸入框選中高亮，輸入非數字，改變顏色

  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可設置size、maxlength，不能設置rows、cols；而textarea則可以，但不能設置最大字符數。

GPU云服務器云服務器 html腳本運行腳本面板腳本腳本安全配置腳本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96105.html

表單腳本

摘要：文本框腳本有兩種方式表現文本框的單行文本框和的多行文本框。對于單行文本框，通過特性可以指定文本框能夠顯示的字符數，通過特性訪問其內容，而則用于指定其可以接受的最大字符數。 title: 表單腳本 date: 2016-12-19 15:17 tags: JavaScript 0x00 表單基礎在 HTML 中，表單由元素來表示，但是在 JavaScript 中，表單對應...

stormgens 2019-08-21 11:19 評論0 收藏0
JavaScript 表單腳本——“表單的基礎知識”的注意要點

摘要：處理表格和提交等等重置表單重置表單應該使用或當用戶單擊重置按鈕重置表單時，會觸發事件，可以在必要的時候取消重置操作另外也可以通過腳本調用方法重置表單，在調用方法重置表單時會觸發事件。在中，表單中新增加了屬性，自動把焦點移動到相應字段。 HTMLFormElement繼承了HTMLElement，它自己獨有的屬性和方法有： acceptCharset:服務器能夠處理的字符集，等價于HT...

chnmagnus 2019-08-19 17:26 評論0 收藏0
JavaScript 表單腳本

摘要：文本框獲得焦點時，選中其中所有的文本思路利用焦點事件事件，在文本框獲得焦點時，利用其方法選中所有文本。自動切換焦點思路利用事件檢測用戶輸入新字符后，文本框內的字符串是否已經達到最大長度，若達到最大長度，則將焦點切換至下一個文本框。 JavaScript 表單腳本通過 document.forms 可以獲得一個包含當前頁面中所有表單的集合 HTMLFormElement 接口下面是這...

PrototypeZ 2019-08-20 11:26 評論0 收藏0
JavaScript 表單腳本——“表單序列化”的注意要點

摘要：瀏覽器如何將數據發送給服務器對表單字段的名稱和值進行編碼，使用和號分隔不發送禁用的表單字段只發送勾選的復選框和單選按鈕不發送為和的按鈕多選框中每個選中的值單獨一個條目在單擊提交按鈕提交表單的情況下，也會發送提交按鈕。否則不發送提交按鈕。瀏覽器如何將數據發送給服務器：對表單字段的名稱和值進行URL編碼，使用和號（&）分隔不發送禁用的表單字段只發送勾選的復選框和單選按鈕不發送t...

BlackHole1 2019-08-19 17:29 評論0 收藏0