본문 바로가기
프로그래밍 공부 정리/html,css

html의 여러가지 입력양식(2)

by 메기사랑 2021. 12. 6.

** html5에서 향상된 입력양식(들)
search ==> text와 같은 기능입니다. 
입력내용을 빠르게 삭제할 수 있는 x 버튼제공
tel ==> 전화번호 입력을 위한 태그
url ==> 인터넷 주소를 입력을 위한 태그
email ==> 이메일 주소를 입력을 위한 태그
range  ==> 슬라이브 바를 조절하여 숫자를 입력하는 태그
number ==> 숫자를 입력하기 위한 태그
color ==> 색상을 입력하기 위한 태그

required 옵션을 주게 되면 값을 생략할 수 없도록 설정할 수 있어요.
이렇게 하게되면 
만약에 값을 생략하면
브라우저가 오류메세지를 출력합니다.
(브라우저 마다 모양이 달라요)
------------------------------------------------------
**콤보박스나 리스트 처럼 목록중에서 선택하고자 할 때 사용합니다.

<select name="" size="">
<option value="값">문자열</option>
</select>

==> size를 생략하면 1이고 
size가 1이면 콤보박스로 표현
size가 2이상이면 리스트로 표현

-----------------------------------------------------
**여러줄의 문장을 입력
<textarea name="" rows="2" cols=""></textarea>

rows에는 보여줄 줄수를 적어줍니다.
cols에는 보여줄 칸수를 적어줍니다.
rows와 cols에 설정한 값 보다 더 많이 작성하면 스크롤이 생깁니다.

input 태그의 value처럼 
처음부터 기본값을 설정하려면
<textarea>기본값</textarea>

과 같이 설정합니다.
이때 
<textarea></textarea>사이에는 
엔터를 누르거나 빈칸을 쓰지 않도록 해야 합니다.
그렇게 그만큼 빈칸 문자도 전송이 됩니다.

textarea의 내용을 
db에 저장하였다가 
다시 화면에 출력할 때에 
\n이 웹 브라우저에서는 줄바꿈으로 표현되지 않아요

사용자가 입력한 내용그대로 
줄바꿈을 표현하려면
1. String의 replace 메소드를 이용하여 \n을 모두 <br> 바꾼후 출력
2. textrea를 읽기전용으로 만들어 표현한다.

---------------------------------------------------------------
**날짜와 시간에 관한 태그
<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');

'프로그래밍 공부 정리 > html,css' 카테고리의 다른 글

주요 선택자, 텍스트 관련 스타일(1)  (0) 2021.12.08
html(3), css공부(1) 스타일 설정  (0) 2021.12.07
html의 여러가지 입력양식  (0) 2021.12.05
html의 태그  (0) 2021.12.04
HTML  (0) 2021.12.03