텍스트 필드
사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea> 를 이용한다.
문법
<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly" />
- type : text를 사용해야 텍스트 필드가 된다.
- name : 입력한 데이터의 이름
- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다.
- disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다.
- readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다.
예제
example1.html (jsfiddle, github)
<!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)
<!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)
<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
여러줄의 텍스트 입력 할 때 사용한다.
문법
<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>
- rows : 입력한 행위 수 만큼 높이가 정해진다.
- cols : 입력한 열의 수 만큼 폭이 정해진다.
예제
example4.html (jsfiddle, github)
<!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>
