html5-img
1 / 56

수업자 : 박선홍

H TML/ css (5 차시 ). 수업자 : 박선홍. 목 차. F orm 미리 보기. F orm 태그. F orm 태그 입력 방식. 1 Form 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 미리 보기. 네이버. 미리 보기. 네이버. 다음. 미리 보기. 네이버. 다음. 학교 공홈. 미리 보기. 네이버. 다음. 학교 공홈. 구글. 미리 보기. 네이버. 다음. 학교 공홈. 네이트. 구글. 미리 보기. 네이버. 다음.

gelsey
Download Presentation

수업자 : 박선홍

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML/css (5차시) 수업자: 박선홍

  2. 목차 Form 미리 보기 Form 태그 Form 태그 입력 방식

  3. 1 Form 미리 보기

  4. 미리 보기

  5. 미리 보기

  6. 미리 보기

  7. 미리 보기

  8. 미리 보기

  9. 미리 보기 네이버

  10. 미리 보기 네이버 다음

  11. 미리 보기 네이버 다음 학교 공홈

  12. 미리 보기 네이버 다음 학교 공홈 구글

  13. 미리 보기 네이버 다음 학교 공홈 네이트 구글

  14. 미리 보기 네이버 다음 학교 공홈 네이트 구글 페이스 북

  15. 2 Form 태그

  16. <form action ="URL" method="데이터 전송 방식" name="폼이름">~~</form> action : 데이터를 전송 받아 처리할 웹 프로그램의 위치 method : 데이터가 서버에 전송되는 방식 get - 주소표시줄에 데이터 전달 post - 파일에 데이터 전달 name : 폼의 이름을 지정 폼과 관련된 모든 태그는 <form>~~</form>안에 들어간다!!!!! Form 태그

  17. 3 Form 태그 입력 방식

  18. 1. 한 줄 입력 6. 여러 줄 입력 2. 암호 입력 7. 전송 3. 체크박스 8. 취소 4. 라디오 버튼 9. 파일 업로드 5. 드롭 다운 Form 태그 입력 방식

  19. <input type="text" value="" name="" size="" maxlength=""> text : 한 줄을 입력 할 수 있는 상자 value : 입력창의 초기값 name : text 입력상자의 이름(데이터의 변수 이름) size : 입력창의 크기 (단위 : byte) maxlength : 최대 입력 가능 문자 수 1. 한 줄 입력

  20. <input type="text" value="14" name="아이왑" size="50" maxlength="15"> 1. 한 줄 입력

  21. <input type="text" value="14" name="아이왑" size="50" maxlength="15"> 1. 한 줄 입력

  22. <input type="text" value="14" name="아이왑" size="50" maxlength="15"> 1. 한 줄 입력

  23. <input type="password" value="" name="" size="" maxlength=""> password : 암호화 된 입력상자 value : 입력창의 초기값 name : password 입력상자의 이름(데이터의 변수 이름) size : 입력창의 크기 (단위 : byte) maxlength : 최대 입력 가능 문자 수 2. 암호 입력

  24. <input type="password" value="14" name="아이왑" size="50" maxlength="15"> 2. 암호 입력

  25. <input type="password" value="14" name="아이왑" size="50" maxlength="15"> 2. 암호 입력

  26. <input type="password" value="14" name="아이왑" size="50" maxlength="15"> 2. 암호 입력

  27. <input type="checkbox" value="" name="" checked> checkbox : 여러 항목 중 여러 개를 선택하는 입력 상자 (다중선택) value : 데이터의 변수 값 name : 데이터의 변수 명 checked : 기본으로 체크 3. 체크박스

  28. <input type="checkbox" value="1" name="sb" checked>웹 프로그래밍 <input type="checkbox" value="2" name="sb">프로그래밍 <input type="checkbox" value="3" name="sb">네트워크 기초 3. 체크박스

  29. <input type="checkbox" value="1" name="sb" checked>웹 프로그래밍 <input type="checkbox" value="2" name="sb">프로그래밍 <input type="checkbox" value="3" name="sb">네트워크 기초 3. 체크박스

  30. 3. 체크박스 ex

  31. &nbsp; &nbsp; 3. 체크박스 ex

  32. &nbsp; &nbsp; 3. 체크박스 ex <input type="checkbox" value="1" name="b" checked>4반&nbsp;&nbsp; <input type="checkbox" value="2" name="b" checked>5반&nbsp;&nbsp; <input type="checkbox" value="3" name="b" checked>6반&nbsp;&nbsp; <input type="checkbox" value="4" name="b">10반&nbsp;&nbsp; <input type="checkbox" value="5" name="b">11반&nbsp;&nbsp; <input type="checkbox" value="6" name="b">12반

  33. <input type=“radio" value="" name="" checked> radio : 여러 항목 중 한 가지를 선택하는 입력 상자 (단일선택) value : 데이터의 변수 값 name : 데이터의 변수 명 checked : 기본으로 체크 4. 라디오 버튼

  34. <input type=“radio" value="" name="" checked> radio : 여러 항목 중 한 가지를 선택하는 입력 상자 (단일선택) value : 데이터의 변수 값 name : 데이터의 변수 명 checked : 기본으로 체크 4. 라디오 버튼

  35. <input type="radio" value="1" name="b" checked>웹 프로그래밍 <input type="radio" value="2" name="b">프로그래밍 <input type="radio" value="3" name="b">네트워크 기초 4. 라디오 버튼

  36. 4. 라디오 버튼

  37. 4. 라디오 버튼 <input type="radio" value="1" name="b" checked>4반&nbsp;&nbsp; <input type="radio" value="2" name="b">5반&nbsp;&nbsp; <input type="radio" value="3" name="b">6반&nbsp;&nbsp; <input type="radio" value="4" name="b">10반&nbsp;&nbsp; <input type="radio" value="5" name="b">11반&nbsp;&nbsp; <input type="radio" value="6" name="b">12반

  38. <select name=""> <option value="" selected>항목 <option value="">항목1 <option value="">항목2 </select> name : 드롭 다운입력상자의 이름(데이터의 변수 이름) <option> : 항목을 표시 select : 기본으로 선택 5. 드롭 다운

  39. <select name=""> <option value="" selected>항목 <option value="">항목1 <option value="">항목2 </select> name : 드롭 다운입력상자의 이름(데이터의 변수 이름) <option> : 항목을 표시 select : 기본으로 선택 5. 드롭 다운

  40. <select name="아이왑"> <option value="0" selected>과목 <option value="1">웹 프로그래밍 <option value="2">프로그래밍 <option value="3">네트워크 기초 </select> 5. 드롭 다운

  41. <select name="아이왑"> <option value="0" selected>과목 <option value="1">웹 프로그래밍 <option value="2">프로그래밍 <option value="3">네트워크 기초 </select> 5. 드롭 다운

  42. <select name="아이왑"> <option value="0" selected>과목 <option value="1">웹 프로그래밍 <option value="2">프로그래밍 <option value="3">네트워크 기초 </select> 5. 드롭 다운

  43. 5. 드롭 다운

  44. <textarea cols="" rows="" name="">~~</textarea> cols : 칸 수 rows : 줄 수 name : 데이터 변수 이름 6. 여러 줄 입력

  45. <textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea> 6. 여러 줄 입력

  46. <textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea> 6. 여러 줄 입력

  47. <textarea cols="100" rows="10" name="아이왑">아이왑14기</textarea> 6. 여러 줄 입력

  48. <input type="submit" value=""> submit : 데이터를 서버로 전송 value : 버튼의 이름 7. 전송

  49. <input type="submit" value="아이왑"> 7. 전송

  50. <input type="reset" value=""> reset : 데이터를 초기상태로 되돌림 value : 버튼의 이름 8. 삭제

More Related