[HTML&CSS] input 태그 다루기 + 약간의 textarea

 

input, textarea 태그는 사용자가 직접 입력할 수 있는 부분을 생성해준다

 

 

 

 

input

 

input에는 type, value 등의 옵션을 넣어 입력받길 원하는 형식을 미리 지정해줄 수 있다.

 

 

 

 

type ="옵션"

 

button - 버튼
submit - 양식 제출용 버튼

imagesubmit - 이미지 버튼

reset - 양식 초기화용 버튼

 

text - 일반 문자
radio - 한개만 선택할 수 있는 컴포넌트. 기본 모양은 원형
checkbox - 다수(1개 이상)를 선택할 수 있는 컴포넌트. 기본 모양은 사각형

 

url - URL 필드

file - 파일 업로드

search - 검색 상자

hidden - 사용자에게 보이지 않고 서버로 넘기는 값

email - 이메일 필드
password - 비밀번호 필드

tel - 전화번호 필드

 

datetime - 국제 표준시의 날짜와 시간(연,월,일,시,분,초,마이크로초)
datetime-local - 사용자가 있는 지역의 날짜와 시간
date - 사용자 지역의 날짜   연、월、일
month - 사용자 지역의 날짜　연、월
week - 사용자 지역의 날짜　연、주
time - 사용자 지역의 시간　시、분、초

number - 수량 선택 등, 숫자를 조절할 수 있는 화살표가 디폴트로 오른쪽에 상,하로 나옴
range - 숫자를 조절할 수 있는 슬라이드 막대
color - 색상표. 클릭하면 색상을 고를 수 있는 창이 뜬다

 

 

 

---

 

 

 

 

이 중에 사용한  number

number, 옆에 숫자 +-버튼이 생긴다

 

 

 

 

value는 default값을 미리 주는 옵션.

수량에 대한 옵션을 1로 주어봤다.

 

 

placeholder 로 어떤 값을 입력받고 싶은지 사용자에게 힌트를 준다

 

 

 

 

 

---

 

textarea

 

 

textarea는 오른쪽 아래 부분을 마우스로 드래그하면 크기를 마음대로 조절할 수 있는데,

원하는 크기로 고정하기위해서는 css로 고정 옵션을 주어야한다

 

 

textarea {
    resize: none; 
}

 

 

 

 

 

textarea에 글을 넣되 수정이 불가능하게 만들고 싶다면 

html 에서  readonly 속성을 부여하면 된다.

 

<textarea readonly> </textarea>