블로그 이미지
주로 인재개발원 등의 사이버학습을 정리, 요약하는 상시학습 블로그입니다. 깨비형
« 2017/12 »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Archive»

체험 블로그 마케팅 서비스 OLPOST

Category»

Notice»

Statistics Graph

 

'checkbox'에 해당되는 글 1

  1. 2013.02.06 17. 폼(form) 만들기(1)
 

17. 폼(form) 만들기(1)

컴퓨터 활용/홈페이지 과정 | 2013.02.06 00:00 | Posted by 깨비형

1. form태그의 기본형식


○ 폼 태그

- 입력양식을 만들 때 사용(예, 방명록, 게시판, 설문조사, 회원등록 폼 등)

- <form> … </form>태그 사이에 필요한 폼들을 삽입. <form>태그 안에 또 다른 <form>태그를 삽입할 수 없다.

- 양식 문서에서 흔히 보게 되는 [전송]단추나 [Submit]단추를 누르면 <form>과 </form> 사이의 내용들이 폼(form)을 처리하는 CGI프로그램으로 전송


○ 폼 태그의 기본 형식


 <form action="데이터 전송될 장소" method="전송방식">
    다양한 폼 형식
 </form>


○ 폼 태그에 사용하는 속성


속성 

설       명 

 <method>  <Form>태그 안의 폼들을 어떻게 넘겨 줄 것인지 전송 방법을 선택
 
사용할 수 있는 값은 get과 post인데 대부분 post를 사용
 <name>  폼의 이름을 지정

 한 문서 안에 여러개의 <Form>태그가 있을 경우 폼을 구분하기 위해 사용

 <action>

 <Form>태그 안의 내용들을 처리해 줄 CGI프로그램을 지정
 CGI프로그램은 인터넷에 항상 연결되어 있는 서버 컴퓨터에 미리 설치되어 있어야 함


※ CGI (common gateway interface) 

  •  CGI는 웹서버에 있어 사용자의 요구를 응용프로그램에 전달하고 그 결과를 사용자에게 되돌려주기 위한 표준적인 방법이다. 사용자가 하이퍼링크를 클릭 하거나 웹사이트의 주소를 입력함으로써 웹 페이지를 요청하면, 서버는 요청된 페이지를 보내 준다. 
  • 그러나, 사용자가 웹페이지의 양식에 내용을 기재하여 보냈을 때, 그것은 보통 응용프로그램에 의해 처리될 필요가 있다. 웹 서버는 으레 그 양식 정보를 조그만 응용프로그램에 전달하는데, 이 프로그램은 데이터를 처리하고 필요에 따라 확인 메시지를 보내 주기도 한다. 
  • 이렇게 서버와 응용 프로그램간에 데이터를 주고받기 위한 방법이나 규약들을 cgi라고 부른다. 
  • 만약 웹사이트를 만들 때 어떠한 제어를 위해 cgi 프로그램을 사용하기 원하면, html 파일 내에 있는 url 내에 그 프로그램의 이름을 기술하면 된다. 만약 폼을 만들려고 할 때, 이 url은 forms 태그의 일부로서 기술될 수 있는데, 예를 들어 다음과 같이 쓸 수 있을 것이다. 
     <form method=post action=http://www.mybiz.com/cgi-local/formprog.pl> 
  • 이 태그의 결과로서 mybiz.com에 있는 서버는 입력된 데이터를 저장하기 위해 제어권을 "formprog.pl"이라는 cgi 프로그램에 넘기고, 확인 메시지를 되돌려 준다 
  • (여기서 .pl은 perl로 작성된 프로그램이라는것을 가리키지만, cgi는 다른 언어로도 작성될 수 있다)



2. Text필드와 Pasword필드 폼 만들기


○ 기본 형식

 <form>

 <input type="text/password" name="이름" value="기본문자" size="너비" maxlength="최대 문자수">

 </form>


type=입력받을 입력 양식을 지정(text/password)

name=글상자의 입력 필드의 이름을 지정. 양식내용을 수신할 때 데이터를 가려내기 위해 사용(폼 안의 이름을 name라 입력한 것은 인터넷을 접속한 사용자가 입력한 실제 이름을 담아 가져갈 고유한 항목 이름이다.만일 홍길동이라 이름을 입력하면 홍길동이란 이름을 name란 그릇에 담아 가져간다는 뜻)

value=기본적으로 표시될 기본 문자를 나타냄

size=입력필드의 너비(문자수)

maxlength=글자사이에 입력할 수 있는 최대 문자수


○ text와 password의 차이점 : 입력한 내용이 화면에 그대로 나오는 것이 text, password는 *로 표시됨



3. radio 버튼과  checkbox 만들기


○ 기본형식

 <form>

       <input type='"radio/checkbox" name="입력필드 이름" value="서버로 전송될 텍스트">

 </form>


name 속성은 입력 칸의 이름을 설정하고 질문 항목의 내용을 반영한다.

value속성은 항목을 선택하였을 때, 서버로 보내지는 text 내용으로 어느 항목을 선택했는지 알 수 있도록 선택 목록 내용을 입력한다. 이에 따라서 어떤 질문에 대해 어떤 회답을 했는지 구별 할 수 있다.   선택목록 중에서 가장 많이 선택되는 항목에 미리 선택되어 나타나도록 checked속성을 추가할 수 있다.


○ radio와 checkbox의 차이점 : 라디오버튼은 오직 하나만 선택할 수 있고, 체크박스는 여러개의 항목을 한꺼번에 선택할 수 있다.





저작자 표시 동일 조건 변경 허락
신고

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

19. 이미지 맵(map) 만들기  (0) 2013.02.06
18. 폼(form) 만들기(2)  (0) 2013.02.06
17. 폼(form) 만들기(1)  (0) 2013.02.06
18. 폼(form) 만들기(2)  (0) 2013.02.06
16. 인라인 프레임(iframe) 만들기  (0) 2013.02.05
15. 프레임(frame) 만들기(2)  (0) 2013.02.05