input
input태그는 사용자의 정보를 입력받기 위해 사용하는 태그로
type속성값에 의해 모양과 기능이 결정된다.
input태그는 inline속성을 가지며, 박스형태의 type들은 inline-block속성을 가진다.[기본형]
<input type='기능' name='폼요소의 이름(label과 연결)' id="아이디명"/>input의 type속성값
1. type='hidden'
: 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할때
함께 전송되는 요소이다.
사용자가 알 필요는 없지만 관리자가 알아야하는내용이 있을 경우 사용한다.
2. type='text'★
: 가로로 짧은 글을 입력할때 사용하는 입력창. 아이디, 이름, 주소와 같은
내용을 입력받을때 사용한다.
'텍스트 필드'라고도 한다
3. type='password'★
: 텍스트필드와 모양은 같지만 사용자가 입력하면 특수문자로 나타난다.
단, 패스워드 필드가 비밀번호 양식이 맞는지 확인해주지 않는다.
단순히 글자를 특수기호로 바꾸는 역할만 한다.
4. type='search'
: 검색 필드를 만들때 사용한다. 예전에는 텍스트필드를 사용했지만 html5에서
필드들이 세분화되면서 검색어를 입력할때 search를 사용할 수 있게 되었다.
검색 키워드를 입력하면 키워드를 지울 수 있도록 x아이콘이 함께 표시된다.
5. type="url"
: 사용자로부터 웹 주소를 입력받을때 사용한다.
6. type="email"★
: 메일 주소를 입력할 경우 email필드를 사용하면 실제 폼 양식이
동작했을 때 이메일 양식에 맞게 작성되었는지 브라우저 자체에서체크한다.
7. type='tel'★
: 사용자가 입력한 정보를 일반 텍스트가 아닌 전화번호로 인식하며
바로 전화번호를 입력할 수 있도록 숫자 키패드를 보여준다.
pc화면에서는 일반 텍스트 필드 형태로 보이지만 모바일 환경에서는
숫자 키패드로 자동 전환되며 전화를 걸 수 있도록 해준다.
8. type="number" min='최솟값' max='최댓값' step='증감값' value='초기값' ★
: 숫자 생성 양식을 만들때 사용한다. min은 최솟값을 말하고 max는 최댓값을 말한다.
step은 증가하거나 감소하는 값으로 여기에 쓰인 숫자만큼 증가하거나 감소한다.
9. type='range' min='최솟값' max='최댓값' step='증감값' value='초기값'
: 슬라이드 막대를 움직여 값을 입력하는 창.
10. type='radio' name='폼요소이름' checked
: 라디오버튼은 짧은 항목에 대한 선택이 필요할 때 주로 활용되며
반드시 한 가지 항목만 선택해야 할 때 사용한다.
라디오 필드에서는 name값이 같아야만 같은 그룹으로 인식하여
한가지만 선택하게 만들 수 있다. checked속성을 사용하면 방문자의
편의를 위해 미리 항목에 체크된 상태를 보여줄 수 있다.
11. type="checkbox" checked ★
: 체크박스는 여러 항목을 다중선택할때 주로 사용한다.
라디오 버튼과 마찬가지로 checked속성을 이용하여 방문자의 편의 를 높일 수 있다.
12. type='color'
: 색상 선택 양식을 만든다.
선택 시 색상 선택 화면이 나타나고 색상을 선택할 수 있다.
13. type='date'★ | type='month' | type='week'
: 생년월일과 같이 년/월/일에 대한 정보를 달력을 통해 선택할 수 있다.
month는 월과 연도를 선택할 수 있고, week은 연도와 주를 선택할 수 있다.
14. type='time' | type='datetime' | type='datetime-local'★
: 시간을 지정할때 사용하는 type이다. 시간만 지정할 경우에는 time을 사용하고
날짜와 시간을 함께 지정할 경우 datetime, datetime-local을 사용한다.
15. type='submit' | type='reset'
: 사용자가 입력폼에 입력한 내용을 서버로 전송할때 type='submit'을 이용할 수 있다.
입력 내용을 초기화할때는 type='reset'을 이용한다.
둘 다 버튼형태로 출력된다.
버튼 이름을 바꾸고 싶을때에는 value속성을 이용한다.
16. type='file' accept='파일형식1, 파일형식2...' multiple ★
: 사용자가 가지고 있는 특정 이미지나 파일들을 첨부할때 사용한다.
만약 사용자가 첨부할 파일의 확장자를 제한하고 싶다면 accept
속성으로 파일을 제한 할 수 있고,
multiple속성을 사용하면 파일을 여러 개 첨부할 수 있다.
Hi