HTML <input text> 는 글 입력 속성입니다. value는 미리 보기 문자를 입력합니다. placeholder는 지울 필요없는 미리 보기 문자를 입력합니다. autofocus는 마우스 초점을 해당 태그에 위치시킵니다.
HTML input text
<input type = "text"> 속성은 글을 입력할 수 있는 창을 생성해줍니다.
<input> 태그에 type 속성과 text 속성명으로 구성됩니다. <input> 태그는 <table> 태그 처럼 <form> 태그 사이에 위치합니다.
<form>
<input type="text">
</form>input text 속성
<input type="text"> 뒤에 아래의 속성들이 추가될 수 있습니다. value(문자 미리 입력), placeholder(문자 미리 입력 : 자동 삭제), autofocus(자동 커서), size(입력 폼 가로 길이), maxlength(입력 폼 글자수 제한) 등의 예제를 살펴봅니다.
value : 미리 문자 입력
value 속성은 <input> 태그로 작성된 폼에 미리 문자를 입력해놓을 수 있습니다. value에 미리 입력된 값이 입력창에 먼저 표시됩니다.
<form>
<input type="text" value="지우고 입력하세요.">
</form>placeholder : 흐린 문자 미리 입력
placeholder 속성은 지울 필요 없는 문자를 입력할 수 있습니다. value 속성으로 입력된 문자는 사용자가 직접 지우고 입력해야 된다는 단점이 있습니다.
placeholder로 작성된 문자는 회색 글씨로 표기됩니다. 또한 입력된 문자를 지울필요 없이 새로운 데이터를 바로 입력할 수 있습니다.
<form>
<input type="text" placeholder="입력하세요.">
</form>autofocus : 자동 커서
autofocus는 폼 입력창에 마우스를 클릭하지 않아도 자동으로 커서가 작동되는 속성입니다. 보통 웹사이트를 보면 로그인 창에 마우스 클릭을 안해도 바로 로그인 창에 입력 커서가 깜빡이는 모습을 볼 수 있습니다.
<form>
<input type="text" autofocus>
</form>size : 입력폼 가로 길이
size 속성은 <input type = "text"> 창의 가로 길이를 조절합니다.
size 속성은 다른 태그에서는 모두 무시됩니다. 하지만 <input> 태그내에서 type="text", type="email", type="password", type="search", type="tel"에서는 사용될 수 있습니다.
기본 셋팅은 20 값이고 늘리거나 줄이면 폼의 크기가 조절됩니다.
<form>
<input type = "text" size = "20">
</form>폼에 들어가는 글자수는 제한이 없습니다. 그래서 size로 지정한 폼의 가로 크기 이상으로 글을 적어도 문자는 계속 입력됩니다.
maxlength : 글자 개수 제한
maxlength 속성은 폼에 들어가는 글자수를 제한합니다.
<form>
<input type = "text" maxlength = "20">
</form>영문 알파벳과 숫자는 maxlength 값과 일치합니다. 한글의 경우 자음이나 모음 개수가 아닌 한 칸의 단어를 1개로 지정됩니다.