⏰ 2024.11.08 (D+22)
1. For 태그 : 선택한 값을 전송할때 사용하는 태그
🔖 중요 ]
- form 태그 : 사용자가 입력한 값 혹은 선택한 값을 서버로 전송할때 사용하는 태그
- 주요 속성:
① action : 사용자가 입력한 값을 전송할 서버상에 있는 페이지경로 지정
📢 : (action생략시 기본값은 자신의 페이지)
② method: get/post(method 생략시 기본값은 get) 데이타 전송방식(서버 자원에 대한 요청방식)을 의미
| 데이터 전송 방식 | get | post |
| URL 노출 | 데이터 노출됨 | 노출 안됨 |
| 전송 방식 | HTTP 요청 헤더에 포함되서 전송됨 | HTTP 요청 바디에 포함되서 전송됨 |
| 데이터량 | 최대 4KB | 무한대 |
💡 GET 방식에 대한 참고사항
get방식에서 URL을 통해 데이터 전송 시 FORM태그 하위 요소의
NAME 속성에 지정한 이름을 통해서 전송 된다즉 이름=값(사용자가 입력하거나 선택한 값)의 쌍으로 전송
여러 개 전송 시에는 이름1=값1&이름2=값2&.....즉 &로 연결되어서 전송됨target:이 속성은 a태그의 target속성과 같은 기능
enctype:URL 인코딩방식 지정
application/x-www-form-urlencoded(디폴트값)
multipart/form-data(파일 업로드)
📖 GET 방식을 이용한 예제
<div> <h2>from 태그로 데이터 전송하기</h2> <h3>GET방식 요청</h3> <form action="A09.html"> 아이디 : <input type="text" name="user"/> 비밀번호 : <input type="password" name="pass"> <input type="submit" value="로그인"/> </form> </div>
📖 POST 방식을 이용한 예제
<h3>POST방식 요청</h3> <form action="A09.html" method="post"> 아이디 : <input type="text" name="user"/> 비밀번호 : <input type="password" name="pass"/> <input type="submit" value="로그인"/> </form>
📖 action 속성 생략(현재 페이지 다시 요청)/ method 속성 생략(GEt) 이용한 예제
<h3>action 속성 생략(현재 페이지 다시 요청)/ method 속성 생략(GEt)</h3> <form> 아이디 : <input type="text" name="user"/> 비밀번호 : <input type="password" name="pass"/> 날짜 : <input type="date" name="date"/> 색상 : <input type="color" name="color"/> 이메일 : <input type="email" name="email"/> 나이 : <input type="number" name="age" min="1" max="200"/> <input type="submit" value="확인"/> </form> <h3>a태그로 데이터 전송(GET 방식)</h3> <a href="Form13_1.html?user=%EC%B5%9C%EC%98%88%ED%9D%AC&pass=1234&date=2024-10-28&color=%23c810d5&email=huisuna7%40naver.com&age=26">GET방식 요청</a>
2. INPUT 태그 : 여러가지 형태의 모양을 생성하는 태그
🔖 중요 ]
- form 태그의 하위요소
- type속성에 다양한 값을 지정함으로써 여러가지 형태의 모양을 만들어 사용자로부터 입력이나 선택을 받을 수 있는 태그
INPUT태그의 주요 속성
① type : 모양을 타나태는 값 지정
(text, password, checkbox, radio 등)② text : 한줄 입력상자
③ password : 입력시 입력한 값이 노출 안되게
④ checkbox : 여러개 선택 가능한 체크 박스 표시할때
📢 체크된 상태를 미리 보여주고자 할때는 checked="checked" 속성 추가 checked(HTML5)⑤ radio : 하나만 선택 가능한 라디오 박스 표시할때
📢 미리 선택된 박스를 보여주고자 할때는 checked="checked" 속성 추가 checked(HTML5)⑦ hidden : 값을 웹브라우저에 표시하지 않고 전송하고자 할때
📢 웹브라우저에 보이지 않음 웹 프로그래밍시 자주 사용
🔘 버튼 모양
- submit : 값을 submit할때
- reset : 초기화 할때
- image : 값을 submit할때,주로 버튼을 이미지로 만들때 사용
- button : 버튼모양을 표시할때,아무런 액션도 일어나지 않음
- file : 파일 찾아보기 버튼과 힌줄 입력상자 표시
✅ 선택상자
- input 태그가 아닌 select태그로 시작.
- 하위 태그로 목록을 표시하기 위해 option태그를 가짐
- 미리 선택된 목록을 표시하기위해 selected="selected"
✅☑️ 여러줄 입력상자
- textarea로 시작
- 시작태그와 종료 태그 사이에 값을 넣어주면 여러줄 입력상자에 표시됨.
- 단, 사용자가 입력한값등을 가져올때는 역시 value속성 이용
- cols, rows 속성으로 크기 지정.
➕공통 사항
- value :사용자가 입력한 값이 저장되는 속성 혹은 값을 미리 지정시에 사용
- name : 값 전송시 구분하기 위한 이름을 지정. 서버로 값 전송시 필수 그래야 값이 전송됨
- inline element
💡INPUT 태그 참고사항
값 전송하려면 반드시 name속성을 지정
checkbox나 radio계열을 제외하고는 name속성을 다르게 지정해야 한다.왜냐하면 name속성에 지정한 값을 이용해 사용자가 전송한 값을 받으니까
type이 radio 및 checkbox는 반드시 value속성에 값을 지정해야 지정된 값이 전송이 된다.
그리고 name속성은 같은 그룹으로 묶기 위해서 name은 동일하게 지정해야 한다.⭐모든 태그는 id속성을 가질 수 있다.
단, 한 페이지안에서 id값은 중복될 수 없다.
📖 INPUT 태그 이용한 예제
<div> <h2>form 태그의 하위 요소들</h2> <h3>input개열의 type="text"</h3> <!-- [한줄 입력 상자] 주요 속성] size:한줄입력 상자의 크기 지정(영문자나 숫자 기준) maxlength:최대 입력할 수 있는 글자 수 지정 value:사용자가 입력한 값이 저장되는 속성 disabled ="disabled" :비활성화 enabled="enabled" :활성화(기본값) dir: "rtl" 혹은 "ltr" 입력방향 --> 기본 텍스트 상자 : <input type="text"/><br> 속성 추가 : <input type="text" size="10" maxlength="5" dir="rtl" value="기본 텍스트" disabled/><br> 주민 번호 : <input type="text" size="6" maxlength="6"/> - <input type="text" size="7" maxlength="7"/><br> 홈페이지 : <input type="text" value="https://"/> <h3>input 계열의 type="password"</h3> <!-- type이 text일때와 속성이 동일하다 입력한 값이 노출이 안되고 •모양으로 입력 됨 --> 기본 패스워드 : <input type="password"/> 패스워드 미리 지정(지정 X) : <input type="password" value="1234"/> <h3>input계열의 type="checkbox"</h3> <!-- checkbox: 여러개 선택시, name을 같게 지정(그룹으로 지정), value속성에 값 미리 지정, value에 미리 지정한 값이 action에 지정한 페이지로 전송됨 미리 선택해서 보여줄때 checked --> <fieldset> <legend>당신의 관심사항은?</legend> <form> <input type="checkbox" name="inter" value="정치" id="pol"/> <label for="pol">정치</label> <input type="checkbox" name="inter" value="경제" checked/> 경제 <input type="checkbox" name="inter" value="연애"/> 연애 <input type="checkbox" name="inter" value="스포츠" id="spo"/> <label for="spo">스포츠</label> <input type="submit" value="확인"/> </form> </fieldset> <h3>input 계열의 type="radio"</h3> <!-- radio: 여러개 중 하나 선택시, 나머지는 checkbox와 동일 name속성에 값을 다르게 주면 여러개 선택 가능 --> <fieldset> <legend>당신의 성별은?</legend> <form> <input type="radio" name="gender" value="남성" id="man"/> <label for="man">남성</label> <input type="radio" name="gender" value="여성" checked/> 여성 <input type="radio" name="gender" value="트랜스젠더"/> 트랜스젠더 <input type="submit" value="확인"/> </form> </fieldset> <h3>input 계열의 type="file"</h3> <!-- input tvpe="text"의 속성과 동일하다. 단, value속성예 값을 지정하더라도 디폴트로 텍스트 상자에 보이지 않는다. 단, 선택한 파일은 value속성에 저장된다. --> 기본 : <input type="file"/><br> 속성 추가 : <input type="filr" size="50" value="Basic Text"/> <h3>input 계열의 type="hidden"</h3> <!-- -프로그래밍시 자주 사용하는 폼의 하위 태그 -웹브라우저에 아무 모양도 보이지 않음 -값을 숨겨서 전송할때 사용 (값 전송시 value와 name속성을 반드시 주어라) -주로 키값(Primary key)등을 전송할때 많이 사용 --> <form> <input type="hidden" name="no" value="1094"/> 이름<input type="text" name="name"/> <input type="submit" value="확인"/> </form> <h3>다양한 버튼들</h3> <fieldset> <form action="https://www.nate.com"> 아이디 <input type="text" name="username"/> 성별 <input type="radio" name="gender" value="남성" id="man"/> <label for="man">남성</label> <input type="radio" name="gender" value="여성" /> 여성 <input type="radio" name="gender" value="트랜스젠더"/> 트랜스젠더<br> 관심사항 <input type="checkbox" name="inter" value="정치" id="pol"/> <label for="pol">정치</label> <input type="checkbox" name="inter" value="경제" /> 경제 <input type="checkbox" name="inter" value="연애"/> 연애 <input type="checkbox" name="inter" value="스포츠" id="spo"/> <label for="spo">스포츠</label> <input type="submit" value="확인"/> <!-- 클릭시 무조건 action에 지정한 페이지나 URL로 데이타 전송 및 이동 --> <input type="submit" value="submit 버튼"/> <!-- 클릭시 홈의 하위요소의 값률이 원래대로 초기화 됨 --> <input type="reset" value="reset 버튼"/> <!-- input type="submit"과 같은 전송기능 --> <input type="button" value="button 버튼"/> <!-- 이미지로 버튼 표시할때:전송기능이 있다 --> <button>button 태그</button> <button>버튼</button><br> <input type="image" src="../images/button.png" style="width: 48px; height: 20;"/> <input type="image" src="../images/heart.png" style="width: 48px; height: 20;"/> <input type="image" src="../images/button.png" style="width: 48px; height: 20;"/> </form> </fieldset> <h3><select>태그</h3> <!-- [속성] size:보여줄 목록의 개수 지정(기본값 1) multiple:다중 선택 가능 - 단일 선택이 기본 - 종료태그 있다 - 하위태그로 option태그를 갖는다 option태그의 value속성에 값을 지정함으로써 목록을 표시한다 selected속성은 option태그의 속성 --> <form> <select name="grade" multiple size="2"> <option value="">학력을 선택하세요</option> <option value="초등학교">초등학교</option> <option value="중학교">중학교</option> <option value="고등학교">고등학교</option> <option value="대학교">대학교</option> </select> <input type="submit" value="확인"/> </form> <h3><textarea>태그</h3> <!-- -rows와 cols로 크기 결정(영문자/숫자 기준) -value속성으로 사용자가 입력한 값을 얻는다. -기본 텍스트를 줄때는 value속성이 아닌 시작태그와 종료태그 사이에 주면 된다. --> 기본 : <textarea></textarea><br/> 속성 추가 : <textarea rows="10" cols="50" > 관리자님의 답글 ----------------------------------- 좋은 하루 되세요 </textarea> </div>
3. iframe 태그 : 인라인 프레임 화면속의 화면을 구성할때 사용하는 태그
🔖 중요 ]
- iframe 태그 : 인라인 프레임 화면속의 화면을 구성할때 사용하는 태그
- 주요 속성
① src : 프레임 안의 내용을 구성할 문서 경로나 사이트 경로
② frameborder : 인라인 프레임의 테두리 두께
③ height : 프레임의 세로 폭
④ width : 프레임의 가로 폭
⑤ scrolling : auto:프레임안 의 내용에 따라 자동으로 스크로바가 생김(기본값)
⑥ no : 내용이 많아도 스크롤바를 생기지 않게 설정
⑦ yes : 내용이 적어도 무조건 스크롤바 생김
⑧ marginheight : 프레임과 내용사이의 세로 여백
⑨ marginwidth : 프레임과 내용사이의 가로 여백
- inline element
📖 iframe 태그 이용한 예제
<div> <h2>화면속의 화면(사이트)</h2> <iframe src="https://www.nate.com" scrolling="no" frameborder="0" width="400" height="400"></iframe> <h2>화면속의 화면(페이지)</h2> <iframe marginwidth="0" marginheight="0" src="Link/IframeInLink.html" scrolling="no" frameborder="0" width="400" height="400"></iframe> </div>📖 iframe 안에 Link를 이용한 예제
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IframeInLink.html</title> <style> *{ margin: 0; } </style> </head> <body style="background-color: yellow;"> <div> <h2>IFrame14.html안에 있는 화면</h2> <ul style="list-style-type: upper-roman;"> <li><a href="https://www.nate.com">_self</a></li> <li><a href="https://www.nate.com" target="_parent">_parent</a></li> <li><a href="https://www.nate.com" target="_top">_top</a></li> </ul> <iframe marginwidth="0" marginheight="0" src="Sub/Sub.html" scrolling="no" frameborder="0" width="200" height="200"></iframe> </div> </body>
📖 iframe 안에 sub페이지 삽입을 이용한 예제
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sub.html</title> <style> *{ margin: 0; } </style> </head> <body style="background-color: red;"> <div> <h2>IFrameInLink.html안에 있는 화면</h2> <ul style="list-style-type: upper-alpha;"> <li><a href="https://www.nate.com">_self</a></li> <li><a href="https://www.nate.com" target="_parent">_parent</a></li> <li><a href="https://www.nate.com" target="_top">_top</a></li> </ul> </div> </body>
