게임웹사이트운영 [10] 폼 작성
1. 폼의 동작 입력화면 데이터입력 폼 전송 서버 응답 전송버튼 클릭 서버측 프로그램 있어야 응답
2. 폼의 형식 < form action=http://gm.ck.ac.kr/f1.php method=“POST”> 폼의 시작 action 속성은 폼의 동작코드 지정 폼 데이터 전송방법
3. 첫번째 폼 w11폴더 생성->f1.html <body> <form action=http://gm.ck.ac.kr/f1.php method=“POST”> <p> 이름과 학번을 입력하세요 <br /> 이름 : <input type=“text” name=“name” value=“” /><br /> 학번 : <input type=“text” name=“id” value=“” /><br /> <input type=“submit” /> </p> </form> </body>
<첫번째 폼 실행결과>
4. 폼에서 사용하는 엘리먼트 [1] 텍스트 입력박스 <input type=“text” name=“aa” /> 전송버튼 <input type=“submit” value=“확인” /> 라디오버튼 : 여러개중 하나만 선택(동그란 버튼) <input type=“radio” name=“a” value=“웹 />웹<br /> <input type=“radio” name=“a” value=“운영 />운영<br /> <input type=“radio” name=“a” value=“e스포츠 />e스포츠 이름은 같지만 값은 다르다
4. 폼에서 사용하는 엘리먼트 [2] 체크 박스 : 여러 개 선택 가능(네모 박스) 텍스트 영역 : 텍스트 여러 줄 입력 가능 <input type=“checkbox” name=“aa” value=“웹”/>웹<br /> <input type=“checkbox” name=“aa” value=“운영”/>운영<br /> <input type=“checkbox” name=“aa” value=“e스포츠”/>e스포츠<br /> 텍스트 영역 : 텍스트 여러 줄 입력 가능 <textarea name=“설명” rows=“10” cols=“50”>aaa</textarea> input이 아니고 textarea 라인수 지정 열의수 지정 텍스트 영역의 초기값 마감 태그
4. 폼에서 사용하는 엘리먼트 [3] 선택 박스 : 탑다운 메뉴 생성 <select name=“교과목”> <option value=“웹”>웹</option> <option value=“운영”>운영</option> <option value=“e스포츠”>e스포츠</option> </select>
5. 폼 만들기 : f2.html - action=http://gm.ck.ac.kr/f2.php - Select : dept . option : esports, game, animation - Radio . name : year . value : 2007,2008,2009,2010,2011 - Checkbox . name : like1, like2, like3 . value : start, sudden, kart - Text : name, id - Textarea : . name : intro . rows : 5 . cols : 50
6. 테이블 안에 폼 넣기 전공: 학번: 좋아하는 게임: 인적사항: 자기소개:
6.1 우선 테이블에 넣기 : f3.html <table> <tr> <td>전공:</td> <td> <select name="dept"> <option value="game">게임전공</option> <option value=animation">애니메이션전공</option> <option value=“cartoon">만화창작전공</option> </select> </td> … 나머지는 스스로 해결
6.2 중간의 선 없애기 main.css를 form.css로 복사하고 f3.html에 지정 table { margin-left: 20px; margin-right: 20px; border: thin dotted gray; border-collapse: collapse; } td,th { border: none; padding: 5px;
6.3 항목 우로 정렬 f3.html에서 해당 <td>를 <td class=“right”>로 수정