#12 select 그리고 textarea
select - 보기 중에 골라보자
- select는 다수의 옵션을 포함할 수 있는 선택 메뉴이다.
- input 태그와 마찬가지로 name 태그를 지정할 수 있다.
- 각각의 option에는 value 속성을 지정할수 있다. (실제로 처리될 값을 나타낸다)
textarea
- 여러줄의 일반 텍스트를 입력할수있는 입력 요소이다.
- text와 다르게 여러줄을 사용할수있음
실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다양한 입력 요소 만들기</title>
</head>
<body>
<h1>키우고 싶은 동물 고르기</h1>
<select name="pet" multiple>
<option value="dog">강아지</option>
<option value="cat">고양이</option>
<option value="hamster" selected>햄스터</option>
<option value="parrot">앵무새</option>
</select>
<br>
<textarea name="content" cols="30" rows="10">기본적으로 쓰여 있는 텍스트</textarea>
</body>
</html>
name,id
name
- document.getElementsByName("name")
- name은 page안에서 중복되어 사용이 가능하다.
- action에 해당하는 페이지로 전달하는 파라미터로 사용된다.
- GET/POST 방식으로 값을 전달하고 싶은 TAG에 사용한다.
- Form 객체들(input , radio box ,checkbox )에서 전송되는 Parameter의 Key값으로 사용된다.
id
- document.getElementById("폼 id").value
- id는 page안에서 중복이 불가능하다.
- JavaScript에서 다루기 위해 지정한다.
정리
- id는 element, name은 elements 이다.
- name은 배열과 같이 인덱스값 [i]을 써줘야한다.
- name은 MAP과 비슷하게 name값이 key, name의 value가 value가 된다.
댓글