HTML 쉽게 배우기 | 입력창 <input>

안녕하세요

 

오늘은 <input>에 대해서 알아볼게요

 

<input>은 셀프 클로징 요소로 닫힘 태그가 없습니다

<input>은 긴 네모 박스 모양으로, 사용자가 정보를 입력할 수 있는 요소입니다

 

<input>은 여러 가지의 용도로 사용할 수 있습니다

예상외로 우리는 <input>을 정말 많이, 그리고 자주 사용합니다

 

로그인할 때, 댓글 쓸 때, 날짜를 고를 때, 등등

 

 

"내가 본 로그인은 박스 모양이 아니던데?"

 

<input>은 다른 요소들에 비해서 개발자들이 스타일을 제일 많이 바꾸는 요소중 하나입니다

<input>의 기본 스타일은 네모난 박스 모양인데, 이 스타일을 바꿔서 우리가 자주 보는 예쁜 모양으로 변합니다

 

 

그럼 <input>의 기본 코드를 볼게요

<input type="text">

<input>을 사용할 때 필수 속성은 type 하나입니다

이 type에 따라서 추가되는 속성이 달라집니다

 

<input>의 type은 여러 개가 있는데, 그중 몇 개만 알아볼게요

 

type="text"

텍스트를 입력할 수 있습니다

 

 

type="number"

숫자를 입력할 수 있습니다

이 type의 <input>은 오른쪽에 위/아래 화살표가 있습니다

이 화살표를 사용해서 숫자를 입력할 수 있습니다

(키보드로도 입력할수 있습니다)

이 type은 다른 텍스트는 입력이 불가합니다

오직 숫자만 입력 가능합니다

여기에 추가로 min, max, step 속성 중 필요한 걸 추가해서 사용할 수 있습니다

 

min은 최솟값으로 min="0" 이면 화살표를 사용할 때 0 밑으로는 내려가지 않습니다

(키보드 입력은 제한이 없습니다)

 

max는 최고값으로 max="100" 이면 화살표를 사용할때 100 이상으로는 올라가지 않습니다

(키보드 입력은 제한이 없습니다)

 

step은 화살표를 사용할때 숫자가 step의 값만큼 변합니다

step="2"면 숫자가 2, 4, 6, 8, 10... 또는 4, 2, 0, -2, -4... 이런 식으로 2의 배수로 바뀝니다

 

 

type="date"

날짜를 입력할 수 있습니다

날짜 입력방법은 직접 입력하거나 HTML의 기본 달력 UI를 사용해서 입력할수 있습니다

HTML 기본 달력 UI

min, max에 날짜 값을 제공하면 달력에서 최소 날짜와 최고 날짜 사이의 날짜들만 선택할 수 있습니다

 

 

type="email"

이메일 주소를 입력하고, 입력된 이메일 주소를 확인할 수 있습니다

이 <input>만 사용 시 이메일 확인은 적용되지 않습니다

<form> 안에서 사용됐을 시에만 이메일 확인이 적용됩니다

type="email"사용시 입력된 이메일 주소가 틀렸을때 에러 메시지

<form>이 서버로 제출되기 전 HTML의 기본 검사 절차에서 이메일 주소가 검사 되고,

그때 입력된 이메일 주소가 잘못된 형식일 때 에러 메시지가 표시됩니다

 

 

type="password"

비밀번호를 입력할 수 있습니다

이 type을 사용하면 입력된 내용이 점으로 표시돼서 내용을 볼 수 없습니다

type="password"

온라인 보안 기능 중 제일 쉽게 구현할 수 있는 기능입니다

 

 

 

 

오늘은 <input>과 <input>의 여러 타입 중 몇 가지를 알아봤습니다

<input>은 따로 사용되기도 하지만 주로 <form>과 같이 사용됩니다

 

<form>은 어떤 양식을 만들 때 사용하는 요소입니다

로그인 페이지에도 <form>이 사용되죠

 

다음에는 <form>에 대해서 알아보면서 다른 <input> 타입들도 같이 알아볼게요

 

 

오늘도 수고하셨습니다

 

 

끝!