Chapter04 HTML 회원 정보 입력 양식 만들기 misuk6389@naver.com
Contents 1. 표 삽입하기 2. 버튼 삽입하기 3. 입력 양식 폼 만들기 Chapter04 HTML 회원 정보 입력 양식 만들기
프로그램 4-1 Chapter04 [그림 4-1] INFO1의 실행결과 HTML 회원 정보 입력 양식 만들기
표 만들기 표 만들기 <TABLE> 태그를 사용 Chapter04 표 만들기 <TABLE> 태그를 사용 <TABLE> 태그로 시작 하여 </TABLE> 태그로 끝을 맺으며 그 사이에 행과 열에 해당하는 태그를 삽입함으로써 표를 완성시킴 하나의 행의 시작은 <TR> 태그를 사용하며 </TR> 태그로 끝맺음 <TD> 태그를 사용하여 열의 수에 해당하는 셀을 <TR> 태그 사이에 정의 HTML 회원 정보 입력 양식 만들기
2행2열 표 Chapter04 HTML 회원 정보 입력 양식 만들기
표 만들기 <TABLE> 태그, <TR> 태그, <TD> 태그 형식 : Chapter04 <TABLE> 태그, <TR> 태그, <TD> 태그 형식 : <TABLE 속성=값 속성=값......> <TR 속성=값 속성=값......> <TD 속성=값 속성=값......> 내용 </TD> ...... </TR> </TABLE> 속성 : <TABLE> 태그 : WIDTH, HEIGHT, BORDER, ALIGN, CELLSPACING, CELLPADDING <TR> 태그 : ALIGN, VALIGN, BGCOLOR <TH> 태그, <TD> 태그 : WIDTH, HEIGHT, ALIGN, VALIGN, ROWSPAN, COLSPAN, BGCOLOR HTML 회원 정보 입력 양식 만들기
표 만들기 예제 : <BODY> <TABLE> <TR> Chapter04 예제 : <BODY> <TABLE> <TR> <TD> 1행 1열 </TD> <TD> 1행 2열 </TD> </TR> <TD> 2행 1열 </TD> <TD> 2행 2열 </TD> </TABLE> </BODY> HTML 회원 정보 입력 양식 만들기
<TABLE> 태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기
프로그램 4-2 Chapter04 [그림 4-3] TABLETag1의 실행결과 HTML 회원 정보 입력 양식 만들기
표 제목 만들기 <TH> 태그 일반적으로 표를 보면 1행 부분이나 1열 부분에 제목을 넣음 Chapter04 <TH> 태그 일반적으로 표를 보면 1행 부분이나 1열 부분에 제목을 넣음 제목으로 만들고 싶은 셀에 해당하는 <TD> 태그 대신에 <TH> 태그를 사용 <B> 태그를 사용한 것과 같이 글자가 두껍게 표시됨 HTML 회원 정보 입력 양식 만들기
프로그램 4-3 Chapter04 [그림 4-4] TABLETag2의 실행결과 HTML 회원 정보 입력 양식 만들기
<TR> 태그의 속성 Chapter04 <TR> 태그의 속성 HTML 회원 정보 입력 양식 만들기
<TD>, <TH>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기
셀 합치기 셀 합치기 <TD> 태그의 ROWSPAN 속성과 COLSPAN 속성 사용 Chapter04 셀 합치기 <TD> 태그의 ROWSPAN 속성과 COLSPAN 속성 사용 예를 들어 세로 방향의 3개의 인접한 셀을 합치기 위해서는 ROWSPAN 속성의 값을 ‘3’으로 지정하면 됨 합쳐야 할 3개의 셀에 해당하는 <TD> 태그 모두에 지정할 필요 없이 하나의 셀에 지정하고 나머지 셀들을 삭제 해주면 됨 HTML 회원 정보 입력 양식 만들기
프로그램 4-4 Chapter04 [그림 4-5] TABLETag3의 실행결과 HTML 회원 정보 입력 양식 만들기
표 스타일 지정 Chapter04 표 크기 및 테두리 굵기 지정 <TABLE> 태그의 WIDTH, HEIGHT 속성을 사용하여 가로와 세로 크기를 지정 <TABLE> 태그의 BORDER 속성으로 표의 테두리 굵기 지정 가로 세로의 크기를 지정하는 속성의 값은 픽셀 값으로 지정할 수도 있지만 웹 브라우저 창 너비의 상대적인 크기를 퍼센트(%)로 지정할 수도 있음 HTML 회원 정보 입력 양식 만들기
프로그램 4-5 Chapter04 [그림 4-6] TABLETag4의 실행결과 HTML 회원 정보 입력 양식 만들기
표 스타일 지정 표 셀간의 구분선 두께 및 여백 지정 Chapter04 표 셀간의 구분선 두께 및 여백 지정 셀 간의 구분선 두께를 지정할 때는 CELLSPACING 속성을 사용하며 사용방법 및 값 지정은 BORDER 속성과 같음 셀 간의 구분선과 데이터와의 여백 크기를 지정할 때는 CELLPADDING 속성을 사용 HTML 회원 정보 입력 양식 만들기
프로그램 4-6 Chapter04 [그림 4-7] TABLETag5의 실행결과 HTML 회원 정보 입력 양식 만들기
표 스타일 지정 표 색상 지정 테두리 선의 색을 지정할 때에는 BORDERCOLOR 속성을 사용 Chapter04 표 색상 지정 테두리 선의 색을 지정할 때에는 BORDERCOLOR 속성을 사용 BORDERCOLORDARK 속성을 사용하여 테두리의 어두운 부분 즉, 테두리 아래와 오른쪽 부분의 색을 따로 지정 BORDERCOLORLIGHT 속성을 사용하여 테두리의 밝은 부분 즉, 테두리 위와 왼쪽 부분의 색을 따로 지정 셀에 배경색을 넣고자 할 경우에는 <TR> 태그나 <TD> 태그에 BGCOLOR 속성을 사용하여 지정 배경을 이미지로 지정하고자 할 경우에는 <TABLE> 태그나 <TD> 태그에 BACKGROUND 속성을 사용 HTML 회원 정보 입력 양식 만들기
프로그램 4-7 Chapter04 [그림 4-8] TABLETag6의 실행결과 HTML 회원 정보 입력 양식 만들기
프로그램 4-8 Chapter04 [그림 4-9] INFO2의 실행결과 HTML 회원 정보 입력 양식 만들기
줄 바꿈 제한하기 <TD> 태그의 NOWRAP 속성 Chapter04 <TD> 태그의 NOWRAP 속성 셀 안의 글자는 기본적으로 자동으로 줄 바꿈이 된다. 이를 금지하고자 할 때 사용하는 속성 [그림 4-10] NOWRAP의 실행결과 HTML 회원 정보 입력 양식 만들기
캡션 삽입하기 <CAPTION> 태그 표에 캡션, 즉 첨부 설명을 붙일 수 있음. Chapter04 <CAPTION> 태그 표에 캡션, 즉 첨부 설명을 붙일 수 있음. [그림 4-11] CAPTIONTag의 실행결과 HTML 회원 정보 입력 양식 만들기
버튼 삽입하기 <INPUT> 태그 텍스트 박스를 만들거나 버튼을 사용 Chapter04 <INPUT> 태그 텍스트 박스를 만들거나 버튼을 사용 <INPUT> 태그의 TYPE 속성 값을 지정함으로써 여러 종류의 입력 양식을 만듬 형식 : <INPUT TYPE="타입" 속성=값 속성=값......> 속성 : TYPE, NAME, VALUE, SIZE, MAXLENGTH, CHECKED 예제 : <BODY> <INPUT TYPE="text" NAME="TextBox1"><BR> <INPUT TYPE="radio" NAME="radio" VALUE="radio1"><BR> <INPUT TYPE="checkbox" NAME="checkbox" VALUE="checkbox1"><BR> <INPUT TYPE="reset" VALUE="취소 버튼"> </BODY> HTML 회원 정보 입력 양식 만들기
<INPUT>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기
일반적인 입력 양식 만들기 텍스트 박스 <INPUT> 태그의 TYPE 속성의 값을 ‘text’로 지정하여 만듬 Chapter04 텍스트 박스 <INPUT> 태그의 TYPE 속성의 값을 ‘text’로 지정하여 만듬 가장 기본적인 입력 양식 가운데 하나인 한 줄로 된 텍스트 박스가 생성 TYPE 속성을 지정하지 않고 <INPUT> 태그만을 사용해도 기본적으로 한 줄로 된 텍스트 박스가 생성 TYPE 속성의 값을 ‘password’으로 지정하면 비밀번호를 입력할 수 있는 텍스트 박스가 생성 HTML 회원 정보 입력 양식 만들기
여러 줄을 입력할 수 있는 텍스트 박스 <TEXTAREA> 태그 여러 줄을 입력할 수 있는 텍스트 박스 생성 Chapter04 <TEXTAREA> 태그 여러 줄을 입력할 수 있는 텍스트 박스 생성 세로 높이를 지정할 수 있는 ROWS 속성, 가로 길이를 지정할 수 있는 COLS 속성이 있음 형식 : <TEXTAREA 속성=값 속성 값......>...</TEXTAREA> 속성 : ROWS, COLS, NAME. READONLY 예제 : <BODY> <TEXTAREA NAME="TextArea1" ROWS="10" COLS="40"> 텍스트 에어리어입니다. </TEXTAREA> </BODY> HTML 회원 정보 입력 양식 만들기
<TEXTAREA>태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기
프로그램 4-9 Chapter04 [그림 4-12] INPUTTag1의 실행결과 HTML 회원 정보 입력 양식 만들기
선택 입력 양식 만들기 라디오 버튼 체크박스 동그라미 모양의 오직 한 개의 항목만을 선택할 수 있는 버튼 Chapter04 라디오 버튼 동그라미 모양의 오직 한 개의 항목만을 선택할 수 있는 버튼 TYPE 속성 값을 ‘radio’로 지정 체크박스 네모 모양의 여러 개 항목을 한꺼번에 선택할 수 있는 입력양식 TYPE 속성 값을 ‘checkbox’로 지정 HTML 회원 정보 입력 양식 만들기
선택 입력 양식 만들기 라디오 버튼과 체크박스의 속성 Chapter04 라디오 버튼과 체크박스의 속성 NAME 속성은 입력할 필드의 이름을 지정하며 일반적으로 같은 주제에 대해서는 같은 이름으로 지정 VALUE 속성은 사용자가 선택한 항목이 어떤 것인지 알 수 있도록 하는 속성이므로 각 버튼마다 다른 값을 지정해 줘야 함 CHECKED 라는 속성을 사용하면 초기 화면에서 기본적으로 어떠한 항목이 선택되어 표시 HTML 회원 정보 입력 양식 만들기
선택 입력 양식 만들기 <SELECT> 태그, <OPTION> 태그 Chapter04 <SELECT> 태그, <OPTION> 태그 여러 개의 항목이 아래로 늘어져 나타나는 입력양식인 콤보 박스 생성 <SELECT>와 </SELECT>로 묶어 주며 NAME 속성을 사용하여 이름을 지정 형식 : <SELECT 속성=값 속성=값......> <OPTION 속성=값 속성=값......>내용</OPTION> ...... </SELECT> 속성 : <SELECT> 태그 : SIZE, NAME, MULTIPLE <OPTION> 태그 : VALUE, SELECTED, DISABLED HTML 회원 정보 입력 양식 만들기
선택 입력 양식 만들기 <SELECT> 태그, <OPTION> 태그 속성 Chapter04 <SELECT> 태그, <OPTION> 태그 속성 SIZE 속성을 사용하여 감춰지지 않고 화면에 보여지는 항목 수를 지정 한 번에 여러 개의 항목을 선택할 수 있도록 지정하려면 MULTIPLE 속성을 사용 기본 값을 특정한 항목으로 지정하고자 한다면 <OPTION> 태그의 SELECTED 속성 사용 예제 : <BODY> <SELECT NAME="선택"> <OPTION VALUE="select1"> 선택1 </OPTION> <OPTION VALUE="select2"> 선택2 </OPTION> <OPTION VALUE="select3"> 선택3 </OPTION> <OPTION VALUE="select4"> 선택4 </OPTION> </SELECT> </BODY> HTML 회원 정보 입력 양식 만들기
<SELECT>, <OPTION> 태그의 속성 Chapter04 <SELECT> 태그의 속성 <OPTION> 태그의 속성 HTML 회원 정보 입력 양식 만들기
프로그램 4-10 Chapter04 [그림 4-13] INPUTTag2의 실행결과 HTML 회원 정보 입력 양식 만들기
입력 내용 전송하기 전송 버튼 취소 버튼 TYPE 속성의 값을 ‘submit’로 지정 Chapter04 전송 버튼 TYPE 속성의 값을 ‘submit’로 지정 기본적으로 버튼에 ‘쿼리 전송’이라는 글자가 표시 버튼에 다른 이름을 붙이고자 한다면 VALUE 속성 값을 지정 취소 버튼 TYPE 속성의 값을 ‘reset’으로 지정 사용자가 입력한 내용을 한꺼번에 지우는 역할 기본적으로 ‘원래대로’라는 글자가 버튼위에 표시되며 이를 바꾸고자 할 때는 전송 버튼과 마찬가지로 VALUE 속성 값을 지정 HTML 회원 정보 입력 양식 만들기
프로그램 4-11 Chapter04 [그림 4-14] INPUTTag3의 실행결과 HTML 회원 정보 입력 양식 만들기
입력 양식 폼 만들기 <FORM> 태그 모든 입력 양식은 <FORM> 태그 안에 들어감 Chapter04 <FORM> 태그 모든 입력 양식은 <FORM> 태그 안에 들어감 ACTION 속성의 값으로 사용자가 입력한 데이터를 전송할 위치를 지정 ACTION 속성의 값으로는 데이터를 전송할 ‘URL’을 입력하거나 ‘mailto:이메일 주소’ 등의 형식으로 지정 METHOD 속성을 사용하여 전송 방식을 지정 HTML 회원 정보 입력 양식 만들기
입력 양식 폼 만들기 <FORM> 태그 형식 : Chapter04 <FORM> 태그 형식 : <FORM ACTION="URL" METHOD="전송방식"> 내용 </FORM> 속성 : ACTION, METHOD 예제 : <BODY> <FORM ACTION="OK.html" METHOD="POST"> <INPUT TYPE="text"><BR> <INPUT TYPE="submit"> </FORM> </BODY> HTML 회원 정보 입력 양식 만들기
<FORM> 태그의 속성 Chapter04 HTML 회원 정보 입력 양식 만들기
프로그램 4-12 Chapter04 [그림 4-15] INFO3의 실행결과 HTML 회원 정보 입력 양식 만들기
프로그램 4-13 Chapter04 [그림 4-16] 회원 정보 전송 HTML 회원 정보 입력 양식 만들기
프로그램 4-13 Chapter04 [그림 4-17] 회원 정보 전송 성공 HTML 회원 정보 입력 양식 만들기