190618_Day47 <JavaScript 시작>
form 태그 역할
form내의 입력데이터를 action속성에 명시한 URL 페이지에게 전달(이동)
보통 URL 페이지에는 서버페이지가 표시가 됨. (.jsp .php .asp .do 등)
페이지 이동 < a > 와 더불어.
< a > 는 단순 이동
<a href="../0617/hello.html">< form action > 은 데이터 전송과 함께 페이지 이동
<form action = "../0617/hello.html">
input
기본 type 은 text
<input>password 와 같은 type을 줄 수 있다.
<input type = "password">
value 값에는 기본 값(초기값) 설정 할 수 있다.
<input value = "기본아이디">size속성 통해 길이 조정 가능
<input size = "1">그런데 글자 size보다 더 입력되네? => maxlength 통해 조절 가능
<input size = "1" maxlength = "1">type = checkbox 로 다중선택 가능
<input type = "checkbox"> 사과 <input type = "checkbox" checked> 딸기 <input type = "checkbox"> 바나나radio와 name 을 통해 택1 선택 가능
<input type = "radio" name = "room"> 1강의실 <input type = "radio" name = "room"> 2강의실 <input type = "radio" name = "room"> 3강의실 <input type = "radio" name = "room"> 4강의실form, name 값과 submit을 통해 입력한 값을 전송 할 수 있다.
<input type = "submit" name ="button1" value = "버튼3(type = submit)">hidden을 통해 보이지 않게 데이터를 전달 할 수 있다. (추후 사용용도 배움)
<input type = "hidden" value = "전송">type file로 파일 업로드 가능!
<input type = "file">method 은 get이 dafault , post옵션을 통해 전송된 값 안보이게 할 수 있다. (추후 배움)
enctype (추후 배움)
콤보박스는 input태그를 사용하는것이 아니라 select 태그를 사용함!
운동 : <select multiple> <option>야구</option> <option selected>축구</option> <option>농구</option> <option>배구</option> </select>
select multiple 을 사용하면 아이템이 펼처진 상태에서 보여짐
<select multiple>textarea 통해 선택한 크기의 텍스트 상자 사용 가능
<textarea rows="5" cols="10" >기본내용은 여기에</textarea>- 단 value 사용 불가
Button 4종 비교 정리
- 아무반응없는 눌려지는 버튼 (JavaScript를 통해 기능정의 가능)
<input type = "button" value = "버튼1(type = button)">
button태그의 기본 type 속성의 값은 submit입니다
<button type = 'submit'> 기본값 즉, form태그 안에 사용하면 <inputj type = 'submit'>과 같은 기능을 갖음 만약, submit이 아닌 다른 기능을 구현하고 싶다면 명시적인 type속성을 정의해야 함<button type = "submit"> 버튼2 ( button태그 ) </button>form태그내의 submit버튼의 경우 action속성의 URL이동
<input type = "submit" value = "버튼3(type = submit)">form태그내의 reset버튼의 경우 폼 내의 데이터를 초기화 하는 기능
<input type = "reset" value = "버튼4(type = reset)">
- 만약, < input > 태그를 브라우저화면 보이기만 하는것이 목적이라면 굳이 < form > 태그 안에 정의할 필요 없음.
- < input > 태그를 < form> 태그안에 정의하는 이유는 폼 단위로 데이터를 특정 페이지에게 전달하기 위함
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>폼태그 테스트 (input 태그)</title>
</head>
<!-- form_test.html -->
<body>
<h3>폼태그 테스트 (input 태그)</h3>
<hr>
<h4>단순 페이지 이동</h4>
<a href="../0617/hello.html"> hello.html 문서로 이동! </a>
<hr>
<h4>정보와 함께 페이지 이동 (form)</h4>
<form action = "../0617/hello.html" name =""
method = "post" enctype="application/x-www-form-urlencoded"> hello.html 문서로 이동!
<br>
기본 input : <input> <br> <!-- 기본type은 text -->
아 이 디 : <input type = "text" value = "기본아이디" size = "10" name = "id"> <br>
비밀번호 : <input type = "password" name = "password"> <br>
주민번호 : <input type="text" size = "6" maxlength="6" name = "ssn1">
-
<input type = "password" size = "7" maxlength="7" name = "ssn2"> <br>
좋아하는 과일 : <input type = "checkbox"> 사과
<input type = "checkbox" checked> 딸기
<input type = "checkbox"> 바나나
<br>
나의 강의실 : <input type = "radio" name = "room"> 1강의실
<input type = "radio" name = "room"> 2강의실
<input type = "radio" name = "room"> 3강의실
<input type = "radio" name = "room"> 4강의실
<br>
파일 업로드 : <input type = "file">
<br>
운동 : <select multiple>
<option>야구</option>
<option selected>축구</option>
<option>농구</option>
<option>배구</option>
</select>
<br>
비고 : <textarea rows="5" cols="10" >기본내용은 여기에</textarea>
<br>
나보여? <input type = "hidden" value = "전송">
<br>
<input type = "button" value = "버튼1(type = button)">
<!-- 아무반응없는 눌려지는 버튼 (JavaScript를 통해 기능정의 가능) -->
<button type = "submit"> 버튼2 ( button태그 ) </button>
<!-- button태그의 기본 type 속성의 값은 submit입니다
<button type = 'submit'> 기본값
즉, form태그 안에 사용하면 <inputj type = 'submit'>과 같은 기능을 갖음
만약, submit이 아닌 다른 기능을 구현하고 싶다면 명시적인 type속성을 정의해야 함
-->
<input type = "submit" value = "버튼3(type = submit)">
<!-- form태그내의 submit버튼의 경우 action속성의 URL이동 -->
<input type = "reset" value = "버튼4(type = reset)">
<!-- form태그내의 reset버튼의 경우 폼 내의 데이터를 초기화 하는 기능 -->
</form>
</body>
</html>미션 회원가입폼을 브라우저에 출력하시오.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>회원가입폼</title>
</head>
<body>
<center>
<h3 align="left">회원 가입</h3>
<hr>
<form action="" name="" method="get" >
<table align="center" cellpadding="5">
<tr>
<td>아이디 :</td>
<td><input type="text" size="10" name="id"></td>
<td><button>아이디 중복확인</button></td>
</tr>
<tr>
<td>비밀번호 :</td>
<td><input type="password" size="10" name="pass"></td>
</tr>
<tr>
<td>비번확인 :</td>
<td><input type="password" size="10" name="pcheck"></td>
</tr>
<tr>
<td>이름 :</td>
<td><input type="text" size="5" maxlength="5" name="name">
</td>
</tr>
<tr>
<td>주민번호 :</td>
<td><input type="text" size="6" maxlength="6" name="ssn1">
- <input type="password" size="7" maxlength="7" name="ssn2">
</td>
</tr>
<tr>
<td>전화번호 :</td>
<td><input type="text" size="3" maxlength="3" name="pnum1">
- <input type="text" size="4" maxlength="3" name="pnum2"> -
<input type="text" size="4" maxlength="3" name="num3"></td>
</tr>
<tr>
<td>주소 :</td>
<td><input type="text" size="30" name="addr"></td>
</tr>
<tr>
<td>직업 :</td>
<td><select>
<option>학생</option>
<option>직장인</option>
<option>자영업</option>
<option>강아지</option>
</select></td>
</tr>
<tr>
<td colspan="3" align="center">
<button type="submit" value="등록">등록</button>
<button type="reset" value="취소">취소</button>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>- form 에 < form > 만 입력하고 옵션 주지 않아도 기본적으로 action에 기본값이 들어가기 때문에 submit이 되는 것.
- post옵션은 주겠다 라는 것! 데이터를 주고 html을 다시 받아오겠다. 주는 의미가 강함.
- < input > 태그의 속성
- readonly 읽기 전용 ( 쓰기 금지 ) : 자바의 setEditable(false)
- disabled 비활성화 : 자바의 setEnable(false)
base
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<!--
base.html(레이아웃을 정하는 Html문서, FrameSet정의)
주의 body태그 사용x, body태그 자리에 frameset태그를 정의
-->
<frameset rows = " 20%, *">
<frame src = "header.html" name = "header">
<frameset cols = "20%,*">
<frame src = "menu.html" name = "menu">
<frame src = "body.html" name = "body">
</frameset>
<!-- frame태그의 속성 name은 각 레이아웃의 위치 식별을 하는 용도로 사용 -->
</frameset>
<body>
</body>
</html>body
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<!-- body.html -->
<body>
기본 바디
</body>
</html>header
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<!-- header.html -->
<body bgcolor="lightgreen">
<center>
<h2> FrameSet 헤더 </h2>
</center>
</body>
</html>menu
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<!-- menu.html -->
<body bgcolor="brown">
<h3> 메뉴 </h3>
<ul><!-- unordered list -->
<li>기본</li> <!-- list item -->
<li><a href="join_form.html" target ="body" >회원가입</a></li>
<li><a href= "../0617/tag_test.html" target = "body">태그테스트</a></li>
<li><a href= "http://playdata.io" target = "body">플레이데이터</a></li>
</ul>
</body>
</html>
< 자바스크립트 >
- 웹브라우저에서 실행되는 프로그램
- HTML문서내에서 실행(html에 종속적이다, 브라우저에서 실행된다!)
- HTML문서( 정적페이지 ) = > JavaSctipt적용(동적페이지)
- HTML 문서를 통해 입력된 데이터를 얻어오고 데이터에 대한 유효성 검사를 할 때 사용
- HTML문서에 대한 조작 ( 태그, 속성, 스타일)
- 결론) 자바스크립트 왜(어디서) 사용하는가?
- 문서 조작 (태그와 속성)
- 조작에 필요한 데이터가 외부에 존재한다면(현재 HTML 없을 시) Ajax를 사용!!
- 유효성 검사 (서버에게 데이터를 보내기 전에 검사)
- 문서 조작 (태그와 속성)
<<JavaScript와 java 비교>>
JavaScript : 클라이언트(사용자, 브라우저) 스크립트 : 브라우저에서 실행
JSP(Java) : 서버 스크립트 : JVM에서 실행!
JavaScript의 위치
HTML문서내에 포함되어서 실행
HTML문서의 어떤 위치라도 정의하는 것이 가능!
<html> <head> <sctipt> 프로그램영역! (변수선언, 함수(function) 정의 (절대 실행은 안됨, 호출 전까지)) </sctipt> </head> <body> <script> 프로그램영역 (함수 호출) </script> </body> </html>
자료형을 선언, 정의하지 않는다!! ★
자바의 경우
String name = "홍길동"; name = "길라임"; name = 3000; (X) 에러발생자바스크립트의 경우
String name = "홍길동"; (X) 에러발생 name = "홍길동"; (O) 자료형 선언 않고 사용! //////// var su; ---> 변수선언 su = 2000; ---> number타입! su = "김주원" ---> String타입 // 대입되는 데이터에 따라 자료형이 변환됨 su = true; ---> boolean타입 su = new Data(); ---> Date타입
'클라우드 기반 웹 개발자 과정 공부 > HTML' 카테고리의 다른 글
| 190617_DAY46 <HTML> (0) | 2019.06.17 |
|---|