JavaScript form_javascript 팁의 기본 이해

HTMLFormElement는 HTMLElement를 상속하며 고유한 속성과 메서드는 다음과 같습니다.

• acceptCharset: 서버가 처리할 수 있는 문자 집합으로, HTML의 accept-charset 기능과 동일합니다.
• action: 요청을 수신하는 URL로 HTML의 액션 기능과 동일합니다.
• 요소: 양식에 있는 모든 컨트롤의 컬렉션(HTMLCollection)
• enctype: 요청된 인코딩 유형
• 길이:
형식의 컨트롤 수
• 메서드: 전송할 HTTP 요청 유형, 일반적으로 가져오기 또는 게시
• name: 양식 이름
• reset(): 모든 양식 필드를 기본값으로 재설정합니다. ​​
• submit(): 양식 제출
• target: 요청을 보내고 응답을 받는 데 사용되는 창 이름
  

양식 요소의 참조를 가져오는 방법은 getElementById이거나 document.forms의 숫자 인덱스 또는 이름 값일 수 있습니다.

1. 양식 제출

양식 제출 버튼에는 세 가지 유형이 있습니다.

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

위 방법으로 양식을 제출하면 브라우저 요청이 서버로 전송되기 전에 제출 이벤트가 트리거되어 양식 데이터를 확인하고 양식 제출 허용 여부를 확인할 수 있습니다. 양식 제출:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

또한 js 스크립트를 통해 submit() 메소드를 호출하여 양식을 제출할 수도 있습니다. 양식을 제출하기 위해 submit() 이벤트가 트리거되지 않습니다.

var form = document.getElementById("myForm");
form.submit();

처음 양식을 제출한 후 오랜 시간 동안 응답이 없으면 사용자가 조급해하고 제출 버튼을 여러 번 클릭하여 양식을 반복적으로 제출하는 경우가 많으므로 제출 버튼을 비활성화해야 합니다. 또는 처음으로 양식을 제출한 후 onsubmit을 사용하면 이벤트가 후속 작업을 방해합니다.

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

2. 양식 재설정

재설정 양식은 입력 또는 버튼을 사용해야 합니다.

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

사용자가 양식을 재설정하기 위해 재설정 버튼을 클릭하면 재설정 이벤트가 트리거되고 필요한 경우 재설정 작업을 취소할 수 있습니다. ​​

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

또한 js 스크립트를 통해 재설정() 메서드를 호출하여 양식을 재설정할 수도 있습니다. 양식을 재설정하기 위해 재설정() 메서드가 호출되면 재설정 이벤트가 트리거됩니다.

var form = document.getElementById("myForm");
form.reset();

3. 양식 필드

각 양식에는 다음 양식의 모든 양식(필드) 모음인 요소 속성이 있습니다.

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

여러 양식 컨트롤이 하나의 이름(라디오 버튼)을 사용하는 경우 해당 이름을 딴 NodeList가 반환됩니다.

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

이름은 모두 색상입니다. 요소["color"]에 액세스하면 NodeList가 반환됩니다.

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

일반 양식 필드 속성

• disabled: 현재 필드가 비활성화되었는지 여부를 나타내는 부울 값
• form: 현재 필드가 속한 양식에 대한 포인터: 읽기 전용
• name: 현재 필드의 이름
• readOnly: 현재 필드가 읽기 전용인지 여부를 나타내는 부울 값입니다.
• tabIndex: 현재 필드의 전환(탭) 번호를 나타냅니다.
• 유형: 현재 필드의 유형
• value: 서버에 제출된 현재 필드의 값입니다. 파일 필드의 경우 이 속성은 읽기 전용이며 컴퓨터의 파일 경로를 포함합니다.
  

제출 이벤트를 통해 양식을 제출한 후 제출 버튼을 비활성화할 수 있지만, 브라우저마다 onclick에 "시간 차이"가 있기 때문에 onclick 이벤트를 사용할 수 없습니다.

공유 양식 필드 방법

• focus(): 키보드 이벤트에 응답할 수 있도록 필드를 활성화합니다.
blur():
• 는 초점을 잃고 거의 사용되지 않습니다.
  리스닝 페이지의 로드 이벤트에 focus() 메서드를 추가할 수 있습니다.

需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

autofocus
如：

<input type="text" name="lastName" autofocus>

或者检测是否设置了该属性，没有的话再调用focus()方法：

window.addEventListener("load", function () {
  var form = document.forms["myForm"];
  if (form["lastName"].autofocus !== true) {
    form["lastName"].focus();
  };
});

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

blur： 当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：

var form = document.forms["myForm"];
var firstName = form.elements["firstName"];

firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);

function handler() {
  switch (event.type) {
    case "focus":
      if (firstName.style.backgroundColor !== "red") {
        firstName.style.backgroundColor = "yellow";

      };
      break;
    case "blur":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
    case "change":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助。