폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계

Presentation on theme: "폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계"— Presentation transcript:

1 폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계
10장. 폼 양식으로 회원전용 공간 만들기 폼 관련 태그 폼 양식 직접 만들어보기 회원가입 절차 4단계

2 HTML로 폼 양식 만들기 CSS로 폼 양식 꾸미기 자바스크립트로 문서 검증하기 웹 프로그램 실행하기
폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [회원가입 구현 절차] HTML로 폼 양식 만들기 CSS로 폼 양식 꾸미기 자바스크립트로 문서 검증하기 웹 프로그램 실행하기

3 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그
[폼 관련 태그(1)] 태그명 결과 설명 <form></form> 안 보임 폼 양식의 시작과 끝 <input type=text> 한 줄 입력 상자 <input type=password> *로 표시되는 암호 입력상자 <input type=raido> 라디오 버튼 <input type=checkbox> 체크상자 <input type=button> 일반 버튼

4 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그
[폼 관련 태그(2)] <input type=submit> 전송확인 버튼 <input type=reset> 초기화 버튼 <input type=image> 이미지 버튼 <input type=file> 파일 업로드 <input type=hidden> 안 보임 숨겨진 필드 <textarea></textarea> 여러 줄 입력상자 <select></select> 목록 상자의 시작과 끝 <option> 목록 상자에 포함될 항목 지정 태그명 결과 설명

5 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그
[폼 관련 태그의 속성] <form> 태그 관련 속성 name method action target <input> 태그 관련 속성 Size maxlength value readonly checked disabled

6 일반 버튼 초기화 버튼 전송 버튼 이미지 버튼 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [버튼 4가지]
<input type=button value=국적변경> 초기화 버튼 <input type=reset value=다시 작성> 전송 버튼 <input type=submit value=가입하기> 이미지 버튼 <input type=image src="check.gif”>

7 폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그
[폼 관련 태그의 속성] <textarea> 태그 관련 속성 Cols Rows wrap <select> <option> 태그 관련 속성 selected size multiple

8 <select name=phone1>
폼 양식으로 회원전용 공간 만들기 – 폼 관련 태그 [목록상자의 예] <select name=phone1> <option value=1 selected>011</option> <option value=2>016</option> <option value=3>017</option> <option value=4>018</option> <option value=5>019</option> </select>