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
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
4. label
요새 자주 보게되는 기능이라 소개!
라벨이란 정보를 입력해야하는 공간이 아닌 그 정보의 이름만 클릭해도 정보를 입력하는 곳으로 자동으로 연결해주는 기능이다(말 그대로 이름이 정보를 입력하는 곳의 라벨이 되는 것이다).
코드는 아래와 같이 작성된다.
<label for="user">이름 :</label>
<input type="txet" id="user">
위의 코드를 사용해서 아래에 구현해보았다.
이름을 클릭해보자!
이름이 라벨이 된 것을 확인할 수 있다.
'⁂ HTML > : 기본 익히기' 카테고리의 다른 글
[HTML] #3-2 블럭(block!) 2 : 웹사이트 따라 만들어보기 (0) | 2022.07.28 |
---|---|
[HTML] #3-1 블럭(block!) 1 : 블럭이 뭐야? (0) | 2022.07.28 |
[HTML] #2-3 HTML 파헤치기 3 : 폼 만들어보기 (0) | 2022.07.28 |
[HTML] #2-2 HTML 파헤치기 2 : Frame, Table (0) | 2022.07.27 |
[HTML] #2-1 HTML 파헤치기 1 : 기본 문법, 문자(색상, 크기, 특수문자), 외부자료연결하기 (0) | 2022.07.27 |