자바스크립트 입력 객체, From 객체 예제
Form객체는 입력양식 객체 중의 하나로 html의 <form>태그와 기능이 비슷하다. Form객체는 Document객체의 하위객체로 documnet.form[n]과 같은 방식을 사용할수도 있지만 주로 Form태그의 name속성을 통해 이름을 지정하고 사용한다.
형식
<form name = "폼이름" target = "창이름" action = "URL"
method = get 또는 post enctype = 형식
onReset = "핸들러 텍스트" onSubmit = "핸들러 텍스트">
입력객체
</form>
입력객체는 <form>과 </form>사이에 자료입력을 위해 사용하는 form 원소(element)를 의미한다. Form 원소는 input, textarea, select 등을 사용하며, 웹 브라우저는 html웹 문서에 이러한 form원소가 나타나면, 각 form원소에 대해 각각의 객체를 생선한다. 따라서, form원소 객체는 input을 사용한 text객체, textarea객체 등을 사용한다. <input>태그는 type속성에 따라 여러 가지 입력양식을 사용할 수 있다.
form태그의 속성
name : 입력양식의 이름
target : 입력양식의 데이터를 서버로 보낸 후에 결과를 특정 윈도우에서 출력할 경우에 지정
action : 사용자가 입력한 데이터를 처리할 서버 프로그램의 url주소 위치 지정
method : 데이터를 어떠한 방식으로 서버로 전송할 지는 지정
enctype : 서버로 보내질 데이터 타입 지정
예제
<html>
<body>
<Form name="test">
사용자명 :
<input type="text" name="text1" value="" size=20><br>
패스워드 :
<input type="password" name="password1" value="" size=20><br>
<hr>
용도는? : <p>
<input type="checkbox" name="checkbox1" value="internet">인터넷을 사용한다<br>
<input type="checkbox" name="checkbox2" value="music">음악을 듣는다<br>
<hr>
<input type="radio" name="sex" value="Male">남자
<input type="radio" name="sex" value="Female">여자<br>
당신의 컴퓨터는? : <br>
<select name="select1" multiple>
<option>pc
<option>unix
<option>mac
</select><br>
<textarea name="textarea1" rows=3 cols=20>하고싶은 말은....</textarea>
<input type="submit" name="submit1" value="전송">
<input type="reset" name="reset1" value="취소">
</Form>
</body>
</html>
중요한건 </script>다음에 form을 넣어야 한다는거...
결과보기
tip.method 속성의 get방식과 post방식의 차이
get:
웹브라우저의 url위치에 http://kr.search.yahoo.com/bin/search?p=flash 형식의 주소로 표기되어 있고, html 웹 문서의 입력 내용을 "?"이후의 p=flash값으로 정송하는 방식을 get방식이라 부른다. get방식은 웨브라우저의 url정보가 공개되어 있기 때문에 클라이언트에서 서버로 전송될 때 노출될 위험이 있다. 그리고 서버로 보낼 수 있는 데이터의 양도 한계가 있기 때문에 많은 양의 데이터를 보낼 수 없다.
post:
asp나 cgi에서 변수 값을 넘기 때, 데이터를 http 헤더에 포함시켜 보내는 방식이다 많은 양의 데이터를 한꺼번에 보낼 수 있고, 전송시에 정보가 url위치에 노출되지 않아 회원가입 등의 자료를 입력할 때 유용하다.
Form객체는 입력양식 객체 중의 하나로 html의 <form>태그와 기능이 비슷하다. Form객체는 Document객체의 하위객체로 documnet.form[n]과 같은 방식을 사용할수도 있지만 주로 Form태그의 name속성을 통해 이름을 지정하고 사용한다.
형식
<form name = "폼이름" target = "창이름" action = "URL"
method = get 또는 post enctype = 형식
onReset = "핸들러 텍스트" onSubmit = "핸들러 텍스트">
입력객체
</form>
입력객체는 <form>과 </form>사이에 자료입력을 위해 사용하는 form 원소(element)를 의미한다. Form 원소는 input, textarea, select 등을 사용하며, 웹 브라우저는 html웹 문서에 이러한 form원소가 나타나면, 각 form원소에 대해 각각의 객체를 생선한다. 따라서, form원소 객체는 input을 사용한 text객체, textarea객체 등을 사용한다. <input>태그는 type속성에 따라 여러 가지 입력양식을 사용할 수 있다.
form태그의 속성
name : 입력양식의 이름
target : 입력양식의 데이터를 서버로 보낸 후에 결과를 특정 윈도우에서 출력할 경우에 지정
action : 사용자가 입력한 데이터를 처리할 서버 프로그램의 url주소 위치 지정
method : 데이터를 어떠한 방식으로 서버로 전송할 지는 지정
enctype : 서버로 보내질 데이터 타입 지정
예제
<html>
<body>
<Form name="test">
사용자명 :
<input type="text" name="text1" value="" size=20><br>
패스워드 :
<input type="password" name="password1" value="" size=20><br>
<hr>
용도는? : <p>
<input type="checkbox" name="checkbox1" value="internet">인터넷을 사용한다<br>
<input type="checkbox" name="checkbox2" value="music">음악을 듣는다<br>
<hr>
<input type="radio" name="sex" value="Male">남자
<input type="radio" name="sex" value="Female">여자<br>
당신의 컴퓨터는? : <br>
<select name="select1" multiple>
<option>pc
<option>unix
<option>mac
</select><br>
<textarea name="textarea1" rows=3 cols=20>하고싶은 말은....</textarea>
<input type="submit" name="submit1" value="전송">
<input type="reset" name="reset1" value="취소">
</Form>
</body>
</html>
중요한건 </script>다음에 form을 넣어야 한다는거...
결과보기
tip.method 속성의 get방식과 post방식의 차이
get:
웹브라우저의 url위치에 http://kr.search.yahoo.com/bin/search?p=flash 형식의 주소로 표기되어 있고, html 웹 문서의 입력 내용을 "?"이후의 p=flash값으로 정송하는 방식을 get방식이라 부른다. get방식은 웨브라우저의 url정보가 공개되어 있기 때문에 클라이언트에서 서버로 전송될 때 노출될 위험이 있다. 그리고 서버로 보낼 수 있는 데이터의 양도 한계가 있기 때문에 많은 양의 데이터를 보낼 수 없다.
post:
asp나 cgi에서 변수 값을 넘기 때, 데이터를 http 헤더에 포함시켜 보내는 방식이다 많은 양의 데이터를 한꺼번에 보낼 수 있고, 전송시에 정보가 url위치에 노출되지 않아 회원가입 등의 자료를 입력할 때 유용하다.
