html 내부에는 여러개의 form들이 있을 수 있기 때문에 document.forms 로 제공된다.
let f:HTMLCollectionOf<HTMLFormElement> = document.forms;HTMLCollection 요소는 length, item(number index), namedItem(name or id)메소드를 제공한다.
form요소노드는 더이상 name속성을 사용하지 않고 id속성을 사용한다.
내부 form controll들은 name/value 쌍으로 submit되기때문에 form은 name속성을 가질 필요가 없다.
formElement는 elements라는 특별한 프로퍼티를 제공하는데 formElement.elements는 < form >내부 모든 컨트롤 요소들을 나열하는 HTMLFormControlsCollection을 반환한다.
예로 formElement.inputElement 이렇게 단축형으로 접근해도 되지만 let formControlls = document.forms[0].elements;로 할당후 formControlls.inputElement로 접근하는 것이 표준에 가깝다.
<body>
<form name="my">
<fieldset name="userFields">
<legend>info</legend>
<select id="genres">
<option value="rock">Rock</option>
<option value="blues" selected>Blues</option>
</select>
</fieldset>
</form>
</body>
let f:HTMLCollectionOf<HTMLFormElement> = document.forms;
let formControlls:HTMLFormControlsCollection = f.nameItem('my').elements;
form id에는 콜론 :과 점. 을 사용할 수 있다. (form에 name속성을 사용하지 않는다)
<form id="form:login">
</form>
<form id="form.register">
</form>
console.log( document.forms.namedItem('form:login'));
document.forms[0].elements.genres; // 표준형
document.forms[0].genres; // 단축형표준형과 단축형의 차이
<form id="form">
<input name="login">
</form>
<script>
alert(form.elements.login == form.login); // true, 동일한 <input>입니다.
form.login.name = "username"; // input의 name 속성을 변경합니다.
alert(form.elements.login); // undefined
alert(form.elements.username); // input
console.log(form.login.value); // 여전히 접근이 가능하다.???????
</script>
element.form으로 역참조
<form id="form">
<input type="text" name="login">
</form>
<script>
let login = form.login;
alert(login.form); // HTMLFormElement
</script>
select와 option
< select > 요소에는 세 가지 중요 프로퍼티가 있다.
-
select.options – < option > 하위 요소를 담고 있는 컬렉션
-
select.value – 현재 선택된 < option > 값
-
select.selectedIndex – 현재 선택된 < option >의 번호(인덱스)
< select >의 값을 설정하는 세 가지 방법
-
조건에 맞는 < option > 하위 요소를 찾아 option.selected속성을 true로 설정 ( 표준 )
-
select.value를 원하는 값으로 설정
-
select.selectedIndex를 원하는 option 번호로 설정
<select id="select">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
<script>
select.options[2].selected = true;
select.selectedIndex = 2;
select.value = 'banana';
</script>세 가지 코드의 실행 결과는 모두 같으나 첫번째 방법으로 설정하는 것이 좋다.
Option 생성자
option = new Option(text, value, defaultSelected, selected);
let sel:HTMLSelectElement = document.forms[0].elements.select;
sel.add(new Option('text', 'value'));
