INPUT Element

Input element는 Form 관련 element 중에서 가장 많이 사용되는 Element로서 text 입력란, Radio button, Check box 등을 만드는 Element로서 Form 양식의 대 부분을 차지하는 만큼 자주 사용합니다. Input Element가 가지고 있는 속성(Attribute)부터 알아 보겠습니다.

legend : optional, forbidden, empty, deprecated, loose dtd, frameset dtd  [표 보는 방법]

element	start tag	end tag	empty	deprecated	dtd
INPUT		F	E
TEXTAREA

Input Element
name	Scripting 할 때 호출할 이름입니다. 가장 중요하므로 먼저 넣었습니다. 자세한 내용은 뒤 에서 다루므로 생략합니다.
type	type attribute는 한 마디로 입력 양식에서 어떤 역할을 하는 입력 형식인가를 지정하는 attirbute 라고 할 수 있습니다. text Default. text를 입력 받을 경우에 사용합니다. Default 값이므로 type을 지정하지 않으면 text type이 되고, 아래의 source code 처럼 value 속성을 사용하면 value 값이 출력되어 나옵니다. Source code <form> <input /> <input type="text" value="입력해 주세요." /> </form> password password 와 같이 다른 사람이 내용을 보아서 안될 때 모든 문자를 asterisk(*)형태로 나타냅니다.  pw : Source code <form> pw : <input type="password" /> </form> checkbox 여러 개의 항목 중에서 1개 이상을 선택하게 할 때 나타나는 4각형 box 로서 클릭하면 check 표시나 나타납니다. 아래의 Source code와 같이 name 속성 값이 같은 것 끼리 그룹이 됩니다. 또 checked="ckecked" 와 같이 checked 속성을 사용하면 그 항목이 미리 ckeck 되어 나옵니다. checkbox의 경우 여러개의 input element에 사용할 수 있습니다. 할 줄 아는 Web language를 선택하세요. HTML PHP ASP Source code <form> 할 줄 아는 Web language를 선택하세요.<br /> <input type="checkbox" name="web" value="HTML" checked="checked" />HTML <input type="checkbox" name="web" value="PHP" checked="checked" />PHP <input type="checkbox" name="web" value="ASP" />ASP </form> radio 여러 개의 항목 중에서 1개 만을 선택하게 할 때 사용되는 원형 음각 모양으로 설문조사 등에 주로 사용되는 type 입니다. 위의 checkbox와 마찬 가지로 name 속성값이 같은 것 끼리 그룹이 되기 때문에 선택이 다른 그룹에 서로 영향을 주지 않습니다. checked="ckecked" 와 같이 checked 속성을 사용하면 그 항목이 미리 check 되어 나오지만 radio type의 경우 여러개를 선택할 수 없으므로 아래와 같이 끝에 사용된 input element가 check 됩니다. 이 사이트에 있는 강좌가 맘에 드시는지요? 아이~ 저아라 난 물러유~ 아핫~따 꼬지구마이~ "결혼해 주세요"를 경상도 말로 하면? 임마 이거 비싸다. 내는 싸다~ 내 아~를 낳도~ Source code <form> 이 사이트에 있는 강좌가 맘에 드시는지요?<br /> <input type="radio" name="eval" checked="checked" />아이~ 저아라 <input type="radio" name="eval" />난 물러유~ <input type="radio" name="eval" />아핫~따 꼬지구마이~ <br /><br /> "결혼해 주세요"를 경상도 말로 하면?<br /> <input type="radio" name="marry" checked="checked" />임마 이거 비싸다. <input type="radio" name="marry" />내는 싸다~ <input type="radio" name="marry" checked="checked" />내 아~를 낳도~ </form> submit Form에 입력된 Data를 전송하는 Button을 만듭니다. Source code <form> <input type="submit" /> <input type="submit" value="보내라!" /> </form> reset 입력란에 입력한 모든 내용을 지우고 다시 입력하게 하는 Button을 만듭니다. Source code <form> <input type="reset" /> <input type="reset" value="다시 할란다..." /> </form> file Upload할 file을 선택하기 위해 찾아보기 Button을 만듭니다. 이 경우 아래의 Source code에서 처럼 accept 속성을 사용하여 Upload할 file의 형식을 지정합니다. Source code <form> <input type="file" accept="multipart/form-data" /> </form> hidden 보이기 않게 값을 받을 경우에 사용합니다. 주로 입력 양식의 전송을 실패 했을 때 처음부터 다시 입력하지 않도록 입력 값을 받아 놓았다가 복귀시켜 주기 위해 사용합니다. (보이지 않으므로 Source code만 있음.) Source code <form> <input type="hidden" /> </form> image Button 대신 image를 넣고 싶을 때 사용하며 기능은 submit과 동일합니다. 아래의 Source code 를 보면 알겠지만 Img Element에서 처럼 src 를 사용하여 image의 uri를 지정해 줍니다. Source code <form> <input type="image" src="image file의 uri" /> </form> button Button을 만들 때 사용합니다. 아래의 Source code에서 value에 입력한 값이 단추 이름이 됩니다. Source code <form> <input type="button" value="Push me" /> </form>
disabled	disabled 속성은 단추 처럼 비활성화(inactive)된 상태를 지정하는 속성인데, 하나의 예를 들자면 아래와 같이 어떤 내용에 동의할 것인지 아닌지의 여부를 선택해야 비로소 활성화(active)되는 상태를 만들어 주는 속성입니다. 아마도 많이 겪어 본 경험 들이 있으시져? 위의 9가지 input type에 다 적용 시킬 수 있지만 hidden 에는 써도 무의미 하겠죠? 기껏 감춰놓고 못 쓰게 한다고 누가 알기나 하겠습니까... Source code 는 name 속성의 scripting 과 함게 Form Event에서 설명하겠습니다. 이 약관에 항복 하시겠습니까? 항복  저항
size	text type의 입력란의 가로 길이를 지정합니다. 기본 값은 style로 font size를 지정하지 않았을 경우 소문자 'x' 20(150px정도)글자가 들어 갑니다.
maxlength	text type의 입력란에 입력 하는 글자 수를 제한 합니다. 좋은 예로 주민등록번호 앞에 6자리와 뒤의 7자리는 변하지 않으므로 아래와 같이 제한을 두면 지정한 수 이상으로 입력이 제한 됩니다. 주민등록번호 : - Source code <form> 주민등록번호 : <input maxlength="6" /> - <input maxlength="7" /> </form>
accept	<input type="file" /> 일 경우 Upload 되는 파일의 Media 형식을 지정합니다. "text/html", "image/png", "image/gif", "video/mpeg", "audio/basic", "text/tcl", "text/javascript", "text/vbscript" 등이 있습니다. 예) <input type="file" accept="image/gif" />
value	checkbox, radio, file, hidden, image type을 제외한 나머지 input type에 사용하면 value 값이 출력되어 나옵니다. 특히 type이 submit이나 reset일 경우 value를 사용하지 않으면 submit은 "쿼리 전송", reset은 "원래대로"가 기본값이 됩니다.
readonly	이 속성은 text type input이나 textarea에 입력한 문자열을 말 그대로 볼 수만 있게 하는 속성입니다. 이런 속성이 필요한 이유는 예를 들어 회원가입을 하고 회원이 자기의 정보를 변경할 경우 개인 정보가 창이 나타나는데, 이 때 ID 같이 바꾸면 안되는 항목을 변경할 수 없게 할 필요가 있을 경우 사용합니다. 즉, 선택은 되어도 고칠 수는 없습니다. 그래서 이런 경우 오른 쪽과 같이 배경색이나 글자색을 다르게 주어 구분해 주져. 얼마나 아름다운 배려입니까...      Source code <form> <input type="text" value="Kerrigan" readonly="readonly" /> <input type="text" value="Kerrigan" readonly="readonly" style="background-color:#dcdcdc;" /> <input type="text" value="Kerrigan" readonly="readonly" style="color:#941919;" </form>
공통 속성	dir, id, class, style, title, 발생하는 Event는 공통 속성표 를 참조

Textarea Element는 input text type과 같이 문자열을 입력받는 입력란을 만드는 것은 같지만 input 과 달리 많은 양의 문자열을 입력 받습니다.

Textarea Element
name	Scripting 할 때 호출할 이름입니다. 역시 자세한 내용은 뒷 페이지에서 다루므로 생략합니다.
cols	1 행당 입력할 수 있는 글자 수를 지정합니다. 역시 영문 소문자 'x' 의 갯수가 기준입니다.
rows	입력할 수 있는 행 수를 지정합니다. 만약 stylesheet를 사용하여 font size를 지정하였다면 Pixel size는 각각 달라집니다.
disabled	INPUT Element 참조.

사용 예

위의 사용 예는 rows와 cols로 크기를 지정한 예 이지만 만약 정확한 크기를 만들고 싶다면 역시 Style Sheet 밖에 없겠군요. 아래는 Style sheet로 width와 height를 지정하여 크기를 지정한 예제입니다.
CSS 로 크기 지정