Download presentation
Presentation is loading. Please wait.
1
게임웹사이트운영 [10] 폼 작성
![게임웹사이트운영 [10] 폼 작성](http://slidesplayer.org/slide/15957117/88/images/1/%EA%B2%8C%EC%9E%84%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9A%B4%EC%98%81+%5B10%5D+%ED%8F%BC+%EC%9E%91%EC%84%B1.jpg "게임웹사이트운영 [10] 폼 작성")
2
1. 폼의 동작 입력화면 데이터입력 폼 전송 서버 응답 전송버튼 클릭 서버측 프로그램 있어야 응답
3
2. 폼의 형식 < form action=http://gm.ck.ac.kr/f1.php method=“POST”>
폼의 시작 action 속성은 폼의 동작코드 지정 폼 데이터 전송방법
4
3. 첫번째 폼 w11폴더 생성->f1.html <body>
<form action= method=“POST”> <p> 이름과 학번을 입력하세요 <br /> 이름 : <input type=“text” name=“name” value=“” /><br /> 학번 : <input type=“text” name=“id” value=“” /><br /> <input type=“submit” /> </p> </form> </body>
5
<첫번째 폼 실행결과>
6
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. 폼에서 사용하는 엘리먼트 [1] 텍스트 입력박스 <input type= text name= aa />](http://slidesplayer.org/slide/15957117/88/images/6/4.+%ED%8F%BC%EC%97%90%EC%84%9C+%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94+%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8+%5B1%5D+%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%9E%85%EB%A0%A5%EB%B0%95%EC%8A%A4+%3Cinput+type%3D+text+name%3D+aa+%2F%3E.jpg "전송버튼. <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스포츠. 이름은. 같지만. 값은. 다르다.")
7
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. 폼에서 사용하는 엘리먼트 [2] 체크 박스 : 여러 개 선택 가능(네모 박스) 텍스트 영역 : 텍스트 여러 줄 입력 가능](http://slidesplayer.org/slide/15957117/88/images/7/4.+%ED%8F%BC%EC%97%90%EC%84%9C+%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94+%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8+%5B2%5D+%EC%B2%B4%ED%81%AC+%EB%B0%95%EC%8A%A4+%3A+%EC%97%AC%EB%9F%AC+%EA%B0%9C+%EC%84%A0%ED%83%9D+%EA%B0%80%EB%8A%A5%28%EB%84%A4%EB%AA%A8+%EB%B0%95%EC%8A%A4%29+%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%98%81%EC%97%AD+%3A+%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%97%AC%EB%9F%AC+%EC%A4%84+%EC%9E%85%EB%A0%A5+%EA%B0%80%EB%8A%A5.jpg "<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. 라인수. 지정. 열의수. 지정. 텍스트. 영역의. 초기값. 마감. 태그.")
8
4. 폼에서 사용하는 엘리먼트 [3] 선택 박스 : 탑다운 메뉴 생성 <select name=“교과목”>
<option value=“웹”>웹</option> <option value=“운영”>운영</option> <option value=“e스포츠”>e스포츠</option> </select>
![4. 폼에서 사용하는 엘리먼트 [3] 선택 박스 : 탑다운 메뉴 생성 <select name= 교과목 >](http://slidesplayer.org/slide/15957117/88/images/8/4.+%ED%8F%BC%EC%97%90%EC%84%9C+%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94+%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8+%5B3%5D+%EC%84%A0%ED%83%9D+%EB%B0%95%EC%8A%A4+%3A+%ED%83%91%EB%8B%A4%EC%9A%B4+%EB%A9%94%EB%89%B4+%EC%83%9D%EC%84%B1+%3Cselect+name%3D+%EA%B5%90%EA%B3%BC%EB%AA%A9+%3E.jpg "<option value= 웹 >웹</option> <option value= 운영 >운영</option> <option value= e스포츠 >e스포츠</option> </select>")
9
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
11
6. 테이블 안에 폼 넣기 전공: 학번: 좋아하는 게임: 인적사항: 자기소개:
12
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> … 나머지는 스스로 해결
13
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;
14
6.3 항목 우로 정렬 f3.html에서 해당 <td>를 <td class=“right”>로 수정
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
