[HTML 입력 양식] form 요소

공부 참고 : http://tcpschool.com/html/html_input_forms

▶ form 요소

▣ form 요소

- form 요소를 사용하여 사용자로부터 입력을 받음.

- 사용자가 입력한 데이터를 서버에 보낼때도 사용.

- 문법 : <form action="처리할 페이지 주소" method="get|post"></form>

- action 속성은 데이터를 처리할 서버 상의 스크립트 파일의 주소 명시 (폼 핸들러)

▣ 다양한 타입의 input 요소

- 대표적인 input 요소의 타입

1. 텍스트 입력 (text)

2. 비밀번호 (password)

3. 라디오 버튼 (radio)

4. 체크박스 (checkbox)

5. 파일 선택 (file)

6. 선택 입력 (select)

7. 문장 입력 (textarea)

8. 버튼 입력 (button)

9. 전송 버튼 (submit)

10. 필드셋(fieldset)

▣ 텍스트 입력

    검색할 내용을 입력하세요 :
    

- 결과 화면

검색할 내용을 입력하세요 :

▣ 라디오 버튼

- checked 속성을 이용하여 옵션들 중에 제일 처음에 미리 선택되는 옵션 지정 가능.

- 정확한 입력값 전송을 위해 radio 타입의 모든 input 요소가 반드시 같은 name 속성을 가져야함.

- checkbox 는 다수의 옵션을 선태가능함. 라디오 버튼과는 달리 여러개의 옵션을 한번에 입력받을 수 있음.

     HTML 

     CSS 

     JAVA 

     C++

- 결과 화면

HTML
CSS
JAVA
C++

▣ 파일 선택

- type 속성값을 file로 설정하면 사용자로부터 파일을 전송받을 수 있음.

- 결과 화면

            

▣ 선택 입력

- 여러개의 옵션이 드롭다운 리스트로 되어있음.

- 단 하나의 옵션만을 입력받을 수 있음.

- selected 속성을 이용하여 처음에 미리 선택되는 옵션 지정 가능.

	

		
			 사과
			 귤
			 딸기
			 복숭아
		
	

- 결과 화면

사과 귤 딸기 복숭아

▣ 전송 버튼

- input 태그의 type 속성값을 submit으로 설정하면 폼 핸들러로 제출하는 버튼 완성.

    어릴 때 자신의 별명을 적어주세요 : 

    


    
 

- 결과 화면

    어릴 때 자신의 별명을 적어주세요 :
    

    

▣ 필드셋

- fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어줌.

- legend 요소는 필드셋 안에서만 사용가능하며 필드셋의 제목을 나타냄.

    

        
입력 양식
        이름 : 

        

        이메일 : 

        


        
    

- 결과 화면

입력 양식

이름 :

이메일 :