190618_Day47 <JavaScript 시작>

form 태그 역할

  1. form내의 입력데이터를 action속성에 명시한 URL 페이지에게 전달(이동)

    보통 URL 페이지에는 서버페이지가 표시가 됨. (.jsp .php .asp .do 등)

  2. 페이지 이동 < 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종 비교 정리

    1. 아무반응없는 눌려지는 버튼 (JavaScript를 통해 기능정의 가능)
    <input type = "button" value = "버튼1(type = button)">

  1. button태그의 기본 type 속성의 값은 submit입니다

        <button type = 'submit'> 기본값 
    즉, form태그 안에 사용하면 <inputj type = 'submit'>과  같은 기능을 갖음
    만약, submit이 아닌 다른 기능을 구현하고 싶다면 명시적인 type속성을 정의해야 함
    <button type = "submit"> 버튼2 ( button태그 ) </button>

  2. form태그내의 submit버튼의 경우 action속성의 URL이동

    <input type = "submit" value = "버튼3(type = submit)">

  3. 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 -->
     아 이 디 &nbsp;: <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>

1560838336081

< 자바스크립트 >

  • 웹브라우저에서 실행되는 프로그램
  • HTML문서내에서 실행(html에 종속적이다, 브라우저에서 실행된다!)
  • HTML문서( 정적페이지 ) = > JavaSctipt적용(동적페이지)
  • HTML 문서를 통해 입력된 데이터를 얻어오고 데이터에 대한 유효성 검사를 할 때 사용
  • HTML문서에 대한 조작 ( 태그, 속성, 스타일)
  • 결론) 자바스크립트 왜(어디서) 사용하는가?
    • 문서 조작 (태그와 속성)
      • 조작에 필요한 데이터가 외부에 존재한다면(현재 HTML 없을 시) Ajax를 사용!!
    • 유효성 검사 (서버에게 데이터를 보내기 전에 검사)

<<JavaScript와 java 비교>>

  1. JavaScript : 클라이언트(사용자, 브라우저) 스크립트 : 브라우저에서 실행

    JSP(Java) : 서버 스크립트 : JVM에서 실행!

  2. JavaScript의 위치

    • HTML문서내에 포함되어서 실행

    • HTML문서의 어떤 위치라도 정의하는 것이 가능!

      <html>
    <head>
        <sctipt>
            프로그램영역!
            (변수선언, 함수(function) 정의 (절대 실행은 안됨, 호출 전까지))
        </sctipt>
    </head>
    <body>
           <script>
            프로그램영역
            (함수 호출)
        </script>
    </body>
</html>

  3. 자료형을 선언, 정의하지 않는다!! ★

    자바의 경우

    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

+ Recent posts

티스토리툴바