[Web/HTML] HTML- <input> 태그

✏️ <input> 태그

사용자가 입력한 정보(회원가입 시, 로그인 시 등등)를 받을 때 사용하는 태그

다양한 속성을 가지고 있음

 

✏️ 텍스트와 비밀번호를 나타내는 type="text",  type = "password" 속성

텍스트 필드는 폼에서 가장 많이 사용하는 요소로, 주로 아이디나 이름 주소 등 한줄짜리 텍스트에 사용

비밀번호 필드는 입력하는 내용을 화면에 보여 주지 않아야 하므로 ●나 *사용

<input type="text">
<input type="password">

// text필드와 password필드에서 사용하는 주요 속성들
// size : 텍스트와 비밀번호 필드의 길이를 지정, 즉 화면에 몇 글자만 보이게 할 것인지 지정하고 만약 입력할 수 있는 최대 사이즈가 10인데 size를 5로 지정하면 5글자만 화면에 보이고 나머지 5글자는 화면에 보이지 않음
// value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용, 이 속성을 사용하지 않으면 빈 텍스트 필드가 보여짐, 비밀번호 필드에는 사용하지 않는 속성
// maxlength : 텍스트와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정

✏️ type="url",  type="email",  type="search",  type="tel" 속성

<input type="url">
<input type="email">
<input type="search">
<input type="tel">

// type="url" : 웹 주소를 입력하는 필드
// type="email" : 이메일 주소를 입력하는 필드, 예전에는 이메일과 웹 주소를 구문하기 위해서 JS를 사용했지만 HTML5부터는 구분 가능
// type="search" : 웹 브라우저에서 검색을 위한 텍스트 필드 인식, 검색어를 입력하게 되면 오른쪽에 X표시되어 손쉽게 검색어를 삭제 가능
// type="tel" : 전화번호를 나타내는 필드, 모바일 페이지에서 이 값을 이용하여 바로 전화를 걸 수 있음

✏️ type="checkbox",  type="radio"

체크 박스와 라디오 버튼은 원하는 항목을 선택할 때 사용하는 폼 요소

항목을 1개만 선택할 경우에는 radio버튼을, 항목을 여러 개 선택할 때는 checkbox버튼을 사용

<input type="checkbox">
<input type="radio">
<input type="radio" name="gift" value="s_5">

// checkbox와 radio에서 사용하는 주요 속성들
// value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정, 이 값은 영문이거나 숫자이고 필수
// checkd : 체크박스나 라디오 버튼을 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용. 속성값은 따로 존재하지 않음
// 라디오 버튼의 name속성은 php와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용. 라디오 버튼에서 하나의 버트만 선택할 수 있게 하려면 라디오의 name을 모두 같게 해줘야 함

✏️ type="number",  type="range"

텍스트 필드에서 사용자가 숫자를 선택할 수 있게 하는 속성들로

사용자가 숫자를 직접 선택할 수 있게 할 때는 number 속성을

사용자가 슬라이드로 숫자를 정할 수 있게 할 때는 range속성을 사용

<input type="number">
<input type="range">
<input type="number" min="1" max="10" value="1" step="3">

// number과 range에서 사용하는 주요 속성들
// min : 필드에 입력할 수 있는 최솟값을 지정, 기본 최솟값은 0
// max : 필드에 입력할 수 있는 최댓값을 지정, 기본 최댓값은 100
// step : 숫자 간격을 지정, 기본 간격은 1
// value : 필드에 표시할 초깃값

✏️ type="date",  type="month",  type="week"

웹 문서나 애플리캐이션에 달력을 넣을 때 사용하는 속성들

<input type="date">
<input type="month">
<input type="week">

// date : 달력에서 날짜를 선택해서 입력 가능, 날짜는 yyyy-mm-dd 형식으로 연, 월, 일이 표시됨
// month : 달력에서 월을 선택해서 입력 가능,  yyyy-mm 형식으로 월이 표시됨
// week : 달력에서 주를 선택해서 입력 가능, 1월 첫째주를 기준으로 몇 번째 주인지 표시됨

✏️ type="time",   type="datetime",  type="datetime-local"

시간을 지정할 때는 time을, 날짜와 시간을 함께 지정할때는 datetime이나 datetime-local을 사용

<input type="time">
<input type="datetime">
<input type="datetime-local">

// time : 폼에서 시간을 입력하도록 함, 항목은 총 3개고 오전/오후 시와 분
// datetime : 국제표준시를 기준으로 연/월/일/시/분/초/분할 초를 넣을 수 있음
// datetime-local : datetime과 동일하나 사용자가 있는 지역을 기준으로 입력 가능

// 날짜와 시간의 범위를 지정하는 속성
// min : 날짜나 시간의 범위를 제한할 때 사용, 시작 날짜나 시간을 지정
// max : 날짜나 시간의 범위를 제한할 때 사용, 마지막 날짜를 지정
// step : 스핀 박스의 화살표를 클릭했을 때 증감시킬 크기를 지정
// value : 기본적으로 표시할 날짜나 시간을 지정

✏️ type="submit",  type="reset"

<input type="submit">
<input type="reset">

// submit은 입력한 정보를 서버로 전송하고, reset은 <input>에 입력한 내용을 모두 삭제

✏️ type="image"

<input type="image" src="이미지 경로" alt="대체 텍스트">

// submit과 같은 기능을 하는 이미지 버튼을 나타냄

✏️ type="button"

<input type="button" value="버튼에 표시할 내용">

// submit이나 reset같은 기능이 없고 오직 버튼 형태만 삽입.
// 주로 JS를 실행할 때 사용하며 value 속성을 사용해 버튼에 표시할 내용을 지정

✏️ type="file"

<input type="file">

// 폼에서 문서나 사진을 첨부해야 할 때 사용하는 속성

✏️ type="hidden"

<input type="hidden" name="이름" value="서버로 넘길 값">
// 히든 필드를 만드는 속성으로, 히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송하는 요소. 사용자에게 굳이 보여줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력