반응형
*HTML Form Control(지난시간 마지막)-사용자가 입력하는 값을 받기위한 객체들(자바로치면 컴포넌트)
-
<input>,<select>,<textarea> 3가지
<<HTML Control은 Form태그 안에 있어야만 일을 할 수 있게 해준다.>>
*<form> 태그
-
HTML From Control의 값을 서버로 전송하는 일 <<(a tag로는 값이 전송되지 않는다.=링크이동만)>>
-
<form action="값을 받을 페이지의 URL(servlet의 이름,jsp의 이름, ASP의 이름,php의 이름,,,,<<html은 넣지않는다-연산x>>)" name="javaScripte에서 접근 할 이름(이름이 들어가면 자바스크립에서 쉽게 접근할 수 있게 된다.)" method="전송 방식(get|post(기본이 get방식))">
-
GET : 주소창으로 데이터 전송하는 방식으로 보안이 되지 않는다.
-
주소창으로 데이터를 태워보내기 때문에 256자이하의 소용량 데이터를 전송할때 쓰임, 파일은 전송할 수 없다.
-
주소창에 URl을 직접 입력했을 때, <a>, <form method="get">, javaScripte에 location.href(?) 일 때가 대표적인 예
-
POST : HTTP header를 통해서 데이터를 전송하는 방식
-
보안이 되고, 256자 이상의 대용량 데이터를 전송하는데 쓰임(값이 눈으로 확인되지 않는다.=>주소창이 깔끔)
-
파일을 전송 할 수 있다(enctype="multiport/form-data"로 변경하면 가능해 짐)
-
반드시 Form태그의 method가 post인h(<Form method="post"/>)경우에만 post방식으로 쓰인다 (이외 다 get)
-
<form action="" name="" method="">
-
<input ~>
-
<select ~>
-
<textarea ~>
-
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Form Control</title>
</head>
<body>
<!-- HTML Form Control : 사용자가 입력하는 값을 받기위한 HTML제공 객체들 -->
<strong>입력 객체</strong>
<br/>
<strong><input>태그의 공통속성</strong><br/>
<!-- type=유형 name는 식별하기위한 이름 disabled="disabled":서버로 값이 전송되지 않고 입력도 되지 않는다.
disabled - 값수정 불가, 서버로 값 전송 안됨 / readonly - 값수정 불가, 서버로 값 전송 됨(우편번호) -->
<form action="test.jsp" method="get">
<fieldset> <!--묶어주는 fieldset-->
<legend>HTML Form Control 연습</legend> <!--fieldset묶음에 제목을 주는 legend-->
<label>기본속성</label><input type="text" name="text" readonly="readonly"/><br/>
<!-- text :짧은 문자열데이터(id,이름,주소,제목,,)를 입력받을때
넓이를 바꿀때에는 size="글자수(대문자 A기준 그만큼 보여지는)"
최대입력 글자수 :maxlength(size와 절대 아무런 관련 없음!_보여지고,입력되고의 차이)
아무값도 입력하지 않았을때 서버로 전송할 값 :value="" (입력되면 그값이 넘어감)
placeholder="제공할 문자열" :HTML5에서 추가된 속성으로 사용자가 값을 입력하기 전까진 안내문자열을 보여줄때 -->
<label>아이디</label><input type="text" name="id" size="10" maxlength="5" placeholder ="아이디"/><br/>
<!-- type="password":비밀번호나 외부에 값을 노출시키지 말아야할 데이터를 입력받을때 (비밀번호,주민번호뒷자리,카드번호,OTP,,,)
넘어가긴넘어가는데 사용자가 볼수있는게 아니고 한글이 입력되지 않는다. -->
<label>비번</label><input type="password" name="pass" size="10" maxlength="20" placeholder="비밀번호"/><br/>
<!-- type="checkbox":보기로 준비된값중 사용자가 여려개를 선택하여 입력할 때
value="서버로 전송할 값(중요)"
name="이름을 동일하게 설정하면 그룹으로 묶어진다.(웹은100%)=>(컨트롤상관없이)배열로 처리된다(장점:일괄처리)"
=>"웹은 이름이같으면 배열로 처리한다."
(보여질값과 넘겨질값은 달라도 상관없다)
checked는 특정 checkbox가 선택이 된 상태로 제공할 때 사용하는것으로 HTML4.0.1까지는 checked권장,
HTML5부터는 checked="checked"를 더 권장(속성=값의 형태를 만들어주기위한것으로 눈에 더 잘보인다)-->
<input type="checkbox" value="사과" name="fruit"/>사과(가을)<br/>
<input type="checkbox" value="배" name="fruit" checked/>배(가을)<br/>
<input type="checkbox" value="딸기" name="fruit"checked="checked"/>딸기(봄)<br/>
<input type="checkbox" value="포도" name="fruit"/>포도(여름)<br/>
<input type="checkbox" value="귤" name="fruit"/>귤(겨울)<br/>
<!-- type="radio" : 보기로 준비된 값중 사용자가 딱 한개를 선택하여 입력할 때
name 속성은 그룹의 이름이 되기도한다(name가 없으면 각각개별로 인식되어 마구 선택할 수 있다.)
name="이름을 동일하게 설정하면 그룹으로 묶어진다.(웹은100%)=>(컨트롤상관없이)배열로 처리된다(장점:일괄처리)"
=>"웹은 이름이같으면 배열로 처리한다."-->
<input type="radio" value="남자" name="gender" >남자<br/>
<input type="radio" value="여자" name="gender" checked="checked">여자<br/>
<!-- type="hidden": 사용자에게 값을 노출시키지 않고 서버로 값을 전달해야할 때.
JavaScripte에서 값을 변경한 후 서버로 전송하는경우 엄청나게 많이 쓰인다.-->
<input type="hidden" name="addr" value="서울시 강남구 역삼동"/>
<!-- type="image" :이미지를 제공할 때,사용자가 클릭하면 서버로 전송하게 된다. (잃는게 더많을것...페이지가 넘어간다!!)
submit(:<form>태그 안에 모든 HTML Form Control들이 가진 값을 서버로 전송하는일 대출?-유효성검증을 해야하게되는데 그걸 컨트롤하기가 너무 어렵다.(그래서사용ㄴ))의 기능을 가지고 있다.
보내지 말야햐 할 값이 전송될 위험이 있어 잘 쓰지 않는다.-->
<input type="image" src="../common/images/sist_logo.jpg"/>
<!-- 위에건 클릭이 되고 아래건 클릭이 되지 않는다. 전송하는걸 특정경우로 한정하기가 힘들어 잘 쓰지 않는다. -->
<img src="../common/images/sist_logo.jpg"/><br/>
<!-- type="file":파일을 전송할 떄 JavaScripte에서 값변경을 할 수 없는 HTML Form Control
(나중에 바꾸려고 하지말자-접속자HDD를 볼수 있어 보안이슈로 값변경이 불가하게막아놓음.) -->
<input type="file" name="update"/><br/>
<!-- 버튼 류 : 사용자가 클릭하여 동작 할 수 있는 HTML Form Control 이지만 반드시 <form>태그의 하위태그로 존재해야만 동작하게 된다.
type="submit" :HTML Form Control의 값을 서버로 전송하는 기능. 브라우저마다 정해진 라벨이 존재
type="reset" : HTML Form Control의 값을 초기화 하는 기능. 브라우저마다 정해진 라벨이 존재
type="button" : 버튼모양..주로 JavaScripte에서 유효성 검증을 해야하는 경우 사용하게 된다.라벨이 없음.
value="보여지는 라벨"-->
<input type="submit" value="전송"/><br/>
<input type="reset" value="초기화"/><br/>
<input type="button" value="버튼"/><br/>
</fieldset>
<!-- <select> : 정해진 값중 하나만 선택하여 전송 할 때.
name="식별하기 위한 이름"
size="보여줄 옵션의 갯수"
<option value="서버로 전송할 값" selected="selected"/>
HTML4.0.1 : selected, HTML5 권장 : selected="selected"
-->
<label>지역 선택</label>
<select name="loc">
<option>----- 지역선택 ----</option>
<option value="서울" selected="selected">서울시</option>
<option value="경기">경기도</option>
<option value="충청">충청도</option>
<option value="경상">경상도</option>
<option value="전라">전라도</option>
<option value="제주" >제주도</option>
</select><br/>
<select size="5">
<option>SKT</option>
<option>KT</option>
<option>LGT</option>
</select><br/>
<!-- <textarea> : 여러행을 입력할 때 사용(많은 양의 문자열을 입럭 할 때)
rows ="보여줄 행수"
cols ="한줄에 쓸 글자 수"
-->
<textarea row="5" cols="30" name="ta">쓰고 싶은 말.</textarea>
</form>
</body>
</html>
*그외 태그
-
<label> : <label>이름</label><input type="text"/>에서 text의 라벨(이름)을 따로 묶어줌으로 편하게 보기 위함..
-
<fieldset> : HTML Form Control을 묶어주기 위해
-
<legend> : (묶은것들의)제목 <<fieldset,legend 는 form태그 안에서 주로 쓰임 >>
*HTML5에서 추가된 HTML Form Control들(익스에서는 안되는데..울나라는 익스가 메인이라 비추)
-
<inpyt type="000" > <<의미적/기능적인 것들이 추가됨.>>
-
의미적
-
email,tel
-
기능적
-
date(날짜), color(색선택),number(숫자), range(바 움직여 값설정하는것)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5에서 추가된 HTML Form Control</title>
</head>
<body>
<div>
<strong>의미적 Form Control-소스보기시에 가독성을 높이기 위해 만듦</strong>
<br/>
<!-- 디자인은 text와 같지만 소스보기할 때 입력값이 무엇인지 의미적으로 전달하는 객체들 -->
<label>이름</label><input type="text" name="name"/><br/>
<label>이메일</label><input type="email" name="email"/><br/>
<label>전화번호</label><input type="tel" name="tel1"/><br/>
<label>사이트 URL</label><input type="url" name="url"/><br/>
</div>
<div>
<strong>기능을 가진 HTML Form Control</strong>
<br/>
<label>날짜</label>
<!-- value="년-월-일" 형식의 값이 입력되면 해당 날짜 정보가 입력되어 보여진다. -->
<input type="date" name="date" value="김정윤"/><!-- value가 날짜형식일때에만 나온다. -->
<br/>
<!-- month value="년-월" 형식의 값이 입력되면 해당 날짜 정보가 입력되어 보여진다. -->
<input type="month" name="mon" value="2018-10"/><br/>
<!-- datetime-local value="년-월-일 시:분:초 " 형식의 값이 입력되면 해당 날짜 정보가 입력되어 보여진다. -->
<input type="datetime-local" name="date" /><br/>
<!-- color : value="#RGB" -->
<label>색선택</label>
<input type="color" name ="col" value="#FF2200"/><br/>
<!-- number -->
<label>숫자</label>
<input type="number" name ="num" value="0"/><br/>
<!-- range : min="최소값" max="최대값" value="현재값"(임의로 값을 보여주게하지만 최고값과 최소값을 알 수 없다.=>지정가능) -->
<label>범위</label>
0<input type="range" name ="ran" min="0" max="100" value="15"/>100<br/>
</div>
</body>
</html>
*media tag
-
embed
-
HTML5 이전에 사용.
-
영상,음악파일을 모두 다 재생할 수 있다.
-
<embed src="미디어 파일의 경로" width="넓이" height="높이" controls="controls"></embed>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 재생</title>
</head>
<body>
<label>음악 파일</label><br/>
<embed src="media/audio.mp3" controller="false" autoplay="false">
<br/>
<label>동영상 파일</label><br/>
<embed src="media/video.mp4" controller="true" width="300" height="300" autoplay="false" >
</body>
</html>
-
audio
-
<audio src="음악 파일 경로" controls="controls">
-
<source src="음악파일의 경로"> <<음악파일이 재생될 수 없으면 아래 <sourrce>가 가진 음악파일이 재생되게 된다.(다양한 확장자의파일을 가지게 한다?)
-
</audio>
-
video
-
HTML5에서 제공되는 tag
-
음악만/동영상(코덱에 대한 문제_없으면 재생x-브라우저마다 달라 재생될수도 안될수도)만 각각 재생가능.
-
<video src="동영상 파일 경로" width="" heigh="" controls="controls">
-
<source src="../">
-
</video>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>미디어 태그</title>
</head>
<body>
<div>
<audio autoplay="autoplay" controls="controls">
<source src="media/audio.mp3">
당신의 브라우저는 이 태그를 지원하지 않습니다.
</audio>
</div>
<div>
<video src="media/video.mp4" autoplay="autoplay" width="200" controls="controls" >
<!-- <source src="media/video.mp4"> source로 적으면 src부분을 video에 적지 않아도 된다.-->
당신의 브라우저는 이 태그를 지원하지 않습니다.<!-- 태그가 뜨지 않으면 이글이 뜬다 -->
</video>
</div>
<div>
우리집 주소는 <address style="font-style: normal;">서울시 강남구 역삼동 한독빌딩 8층 4강의장</address>입니다..
</div>
<div>
<code>
int i=0;<br/>
System.out.println(i);<br/>
</code>
</div>
</body>
</html>
*HTML5에서 제공되는 tag
-
<mark>, <code>, <address>, <audio>, <video>, <canvas>, <nav>, <section>, <aside>, <footer>
-
<mark> : 형광펜의 효과
-
<code> : (이부분이 다른 언어의 코드야~의미적)
-
다른언어의 코드 =>element가 가지고 있는 값이 다른언어의 코드임을 명시적으로 알려줄 때 (일을 하지는 않는다.)
-
</code>
-
<adress> : element가 가지고 있는 값이 주소임을 명시적으로 나타낼때 (이탤릭으로 나와 지저분해서 쓰지않고, CSS붙여 이탤릭아니게 사용)
-
<canvas> : 2D 그래픽을 그릴때 사용(JavaScripte가 반드시 필요하다.)-플래시의 효과를 대체할 수 있다.(완벽은 아니지만)
-
<nav>, <section>, <aside>, <footer> : CSS를 설정한 영역을 의미적으로 구분하는 태그들.(시멘틱 태그)=>CSS후 배움
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<숙제1,2>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회 원 가 입</title>
</head>
<body>
<table border="0" cellspacing="0"><!-- border="0"일정하라고 -->
<thead>
<tr>
<th align="center" colspan="2"><strong>회원가입</strong></th>
</tr>
<tr>
<td>아이디</td>
<td><input type="text" readonly="readonly"> <input type="button" value="중복확인"></input></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text"></td>
</tr>
<tr>
<td>주민번호</td>
<td><input type="text" size="6">-<input type="text" size="7"></td>
</tr>
<tr>
<td>성별</td>
<td><input type="radio" name="gender" value="남자" checked="checked">남자<input type="radio" name="gender" value="여자">여자</td>
</tr>
<tr>
<td>생년월일</td>
<td>
<select name="birth_y">
<option value="2019" selected="selected">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
</select>년
<select name="birth_m">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>월
<select name="birth_d">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>일
</td>
</tr>
<tr>
<td>나이</td>
<td><input type="text" size="3"></td>
</tr>
<tr>
<td>관심언어</td>
<td>
<input type="checkbox" value="JAVA" name="language"/>java
<input type="checkbox" value="C/C++" name="language" />C/C++
<input type="checkbox" value="python" name="language"/>python
<input type="checkbox" value="VB" name="language"/>VB<br/>
<input type="checkbox" value="JSP" name="language"/>JSP
<input type="checkbox" value="Servlet" name="language"/>Servlet
<input type="checkbox" value="ASP" name="language"/>ASP
<input type="checkbox" value="php" name="language"/>php
</td>
</tr>
<tr>
<td>결혼 여부</td>
<td><input type="radio" name="married" value="미혼" checked="checked">미혼<input type="radio" name="married" value="기혼">기혼</td>
</tr>
<tr>
<td>결혼 기념일</td>
<td><input type="text" size="5">년<input type="text" size="5">월<input type="text" size="5">일</td>
</tr>
<tr>
<td>우편번호</td>
<td><input type="text" readonly="readonly" size="7">-<input type="text" size="7"><input type="button" value="우편번호찾기"></td>
</tr>
<tr>
<td>주소</td>
<td><input type="text" size="30" readonly="readonly"></td>
</tr>
<tr>
<td>상세 주소</td>
<td><input type="text" size="30"></td>
</tr>
<tr>
<td>가입인사</td>
<td><textarea name="ta" cols="30" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="가입"/><input type="reset" value="초기화"/></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입-약관</title>
</head>
<body>
<table>
<tr align="center">
<td><strong>약 관</strong></td>
</tr>
<tr align="center">
<td><textarea name="ta" cols="30" rows="6">회원가입시 어쩌구 쩌저구 이러쿵 저러쿵</textarea></td>
</tr>
<tr align="center">
<td><input type="radio" name=agree value="동의" checked="checked">동의<input type="radio" name=agree value="동의 안함">동의안함</td>
</tr>
<tr align="center">
<td><!-- <input type="button" value="가입"> --><a href="join.html">가입</a></td>
</tr>
</table>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 70일차-CSS_정렬,디자인,배치 (0) | 2019.01.31 |
|---|---|
| 69일차-CSS (0) | 2019.01.30 |
| 67일차-HTML_div tag (0) | 2019.01.27 |
| 67일차-HTML_table tag (0) | 2019.01.26 |
| 66일자-HTML Tag (0) | 2019.01.25 |