<input type=""/>

Input

 

 

 

▶ 사용자로부터 정보나 데이터를 받는 필드(입력창)를 생성하는 가장 기본적인 태그이다.

 

 

▶ type="" 이라는 속성을 반드시 넣어줘야 하며 속성값은 여러가지있다.

 

 

 

★ 종류

 

 

① type="text" : 텍스트 형태의 정보를 받는 인풋창이 생성된다.

 

<!-- placeholder = 텍스트 입력창에 안내메세지를 보여준다.  -->
<form action="#" method="get">
    <input type="text" placeholder="아이디를 입력하세요"/>
</form>

<!-- maxlength = 최대 글자수 설정  -->
<!-- minlength = 최소 글자수 설정  -->
<form action="#" method="get">
    <input type="text" minlength="5" maxlength="13"/>
</form>

<!-- required = 사용한다면 필수로 정보를 기입해야 하는 인풋창으로 바뀐다 -->
<form action="#" method="get">
    <input type="text" required/>
</form>

<!-- disabled = 사용하게 되면 인풋창에 어떠한 것도 기입할수 없게 된다. -->
<form action="#" method="get">
    <input type="text" disabled/>
</form>

<!-- value = 이 안에 정보는 기본정보가 되어 자동으로 인풋창에 입력되게 된다.-->
<form action="#" method="get">
    <input type="text" value="ksh021"/>
</form>

 

 

② type="email" : 이메일 형태의 정보만을 받는 인풋창이 생성된다.

 

<!-- text값과 큰 차이는 없으나, '@'가 없으면 입력이 불가능하다.'  -->
<form action="#" method="get">
    <input type="email" placeholder="이메일을 입력해주세요"/>
</form>

 

 

③ type="password" : 비밀번호 형태의 정보를 받는 인풋창이 생성된다.

 

<form action="#" method="get">
    <input type="password" placeholder="비밀번호를 입력해주세요(최소 8자, 최대 15자 이하)" minlength="8" maxlength="15"/>
</form>

 

 

④ type="url" : URL 형태의 정보만을 받는 인풋창이 생성된다.

 

<form action="#" method="get">
    <input type="url" placeholder="사이트 경로를 입력해주세요"/>
</form>

 

 

⑤ type="number" : 숫자 형태의 정보만을 받는 인풋창이 생성된다.

 

<!-- 오직 숫자형태의 정보만 받을 수 있다. 문자형태의 정보는 입력이 불가능하다. -->
<form action="#" method="get">
    <input type="number" placeholder="나이를 입력하세요"/>
</form>

<!-- min, max = 입력할 수 있는 숫자의 최소값과 최대값을 정한다. -->
<form action="#" method="get">
    <input type="number" max="60" min="10" placeholder="나이를 입력하세요 (10세 이상, 60세 이하)"/>
</form>

 

 

⑥ type="file" : 파일 형태의 정보만을 받는 인풋창이 생성된다.

 

<!-- accept = 첨부 가능한 확장자를 적어주면, 입력된 확장자의 파일만 첨부 가능하다. -->
<!-- multiple = 다수의 파일을 한꺼번에 선택 가능하게 만들어 준다. -->
<form action="#" method="get">
    <input type="file" accept=".png, .jpg" multiple />
</form>