HTML 양식에 대한 깊은 이해

양식 요소

HTML에서 HTML5로 양식 관련 요소가 크게 확장되었으며 기본적으로 우리의 일반적인 요구를 충족할 수 있습니다. 하지만 실제 업무에서는 상호 작용 또는 브라우저 호환성 요구 사항으로 인해 기본 양식 요소를 확장하거나 시뮬레이션해야 하는 경우가 있습니다. 하지만 그 전에 다양한 형태 요소를 명확하게 이해하고 숙달하는 것이 여전히 중요합니다. 이 기사에서는 양식 요소(기본적으로 HTML5 양식 요소)에 대해 자세히 설명하겠습니다.

양식

● 양식은 제출 이벤트를 자동으로 처리합니다(제출 이벤트는 일반적으로 type=submit의 입력 또는 버튼 요소에 의해 트리거됩니다)

●양식은 자동으로 확인 레이어를 수행하고 form.novalidate를 사용하여 설정합니다. 기본 유효성 검사

●Form은 각 양식 요소의 이름을 기반으로 해당 사용자 입력을 얻은 다음 작업 속성에 해당하는 URL 끝에 쿼리 ​​문자열 형식의 양식 데이터를 추가합니다. . 기본 요청 방법은 GET이고 기본 작업은 현재 URL입니다.

●event.target.elements는 모든 대화형 요소를 반환합니다

<form novalidate>
  <input name=&#39;username&#39; required/>
  <input name=&#39;passworkd&#39; type=&#39;password&#39; required/>
  <input name=&#39;email&#39; type=&#39;email&#39;/>
  <input type=&#39;submit&#39; value=&#39;submit&#39;/>
</form>

위 코드를 실행하면 양식을 제출한 후 브라우저의 주소가 쿼리를 추가하는 것을 볼 수 있습니다. username=tom&passworkd=123&email=test%40gmail.com

상호작용 요소

사용자와 상호 작용하고 사용자 입력을 받아야 하는 유형을 분류합니다. 양식 요소를 대화형 양식 요소로 사용합니다.

일부는 다음과 같습니다.

●입력: 일반적으로 사용되는 유형에는 체크박스, 전화번호, 전화번호, 이메일 등이 포함됩니다.

●텍스트 영역

●select

●옵션

피드백 요소

단순히 정보를 피드백하고 사용자와의 상호 작용이 필요하지 않은 양식 요소를 피드백 양식으로 분류합니다. 요소.

일부는 다음과 같습니다.

●meter

●output

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type=&#39;number&#39; value=&#39;50&#39; name=&#39;a&#39; />
    <input type=&#39;number&#39; value=&#39;10&#39; name=&#39;b&#39; />
    <output name=&#39;result&#39;>60</output>
</form>

출력의 경우 form.oninput에서 계산된 값을 설정할 수 있습니다

그룹화된 요소

이 유형의 양식 요소는 여러 양식 요소를 그룹화하는 데 사용됩니다.

일부 목록은 다음과 같습니다.

●fieldset

●optgroup

<form>
  <select>
    <optgroup label=&#39;group1&#39;>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </optgroup>
    <optgroup label=&#39;group2&#39;>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </optgroup>
    <optgroup label=&#39;group3&#39;>
      <option>7</option>
      <option>8</option>
      <option>9</optioin>
    </optgroup>
  </select>
</form>

label

● 용도 ID

와 연결된 해당 대화형 요소에 연결할 수 있습니다. 여러 개의 대화형 요소를 래핑하는 데 사용할 수 있으며 첫 번째 요소를 제어할 수 있습니다.

●레이블을 중첩하는 것은 권장되지 않습니다

<form>
  <fieldset>
    <legend>Title</legend>
    <label for=&#39;radio&#39;>Click me</label>
    <input type=&#39;radio&#39; id=&#39;radio&#39;/>
  </fieldset>
</form>

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label>
      男 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;male&#39; />
    </label>
    <label>
      女 <input type=&#39;radio&#39; name=&#39;gender&#39; id=&#39;female&#39;/>
    </label>
  </fieldset>
</form>

JavaScript를 사용하여 양식 처리

필드 추상화

가장 기본적인 구조:

 field: {
    name: String,
    value: String || String[]
  }

● 값의 String[]을 주로 사용하며, 이를 String으로 나누어 합성한다

●복잡한 구조를 가진 이름의 경우 위의 코드와 같다면 keyPath

  const fromKeyValues = {
    'user.name': 'Tom',
    'user.phone[0].number': '123456',
    'user.phone[0].type': 'mobile'
  };

  const fromValues = {
    user: {
      name: 'Tom',
      phone: [
        {
          number: '123456',
          type: 'mobile'
        }
      ]
    }
  };

를 사용할 수 있다. 명확하지 않습니다. qs를 참조하세요

완전한 구현

●양식의 기본 제출 이벤트 방지

●값 대신 확인란을 선택해야 함

● select-multiple은 여러 값을 저장해야 합니다 ​​

●위의 특수 대화형 요소를 제외하고 다른 요소는 기본적으로 value에서 값을 가져옵니다

양식 .html

<form>
    <fieldset>
        <legend>Login</legend>
        <input name=&#39;username&#39; placeholder=&#39;username&#39; minlength=&#39;2&#39;/>
        <input name=&#39;password&#39; type=&#39;password&#39; placeholder=&#39;password&#39;/>
        <label>
            remember password            <input name=&#39;checkbox&#39; type=&#39;checkbox&#39;/>
        </label>
    </fieldset>
    <fieldset>
        <p class="gender">
            <legend>More Info</legend>
            <label>
                男                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;male&#39; />
            </label>
            <label>
                女                <input name=&#39;gender&#39; type=&#39;radio&#39; value=&#39;female&#39; />
            </label>
        </p>
        <select name=&#39;select&#39; multiple>
            <option>1</option>
            <optgroup label=&#39;2&#39;>
                <option>2.1</option>
                <option>2.2</option>
            </optgroup>
        </select>
    </fieldset>
    <button type=&#39;submit&#39;>Submit</button></form>

form.js

var $form = document.querySelector('form');

function getFormValues(form) {
  var values = {};
  var elements = form.elements; // elemtns is an array-like object

  for (var i = 0; i < elements.length; i++) {
    var input = elements[i];
    if (input.name) {
      switch (input.type.toLowerCase()) {
        case &#39;checkbox&#39;:
          if (input.checked) {
            values[input.name] = input.checked;
          }
          break;
        case &#39;select-multiple&#39;:
          values[input.name] = values[input.name] || [];
          for (var j = 0; j < input.length; j++) {
            if (input[j].selected) {
              values[input.name].push(input[j].value);
            }
          }
          break;
        default:
          values[input.name] = input.value;
          break;
      }
    }

  }

  return values;
}

$form.addEventListener(&#39;submit&#39;, function(event) {
  event.preventDefault();
  getFormValues(event.target);
  console.log(event.target.elements);
  console.log(getFormValues(event.target));
});