HTML/CSS: HTML
** html과 jsp의 위치 webapp 아래에 있어야 한다. 실수로 WEB-INF에 만들면 서비스 할 수 없다! WEB-INF는 사용자에게 보여지는 영역이 아니기 때문에 직접 접근할 수 없다.
순서있는 목록
<ol>
<li></li>
<li></li>
<li></li>
</ol>
순서없는 목록
<ul>
<li></li>
<li></li>
<li></li>
</ul>
입력양식과 관련한 태그들
사용자가 로그인, 회원가입 상품등록, 게시물등록 등을 할때는 사용자로부터 데이터를 입력받아야 한다.
이러한 모든 태그들을 form 이라고 한다.
<form>
</form>태그안에 써준다.
<form>태그에는 다음의 속성들이 표현된다.
<form action"" method="">
</form>
action에는 사용자가 입력한 값을 전달받아 처리하는 프로그램(jsp/서블릿/서비스명) 이름을 써 준다.
GET/POST 방식
method에는 사용자가 입력한 값들을 서버의 프로그램에게 전달하는 방식을 써 줍니다. 전달하는 방식에는 get방식과 post방식이 있다. get방식은 사용자가 입력한 값이 서버로 전달될때에 주소표시줄에 모두 노출이 된다. post방식은 사용자가 입력한 값이 서버로 전달될때 주소표시줄에 노출되지 않는다. method를 생략하면 기본값으로 get방식 이다. 따라서 form태그를 값을 입력하여 서버의 프로그램을 전달할때는 대부분 post로 바꿔야한다.
여러가지 입력 양식 틀
<input type="text">
한줄 입력받는 입력상자
서버로 값을 전달하려면 서버에서 접근할 수 있또록 name이라는 속성이 필요하다. 서버에서는 name에 설정한 갑승로 데이터를 받아올 수 있따.
또, 입력상자에 처음부터 정해진 어떤 기본값을 설정하려면 value라는 속성에 값을 설정할 수 있다.
화면에 보여지는 글자수를 설정하기 위해 size 속성을 사용할 수 있따. size=3이라고 하면 화면에 3글자까지 보이도록 한다. 보이는것만 설정하는 것이기 떄문에 3글자이상 입력할 수는 잇다!
입력한 문자열의 길이를 제한하려면 minlength, maxlength 속성을 이용!
이 입력상자에 무엇을 입력해야하는지 보통은 왼쪽에 글자를 써준다.
그런데 모바일 화면이라면 왼쪽 무엇을 입력해야할지 글자까지 써주려니 공간 부족 그래서 placeholder 속성을 이용해 무엇을 입력해야할지 써줄 수 있다. 이것은 value처럼 입력상자에 써지지만 입력하려고 선택하는 순간 그 내용은 사라지게 된다.
<input type="">
text =>한줄입력상자
password =>암호입력
checkbox =>준비된 것 중에서 여러개 선택
radio =>준비된 것 중에서 하나만 선택
checkbox와 radio를 그룹을 설정하기 위하여 관련있는 항목을 동일한 이름으로 설정한다.
hidden => 화면에 보이지 않고 서버로 값을 전달하고자 할때 사용
file => 서버에 보내고자 하는 파일을 선택하고자 할대 사용.이것을 파일을 선택하는 모양만 보여준다 서버로 파일을 보내기 위해서는 별도의 프로그램이 필요하다. form태그에도 속성 추가가 필요하다.
** html5에서 향상된 입력양식(들) search => text와 같은 기능. 입력내용을 빠르게 삭제할 수 있는 x버튼 제공
tel => 전화번호 입력을 위한 태그 url => 인터넷 주소 입력을 위한 태그 email => 이메일 주소 입력을 위한 태그 range => 슬라이드 바를 조절하여 숫자를 입력하는 태그 number => 숫자를 입력하기 위한 태그 color => 색상을 입력하기 위한 태그
required 옵션을 주게 되면 값을 생략할 수 없도록 설정할 수 있다. 이렇게 하게되면 만약에 값을 생략하면 브라우저가 오류메세지를 출력한다. (브라우저마다 모양 다름)
콤보박스/리스트목록
콤보박스나 리스트처럼 목록중에서 선택하고자 할때 사용한다.
<select name="" size="">
<option value="값">문자열</option>
</select>
size를 생략하면 1이고
size가 1이면 콤보박스로 표현
size가 2이상이면 리스트로 표현
여러줄의 문장을 입력
rows에는 보여줄 줄수를 적어준다. cols에는 보여줄 칸수를 적어준다. rows와 cols에 설정한 값 보다 더 많이 작성하면 스크롤이 생긴다.
input 태그의 value처럼 처음부터 기본값을 설정하려면
와 같이 설정한다.
이때 사이에는 엔터를 누르거나 빈칸을 쓰지 않도록 해야한다.
textarea의 내용을 db에 저장하였다가 다시 화면에 출력할때에 \n이 웹브라우저에서는 줄바꿈으로 표현되지 않는다.
사용자가 입력한 내용 그대로 줄바꿈을 표현하려면
- String의 replace 메소드를 이용하여 \n을 모두
로 바꾼후 출력 - textarea를 읽기전용으로 만들어 표현
날짜와 시간에 관한 태그
<input type="">
datetime 국제표준시 설정된 연,월,일,시,분,초
datetime-local 사용자의 지역을 기준으로
date 연, 월, 일
month 연, 월
week 연, 주
time 시, 분, 초
create table test(no number primary key, birthdate date);
** 데이터베이스 테이블에 날짜를 넣을때 년, 월, 일을 하이픈으로 구분하여 넣을 수 있다.
insert into test values(1, ‘2005-09-21’);