html form 요소

form 제출

form 요소에 중첩된 input이나 button 요소를 form 제출 컨트롤로 사용할 수 있다.
type 속성에 submit을 지정해주면 된다. form에 중첩되어 있는 button의 경우에는 default로 submit type이 지정된다.

아래의 html 코드에서 form에 중첩된 세가지 요소 모두 제출 컨트롤로 사용할 수 있다.

<form>
  <input type="submit" value="제출"/>
  <button type="submit">제출</button>
  <button>제출</button>
</form>

form의 action 속성으로 form을 제출할 url을 지정할 수 있고, method 속성으로 제출시 사용할 http method를 지정할 수 있다.

submit시 제출되는 정보는 form에 중첩된 입력 컨트롤(input, textarea 등) 중 name 속성이 있는 모든 컨트롤의 value로 이루어진다.

아래의 html 코드에서 form 요소 내부에 input이 두 개가 있지만 사진에서 submit 결과에는 name이 있는 input의 value만 submit 정보에 포함되는 것을 알 수 있다.

<form>
    <input name="include" value="include input" />
    <input value="not include input" />
    <button>submit</button>
</form>

dialog 요소 내부에 form 요소가 중첩된 경우, form submit시 dialog가 닫히게 된다.

    <button onclick="document.getElementById('myDialog').showModal()">
      Open Dialog
    </button>

    <dialog id="myDialog">
      <form method="dialog">
        <h2>Form in Dialog</h2>
        <label> Name: <input type="text" name="name" required /> </label>
        <br /><br />
        <button type="submit">Submit</button>
        <button type="submit" formmethod="dialog" formnovalidate>Cancel</button>
      </form>
    </dialog>

Cancel 버튼의 formmethod="dialog"는 dialog에 중첩된 form의 method를 뒤집어쓴다. 만약 form의 method 속성이 dialog라면 form은 저장은 되지만 제출은 되지 않기 때문이다. formnovalidate 속성은 form의 제출 데이터를 검증하지 않도록 하는 속성이다.

form과 form의 제출 버튼에 지정된 속성이 다른 값이라면 제출 버튼에 설정된 값이 우선순위를 가진다. 만약 form 요소에는 method와 form 제출 버튼의 formmethod가 다른 값이라면 제출 버튼의 formmethod가 우선순위를 가진다는 뜻이다.

label

제출 버튼을 제외한 모든 form 컨트롤은 label을 가진다. label은 없어도 동작하기는 하지만 사용자가 어떠한 값을 입력할지 가이드 하기 위해서 권장된다. label 요소에 for 속성을 연결한 컨트롤의 id를 사용하면 label이 차지하는 영역 만큼 컨트롤의 click 영역이 넓혀진다. 컨트롤을 label에 중첩시키면 for 속성 없이도 click 영역을 넓힐 수 있다.

아래의 html 코드에서 input 둘 다 label 영역 클릭으로 input을 focus 할 수 있다.

<label for="nameinput">name</label>
<input id="nameinput"/>

<label>
  age
  <input/>
</label>

입력 유형에 따른 동적 키보드

사용자가 동적 키보드를 사용하는 환경(모바일)이라면 input의 type 속성에 따라 동적 키보드에 표시할 키 배열을 변경할 수 있다.
예를들어, input의 type이 email인 경우에는 "@", "." 가 포함된 키보드가 표시되고, type이 tel인 경우에는 숫자 위주의 키보드가 표시된다.

마이크 및 카메라 엑세스

input 요소의 type을 file로 지정하면 파일을 선택해서 업로드 할 수 있다. accep 속성으로 원하는 파일의 확장자까지 제한할 수 있다.

capture 속성으로 파일 대신에 사용자가 직접 카메라나 마이크를 선택하도록 할 수 있다. 이 속성은 데스크탑 환경에서는 일반 파일 탐색기를 실행할 가능성이 높고, 모바일에서 더 잘 작동된다. capture 속성의 값은 user(셀프 카메라) 또는 environment(후방 카메라) 두 가지가 있다. accept 속성에서 image를 허용할 경우 카메라 어플을 실행하고, audio를 허용할 경우에는 음성 녹음 어플을 실행하게 된다.

참고 : mdn - capture
위의 mdn 문서를 모바일로 접속할 경우 카메라, 음성 녹음 어플을 실행하는것을 테스트 해 볼 수 있다.

기본 제공 검증

required, pattern, min, max, type와 같은 속성으로 기본적인 유효성을 검사할 수 있다. :valid, :invalid, in-range, :out-of-range등의 가상 클래스로 상황에 따른 스타일도 적용할 수 있다.

유효성 검사를 통과하지 못하면 form을 제출 할 수 없다. form element는 ValidityState 인터페이스 타입인 validity property를 가진다. ValidityState 인터페이스는 유효성 검증에 필요한 여러 property를 가지고, 이 property 중 하나라도 true가 되면 유효성 검사에 불합격 하게 된다.

[참고 : mdn - ValidityState]