**html과 jsp의 위치
==> webapp 아래에 있어야 합니다.
만약, 실수로 WEB-INF에 만들면 서비스 할 수 없어요!
http://localhost:8080/day1130/WEB-INF/start.html
==> 404-찾을 수 없음
WEB-INF 사용자에게 보여지는 영역이 아니기 때문에
직접 접근할 수 없어요.
**입력양식과 관련한 태그들
==> 사용자가 로그인을 한다던지 회원가입을 하거나
혹은 상품을 등록한다거나
혹은 게시물을 등록한다거나
할 때에는
사용자로 부터 데이터를 입력받아야 합니다.
이러한 모든 태그들을 form이라고 합니다.
---------------------------------------------------------
사용자로 어떠한 내용을 입력받기 위해서는 다음과 같이
<form>
</form>
태그안에 써 줍니다.
<form>태그에는 다음의 속성들이 표현됩니다.
<form action="" method="">
</form>
action에는 사용자가 입력한 값(들)을
전달받아 처리하는 프로그램(jsp/서블릿/서비스명) 이름을 써 줍니다.
method에는 사용자가 입력한 값들을
서버의 프로그램에게 전달하는 방식을 써 줍니다.
전달하는 방식에는 get방식과 post방식이 있어요!
get방식은 사용자가 입력한 값이 서버로 전달될때에 주소표시줄에 모두 노출이 되어요!
post방식은 사용자가 입력한 값이 서버로 전달될때에 주소표시줄에 노출되지 않습니다.
method을 생략하면 기본값은 get입니다. 따라서
form태그를 값을 입력하여 서버의 프로그램을 전달할 때에는
대부분 "post"로 바꾸어야 합니다.
-------------------------------------------------
<< 여러가지 입력 양식 들 >>
<input type="text">
==> 한줄 입력받는 입력상자
서버로 값을 전달하려면
서버에서 접근할 수 있도록
name 이라는 속성이 필요합니다.
서버에서는 name에 설정한 값으로 데이터를 받아 올 수 있어요!
또, 입력상자에 처음부터 정해진 어떤 기본값을 설정하려면
value라는 속성에 값을 설정 할 수 있어요!
또, 화면에 보여지는 글자수를 설정하기 위하여
size 속성을 사용할 수 있어요.
size=3
이라고 하면 화면에 3글자까지 보이도록 합니다.
보이는것만 설정하는 것이기 때문에 3글자 이상 입력할 수 는 있어요!
입력한 문자열의 길이를 제한하기 위해서는
minlength와 maxlength속성을 이용할 수 있어요!
이 입력상자에 무엇을 입력해야 하는지
보통은 왼쪽에 글자를 써 줍니다.
그런데 모바일 화면이라면
왼쪽 무엇을 입력해야할지 글자까지
써주려니 공간이 부족해요.
그래서 placeholder 속성을 이용하여
무엇을 입력해야할 지 써 줄 수 있어요.
이것은 value처럼 입력상자에 써 지지만
입력하려고 선택하는 순간 그 내용을 사라지게 됩니다.
입력상자들이
여러개 있을때에
특정 입력상자에
맨 처음 커서를 두도록 하려면
autofocus 속성을 이용합니다.
-------------------------------------------------------
<input type="">
text ==> 한줄입력상자
password ==> 암호입력상자
checkbox ==> 준비된 것 중에서 여러개 선택
radio ==> 준비된 것 중에서 하나만 선택
==> checkbox와 radio를
그룹을 설정하기 위하여
관련있는 항목을 동일한 이름을 설정합니다.
hidden ==> 화면에 보이지 않고 서버로 값을 전달하고자 할 때 사용
file ==> 서버로 보내고자 하는 파일을 선택하고자 할 때 사용.
이것을 파일을 선택하는 모양만 보여줍니다.
서버로 파일을 보내기 위해서는
별도의 프로그램이 필요합니다.
form태그에도 속성을 추가를 해야 합니다.
'프로그래밍 공부 정리 > html,css' 카테고리의 다른 글
| 주요 선택자, 텍스트 관련 스타일(1) (0) | 2021.12.08 |
|---|---|
| html(3), css공부(1) 스타일 설정 (0) | 2021.12.07 |
| html의 여러가지 입력양식(2) (0) | 2021.12.06 |
| html의 태그 (0) | 2021.12.04 |
| HTML (0) | 2021.12.03 |