폼 요소에 접근

폼은 특별한 컬렉션이 있습니다. document.forms, form.elements
그들은 name값으로 특정 요소에 접근이 가능합니다.

input 에 많이 쓰는 focusing/blur 이벤트

<form name="my">
  <input name="one" value="1">
  <input name="two" value="2">
</form>

<script>
  // get the form
  let form = document.forms.my; // <form name="my"> element

  // get the element
  let elem = form.elements.one; // <input name="one"> element

  alert(elem.value); // 1
</script>

<!-- 2 -->
<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0];

let ageElems = form.elements.age;

alert(ageElems[0]); // [object HTMLInputElement]
</script>

폼 요소 값에 접근

value, checked 프로퍼티를 이용해서 접근할 수 있습니다.

input.value = "New value";
textarea.value = "New text";

input.checked = true; // for a checkbox or radio button

select

select.options - 셀렉트의 옵션들 컬렉션.
select.value - 현재 선택된 옵션
select.selectedIndex - 현재 선택된 옵션의 인덱스 번호
option.selected - true면 선택하는 것.

<select id="select" multiple>
  <option value="blues" selected>Blues</option>
  <option value="rock" selected>Rock</option>
  <option value="classic">Classic</option>
</select>

<script>
  // get all selected values from multi-select
  let selected = Array.from(select.options)
    .filter(option => option.selected)
    .map(option => option.value);

  alert(selected); // blues,rock
</script>

option

option = new Option(text, value, defaultSelected, selected);

• text - 옵션 글자
• value - 옵션 값
• defaultSelected - true면 html 속성이 selected를 만들어 냄.
• selected - true면 option이 만들어지지만 html 속성으로 들어가는 건 아닌갑다.

let option = new Option("Text", "value");
// creates <option value="value">Text</option>

let option = new Option("Text", "value", true, true);

event: focus / blur

버블링이 일어나지 않는 이벤트들입니다.
focus - 포커스 상태 (버블링버전: focusin)
blur - 포커스 해재 상태 (버블링버전: focusout)
tabindex - html 속성으로 포커스 받지 못하는 요소를 포커스 받게 해줌.

• tabindex="0" 다른 포커싱 되는 요소들과의 순서를 깨지않으면서 포커스 됨
• tabindex="-1" tab키로 포커싱을 받진 못하지만 elem.focus()이벤트는 트리거됨.

event: change

요소의 변경이 완료되면 트리거됩니다.

event: input

유저에 의해 값이 수정되는 모든 경우에 발생합니다.

event: cut, copy, paste

event: submit

server에 폼데이터를 보내기 전에 유효성 검사를 하고 보내는 이벤트