HTML5+CSS3]4-2 사용자 입력을 위한 <input>태그

https://www.youtube.com/user/easyspub

 

easyspub

⭐<input>: 아이디나 검색어를 입력하는 텍스트 상자나 로그인 버튼처럼 사용자가 입력할 부분은 <input>태그를 이용한다.

 

✔<input>태그 : 폼에서 사용자 입력을 받기 위해 사용하는 태그

 

✔<input>태그 입력 항목 만들기

👉기본형 : <input type="유형"[속성="속성 값"]>

 

👉id 속성 사용하기

여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성

<label>태그를 이용해 캡션을 붙일 수도 있고 나중에 배울 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있다.

id 속성 값은 최소한 한 개 이상의 문자여야 하고 공백이 있어서는 안된다.

 

👉<input>태그의 type 속성에서 사용 가능한 유형

<input> 태그에서 입력 형태를 지정할 때 type 속성을 사용

 

✔type="hidden" : 히든 필드 만들기

👉기본형 : <input type="hidden" name="이름" value="서버로 넘길 값">

👉화면상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송되는 요소

보통 사용자에게 굳이 보여 줄 필요가 없지만 관리자가 알아야 하는 것을 히든 필드로 입력한다.

 

✔type="text" : 텍스트 필드 만들기

👉기본형 : <input type="text" [속성="속성 값"]>

👉한 줄짜리 일반 텍스트를 입력하는 필드

주로 아이디나 이름, 주소등 텍스트를 입력할 때 사용

텍스트 필드에서 사용할 수 있는 속성

 

✔type="password" : 비밀번호 입력란 만들기

👉기본형 : <input type="password" [속성="속성 값"]>

👉비밀번호를 입력하는 입력란을 만든다.

사용자가 입력하는 내용이 화면에 표시되지 않고 '*'같은 문자로 표시된다.

value속성이 없다.

 

✔type="search" : 검색 상자 만들기

👉기본형 : <input type="search" [속성="속성 값"]

👉브라우저에서 검색 창에 검색어를 입력했을 때 오른쪽에 x표시가 되어 입력했던 검색어를 손쉽게 지울 수 있다.

 

✔type="url" : URL입력란 만들기

👉기본형 : <input type="url" [속성="속성 값"]>

👉웹 주소 필드는 공백이 없고 영문자와 마침표 슬래시로만 이루어져 있다.

반드시 "http://"로 시작하는 사이트 주소를 입력해야 한다.

 

✔type="email" : 메일 주소 입력란 만들기

👉기본형 : <input type="email" [속성="속성 값"]>

👉메일 주소를 입력해야 할 경우 이메일 필드를 사용한다.

사용자가 력한 내용이 메일 주소 형식에 맞는지 자동으로 체크해준다

 

✔type="tel" : 전화번호 입력란 만들기

👉기본형 : <input type="tel" [속성="속성 값"]>

👉전화번호는 지역마다 형식이 다르기 때문에 사용자가 입력한 값을 체크하지 않고 전화번호로 인식한다.

 

 

✔type="number" : 숫자 입력하기

👉기본형 : <input type="number" [속성="속성 값"]>

👉사용자가 입력한 내용을 숫자로 인식한다.

브라우저에 따라 스핀 박스가 표시되기도 한다.

 

✔type="range" : 슬라이드 막대로 숫자 지정하기

👉기본형 : <input type="range" [속성="속성 값"]>

👉슬라이드 막대를 움직여 숫자 값을 입력하게 한다.

 

type="number"필드와 type="range"필드에서 사용할 수 있는 속성

 

 

 

✔type="radio" : 라디오 버튼 , type="checkbox" : 체크박스 = 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼

👉라디오 버튼 : 한 개만 선택하도록 할 경우 사용한다.

기본형 : <input type="radio" [속성="속성 값"]>

👉체크박스 : 두개 이상 여러 가지를 선택해도 될 경우 사용한다.

기본형 : <input type="checkbox" [속성="속성 값"]>

 

👉라디오 버튼과 체크박스에서 사용할 수 있는 속성