[HTML] input, textarea 태그

input 태그

• 인라인태그
• 사용자가 입력할 부분에 주로 <input>태그를 이용함. 다양한 input의 옵션은 type 속성에 의해 결정 된다.

<!--기본형-->
<input type="유형" [속성="속성 값"]>

• id속성 : 여러번 사용된 폼 요소를 구분하기 위해 사용.
  id속성을 지정해 놓으면 <label>태그를 이용해 캡션을 붙일 수 있고, CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있음.

유형	설명	참고사항
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자.
search	검색 상자. 검색어를 입력했을 때, 오른쪽에 x표시가 되어 입력했던 검색어를 쉽게 지울 수 있음.	text 타입과 같은 속성 사용
tel	전화번호 입력 필드. 입력한 값을 확인하지는 않지만 전화번호로 인식하여 바로 전화를 걸 수 있음.	text 타입과 같은 속성 사용
url	URL 주소를 입력할 수 있는 필드. 반드시 http:// 로 시작하는 사이트 주소를 입력해야 함.	text 타입과 같은 속성 사용. value 속성을 이용해 http:// 를 미리 채워둘 수 있다.
email	메일 주소를 입력할 수 있는 필드.	text 타입과 같은 속성 사용
password	비밀번호를 입력할 수 있는 필드.	value를 제외한 text 타입과 같은 속성. value는 비밀번호처럼 **** 으로 처리 됨.
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐.
datetime	국제표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할초).
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초).
date	사용자 지역을 기준으로 날짜(연, 월, 일).
month	사용자 지역을 기준으로 날짜(연, 월).
week	사용자 지역을 기준으로(연, 주).
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할초).
number	숫자를 조절할 수 있는 화살표를 넣음.
range	숫자를 조절할 수 있는 슬라이드 막대.	파이어폭스, 익스플로러에서는 일반 텍스트 상자로 표시되므로 직접 숫자를 입력해야 함.
color	색상표.
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스를 넣음.	checked 를 사용하여 미리 체크가 되어 있도록 설정할 수 있음.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣음.	checked 를 사용하여 미리 체크가 되어 있도록 설정할 수 있음.
file	파일을 첨부할 수 있는 버튼.
submit	서버 전송 버튼.
image	submit 버튼 대신 사용할 이미지를 넣음.
reset	리셋 버튼을 넣음. (입력 값 초기화).
button	버튼을 넣음.
readonly	읽기 전용. 값을 수정할 수 없으나 데이터 전송은 가능함.
disabled	필드에 입력할 수 없게 막아둠. 데이터 전송 불가능.

---

text 타입에서 사용할 수 있는 속성

속성	설명
name	텍스트 필드를 구별할 수 있도록 이름을 붙임.
size	텍스트 필드의 길이 지정.
maxlength	텍스트 필드에 입력할 수 있는 최대 문자 개수를 지정.
minlength	텍스트 필드에 입력할 최소 문자 개수를 지정. (크롬과 안드로이드 브라우저만 가능)
value	텍스트 필드에 미리 채워질 텍스트. 입력을 시작해도 사라지지 않음.
placeholder	필드에 대한 안내문구를 채워 둠. 입력을 시작하면 사라짐.

 

 

checkbox & radio 타입에서 사용할 수 있는 속성

속성	설명
name	서버의 폼 프로그램에서 박스를 구분하기 위해 이름을 지정함. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리는 같은 name속성으로 함.
value	필수 속성. 선택한 박스를 서버로 알려줄 때 넘길 값을 지정함. 영문이거나 숫자여야 함.
checked	주어진 선택지에서 미리 선택해 놓음.

<!--사용예제-->
<form action="">
    <fieldset>
         <legend>신청과목 <small>(1과목)</small></legend>
         <label for="music"><input type="radio" name="subject" id="music" value="music">음악</label>
         <label for="math"><input type="radio" name="subject" id="math" value="math">수학</label>
         <label for="english"><input type="radio" name="subject" id="english" value="english" >영어</label>
    </fieldset>
</form>

• for - id - value : 같은 값으로 지정.
• name : 같은 분류 안에서 동일한 name으로 지정.

 

number & range 타입에서 사용할 수 있는 속성

속성	설명
min	필드에 입력 가능한 최솟값. 기본 최소값은 0.
max	필드에 입력 가능한 최댓값. 기본 최댓값은 100.
step	숫자의 간격 지정. 기본값은 1. (짝수나 홀수 등 특정 숫자로 제한할 때) 사용자가 화살표가 아닌 값을 직접 입력할 경우 적용되지 않을 수 있음.
value	필드에 표시할 초기값.

 

 

---

textarea 태그

<!--기본형-->
<textarea [속성="속성 값"]> 내용 </textarea>
<!-- 내용에 글을 미리 입력해둘 수 있다. 내용이 없으면 빈 텍스트 영역. 
	내용부분엔 공백이 그대로 표시되어 나타난다.-->

속성	내용
name	다른 폼 요소와 구분하기 위헤 텍스트 영역의 이름을 지정함.
cols	텍스트 영역의 가로 너비를 문자 단위로 지정함. 한 줄의 내용이 길어 가로 너비가 넘어갈 경우 자동 줄바꿈.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정함. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생김.