텍스트 필드
사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea> 를 이용한다.
문법
1 | < input type = "text" name = "값의 이름" value = "값" disabled = "disabled" readonly = "readonly" /> |
- type : text를 사용해야 텍스트 필드가 된다.
- name : 입력한 데이터의 이름
- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다.
- disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다.
- readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다.
예제
example1.html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html > < head > < title >생활코딩</ title > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "url" method = "GET" > 닉네임 : < input type = "text" name = "nickname" /> < br /> < input type = "submit" /> </ form > </ body > </ html > |
비밀번호
보안이 중시되는 데이터의 입력을 받는다.
예제
example2.html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> < html > < head > < title >생활코딩</ title > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "url" method = "GET" > 비밀번호 : < input type = "password" name = "password" /> < br /> < input type = "submit" /> </ form > </ body > </ html > |
hidden data
화면상에 표시되지 않는 컨트롤을 생성한다. 서버로 전달할 데이터이지만 사용자에게는 노출될 필요가 없는 데이터인 경우 사용한다.
예제
example3.html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < html > < head > < title >생활코딩</ title > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "url" method = "GET" > 이름 : < input type = "text" name = "name" /> < input type = "hidden" name = "language" /> < br /> < input type = "submit" /> </ form > </ body > </ html > |
textarea
여러줄의 텍스트 입력 할 때 사용한다.
문법
1 | < textarea name = "값의 이름" rows = "행의 수" cols = "열의 수" disabled = "disabled" readonly = "readonly" >값</ textarea > |
- rows : 입력한 행위 수 만큼 높이가 정해진다.
- cols : 입력한 열의 수 만큼 폭이 정해진다.
예제
example4.html (jsfiddle, github)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> < html > < head > < title >생활코딩</ title > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < form action = "url" method = "GET" > 내용 : < br /> < textarea rows = "5" cols = "20" ></ textarea > < br /> < input type = "submit" /> </ form > </ body > </ html > |