/*
포스팅 17.Javascript에서는 html에서 form이라는 태그에 대해서 살펴보았습니다.
그럼 이제 form 객체에 대해서 볼까요?
form 객체 :: document 객체 하위에 있는 내장 객체
<form> 태그를 자바스크립트로 정의
폼 형식의 내용을 가져오거나 서버로 제출
document.form명.type명.속성(or 메소드, 이벤트)
이번에서는 실제 Javascript 'document' 객체 하위에 있는
내장객체 form으로 정의하여 type.method(or 속성, 이벤트) 등을
사용하는 방법을 이번장에서 보겠습니다
일단 간단한 form 객체를 만들어보겠습니다.
<html>
<head>
</head>
<body onload="document.frm.query.focus();">
<!-- 이부분은 frm이라는 form에 focus()를 맞추라는것!
창을 키면 시작부터 input 창에 키보드 커서가 반짝거리게 됩니다. -->
<form name=frm action=http://search.naver.com/search.naver method=get>
<!-- action은 입력양식을 처리한 서버의 URL을 지정하는곳이라고 했었는데,
URL을 naver의 검색창으로 해놔버렸습니다. -->
<input type=text name=query>
<!-- 실제 input창을 만들구요 -->
<input type=submit value="검색">
<!-- submit :: 입력양식에 입력된 내용을 폼에서 정의된 서버로 제출하는 일을 합니다. -->
</form>
</body>
</html>
NAVER
홍보글이
되어버린듯한?
(사실 IU 홍보임)
ㅋㅋㅋ
아 물론
검색을 클릭하면
아래 검색창으로
넘어가게 됩니다.
그림이 오해의
소지가 좀 있네요
일단 간단한 form 태그 예제를 보고 시작합니다.
form 객체의 속성
name :: <form> 태그의 name 속성 정보를 가져옴
method :: <form> 태그의 method 속성 정보를 가져옴
action :: <form> 태그의 action 속성 정보를 가져옴
target :: <form> 태그의 target 속성 정보를 가져옴
elements :: <form> 태그 안의 입력양식들을 배열로 정의
length :: <form> 태그 안의 입력양식들의 개수
form 객체의 메소드, 이벤트
메소드
blur() :: 커서를 사라지게함
reset() :: 입력된 내용을 초기화
submit() :: 입력된 내용을 지정한 서버로 전송
이벤트
onReset :: reset 단추를 누를 때 이벤트 발생
onSubmit :: submit단추를 누를 때 이벤트 발생
<!-- 좀 쉬어갑니다 .. ㅠㅠ -->
text, password 객체
input type text :: form 객체 안에 한줄 입력양식들입니다.
이 객체들은 태그의 정보를 가져오거나 제어하는 역할을 합니다.
속성?
name :: 폼 양식의 name에 입력된 값을 가져옴
value :: 현재 글상자에 입력된 값을 가져옴
defaultvalue :: 폼 양식의 value에 입력된 초기값을 가져옴
메소드
focus() :: 글상자에 커서 이동
blur() :: 글상자에 커서 지움
select() :: 글상자의 내용을 모두 선택
eval() :: 수식으로 되어 있는 문자열을 계산하여 실수로 바꿈
이벤트
onfocus :: 글상자에 커서가 위치할 때
onblur :: 글상자의 커서가 벗어날 때
onchange :: 글상자의 내용이 바뀔 때
onselect :: 글상자를 선택하거나 내용을 선택할 때
음.. 위 내용을 사용한 간단한 예제를 볼께요
<html>
<head>
</head>
<body onload="document.frm.query.focus()">
<form name=frm action=http://search.naver.com/search.naver method=get>
<input type=text name=query onblur="alert('왜 때셨음?')" onfocus="alert('커서가 이동했군요')">
<input type=submit value="검색">
</form>
</body>
</html>
실행 시키자마자 body 태그 onload에서 document 안에 form네임 안에 query ::(input 입력양식 속성)안에
존재하는 함수 focus()를 실행시키면 query라는 입력양식에 커서가 올라가게 됩니다.
이때 onfocus 이벤트가 걸려있기 때문에 커서가 올라가게 되면
커서가 이동했군요 라는 경고창이 뜨게 되고,
검색창 커서를 다른곳으로 가도록 입력창을 제외한 다른 부분을 클릭하게 된다면
왜 때셨음? 이라는 경고창이 뜨겠죠
아악.. 제가 써놓고 제가 뭐라는지 모르겠네요
컨디션이 좋아야 뭐든 잘되는 법인거 같습니다.
앞뒤가 우중충 하네요.. 나중에 수정이라도 해야겠습니다.
감사합니다 ㅠ
'Web programing > Javascript' 카테고리의 다른 글
| 로또번호 자동생성기 (0) | 2014.12.10 |
|---|---|
| 티스토리 블로그 배경에 눈내리는 효과 주기 (39) | 2014.12.05 |
| Javascript Array 배열, Location 객체 (0) | 2014.07.26 |
| Javascript 내장객체 사용법 (0) | 2014.07.26 |
| Javascript 내장함수 eval() isNaN() parseInt() (0) | 2014.07.26 |