[HTML] #2-4 HTML 파헤치기 4 : 폼의 속성

1. 폼의 속성들

 

 

 결국 폼을 제대로 사용하려면 Backend단과의 연결이 필수적이다.

 왜냐하면 버튼을 눌러도 무언가와 연동이 되지 않으면 빈 껍데기에 불과하기 때문이다.

 

 그래서 우선 action! 이라는 요소를 사용해보려 한다.

 이 action은 말 그대로 액션! 이다. 백앤드단과 연동시켜주는 것이다.

 

        <form id="loginfrm" name="loginfrm" action="ok.jsp">
            아이디:<input type="text" name="userid"> <hr>

            비밀번호:<input type="password" name="userpw"> <hr>

            <input type="submit" value="전송">

        </form>

  출력 결과는 아래와 같다.

아이디:

---

비밀번호:

---

 

 이렇게 사용자가 아이디와 비밀번호를 누르고 전송을 누르는 액션을 하면 응답이 돌아와야 한다.

 로그인 성공이라던가, 실패라던가, 다음 창으로 넘어간다거나.

 이 요청과 응답, 그 안에서 벌어지는 모든 과정이 바로 서버라는 하나의 개념 안에서 이루어지는 것이다.

 (지금은 서버에 대한 이 정도의 개념만 잡아도 좋을 것 같다.)

 

 폼의 속성을 만들어주는 대표적인 요소들은 아래와 같다.

id=""	폼 아이디 : frontend 단에서 주로 접근
name=""	폼 이름 : backend 단에서 주로 접근
action=""	사용자가 입력 요청한 정보를 서버측에서 받는 페이지명 또는 명령어
method=""	전송방식. get 방식 또는 post 방식으로 나누어진다.
enctype=""	파일을 첨부해서 보내야 할 경우에 사용된다.

 

 

 ** enctype 일단 해보기

  form에 enctype을 써보자, 명령어가 자동 완성된다.

  그 중 "multipart/form-data"를 클릭해보자.

  그리고 그 하단에 file 타입의 버튼을 만들어보자.

        <form enctype="multipart/form-data">

            첨부파일 : <input type="file">

        </form>

  아래와 같은 출력물이 나온다(어디서 많이 보았던).

 

               

 

 

 

2. type=image

        <form action="ok2.jsp">
            <img src="../images/angel.png">

            <hr>

            <input type="image" src="../images/face-wink.png">

        </form>

 폼 안에 이미지를 넣는 방법을 두 가지 소개한다.

 첫 번째는 <img> 에 소스를 직접 잡아주는 방식(2행).

 그리고 두 번째는 <input type=image> 에 소스를 직접 잡아주는 방식이다(5행).

 

 무슨 차이가 있을까?

 첫 번째 코드로 생성된 이미지는 단순한 이미지로 취급이 된다.

 하지만 두 번째 코드로 생성된 이미지는 input 된 것이다. 즉 버튼화가 된 것이다.

 

 누르면 어디로 이동할까?

 위에서 잡아둔 action 에 연동 되어진 ok2.jsp 가 정해진 프로그래밍에 따라 이동을 시킬 것이다.

 

 

3. 다양한 Input Types

 

 1) hidden 속성

 HTML 페이지에서 노출되지는 않지만 form에 포함되어야 할 요소를 만들어야 할 때 사용된다.

 사용자들은 굳이 보지 않아도 되지만 개발자들에게는 꼭 넣어야 할 요소들이 있기 때문이다.

 코드는 아래와 같이 작성된다.

        <input type="hidden" id="page" name="page" value="3">
        <input type="hidden" id="col" name="col" value="title">

 

 2) number 속성

 숫자만 입력하게 하고 싶을 때 사용되는 속성이다... 라고 이렇게 하나씩 다 적다보면 끝이 없이 적어야 할 것이다.

 그러니 아래의 사이트에 접속해서 필요한 것들을 그때마다 찾아서 사용할 줄 아는 것도 개발자의 미덕(?)일테니 접속해서 확인해보길 바란다.

https://www.w3schools.com/html/html_form_input_types.asp

HTML Input Types

 

나는 이것들을 다 일일이 적을 자신이 없다

 

 

4. label

 

 요새 자주 보게되는 기능이라 소개!

 라벨이란 정보를 입력해야하는 공간이 아닌 그 정보의 이름만 클릭해도 정보를 입력하는 곳으로 자동으로 연결해주는 기능이다(말 그대로 이름이 정보를 입력하는 곳의 라벨이 되는 것이다).

 

 코드는 아래와 같이 작성된다.

        <label for="user">이름 :</label>
        <input type="txet" id="user">

 위의 코드를 사용해서 아래에 구현해보았다.

 이름을 클릭해보자!

 이름이 라벨이 된 것을 확인할 수 있다.

  이름 :