Chapter04 HTML 회원 정보 입력 양식 만들기 HTML & JavaScript
Contents 1. 표 삽입하기 2. 버튼 삽입하기 3. 입력 양식 폼 만들기 Chapter04 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 회원 정보 입력 양식 만들기
<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 회원 정보 입력 양식 만들기
표 스타일 지정 표 색상 지정 테두리 선의 색을 지정할 때에는 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 회원 정보 입력 양식 만들기
버튼 삽입하기 <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 회원 정보 입력 양식 만들기
Html+javaScript HTML을 이용한 회원 정보 입력 양식 만들기 프로젝트 설명
￭ 제목 폰트의 크기는 6으로 하며 색깔은 파란색으로 설정한다. ￭ 제목과 입력 양식 테이블 사이에 구분선을 삽입한다. Html+javaScript HTML을 이용한 회원 정보 입력 양식 만들기 지시 사항 (1) ￭ 배경 화면의 색깔을 DDAD00으로 설정한다. ￭ 제목 폰트의 크기는 6으로 하며 색깔은 파란색으로 설정한다. ￭ 제목과 입력 양식 테이블 사이에 구분선을 삽입한다. ￭ 입력 양식 테이블은 가로 600픽셀, 세로 350픽셀의 크기로 만든다. 표의 테두리 두께는 1 픽셀로 하며 표의 각 셀과 데이터의 간격은 5픽셀로 하고, 표 안의 내용은 가운데 정렬한다. ￭ 각 입력란에는 각기 다른 특수 문자를 삽입한다. ￭ 이름 입력란은 최대 10글자를 입력할 수 있게 한다. ￭ 암호 입력란의 암호는 최대 10글자이며 사용자가 입력한 내용이 화면에 "*"나 "●"로 표시되게 한다.
￭ 성별 입력란은 라디오 버튼을 이용하여 "남자, 여자" 중 하나를 선택하게 한다. Html+javaScript HTML을 이용한 회원 정보 입력 양식 만들기 지시 사항 (2) ￭ 전화번호 입력란의 전화번호는 크게 지역번호, 국번, 번호로 구분하고 지역번호는 최대 3자를 입력 가능하게 하며 초기값으로 "02"가 나타나게 한다. 국번과 번호는 최대 4자를 입력할 수 있게 한다. ￭ 직업 입력란에는 콤보 박스 메뉴(혹은 드롭다운 상자, 풀다운 메뉴)를 이용하여 "학생, 교수, 아줌마, 백수" 중에 하나를 선택하게 한다. 초기값을 "학생"으로 설정되게 한다. ￭ 성별 입력란은 라디오 버튼을 이용하여 "남자, 여자" 중 하나를 선택하게 한다. ￭ 취미 입력란은 체크 박스를 이용하여 복수 개를 선택할 수 있게 한다. ￭ 자기 소개하는 글 입력란은 긴 내용의 텍스트를 입력받을 수 있게 만들고, 초기값으로 "자기를 소개하는 글을 쓰세요"라는 문장이 나타나게 한다. ￭ 맨 밑에 "등록하기" 버튼을 만들어 입력이 완료된 후에 다른 페이지로 이동하게 한다. ￭ "등록하기" 버튼 옆에 "취소하기" 버튼을 만들어 입력된 내용을 한번에 지울 수 있게 한다.