콘텐츠
input 태그
웹 사이트에서 값을 입력 하기 위한 상자를 만들 수 있는 태그는 input 태그 입니다. 오늘은 input 태그에 대해서 최대한 정리해 보려 합니다.
input 태그는 기본적으로 값을 입력하기 위한 요소를 만듭니다. 별다른 속성 없이 HTML 에 <input> 만 작성해 보았습니다. 그러면 테두리가 있는 박스 형태의 요소가 출력 됩니다.
<input>
이 박스 안엔 자유롭게 값을 입력할 수 있습니다.
label 태그 – input 과 함께 사용 ⭐
input 태그의 이름, 설명 등을 작성하는 label 태그를 사용 합니다. 사용법은 먼저 요소에 id 값을 주고 <label for=”id 값”></label> 형태로 작성 됩니다.
요소 옆에 텍스트를 입력해서 표시해도 되지만, checkbox, radio button 등의 요소는 label 을 사용할 경우 텍스트를 선택해도 요소가 함께 선택 됩니다.
<input id="textBox">
<label for="textBox">입력 상자</label>
input 태그 name 속성
작성 된 input 태그의 이름을 지정해 주는 속성입니다. 위에서 사용한 id 속성과 같이 요소를 식별하기 위해 사용 되지만 id 는 HTML 문서 내 한 요소만이 가지는 고유의 값이고 name 은 용도에 따라 여러 요소가 함께 가질 수 있습니다.
name 을 정해 두면 이후 태그, JavaScript 등에서 불러와 활용이 가능하며 폼 제출 시 name 속성 값이 키로 사용 됩니다.
<input name="textBox">input 태그 type 속성
input 태그엔 type 속성이 있습니다. input 태그로 작성된 요소는 텍스트를 입력할 수 있는 상자 외에도 체크박스, 라디오 버튼 등도 포함 됩니다. 이는 type 에 주어진 값에 의해 결정 됩니다.
type=”text” – 기본 ⭐
기본으로 설정 되어 있는 속성 입니다. 아무것도 입력하지 않았을 때 표시 되던 값 입력 상자가 바로 type=”text” 입니다.
<input type="text">type=”password”
위의 text 와 같이 값을 입력하는 상자가 출력 되지만 입력된 텍스트 가려집니다.
<input type="password">
type=”checkbox”
사용자가 선택/선택안함 을 입력할 수 있는 체크박스가 만들어 집니다.
<input type="checkbox">checkbox 체크 전
checkbox 체크 후
만약, 체크박스 요소가 기본적으로 체크 된 상태가 되게 하려면 checked 속성을 추가 하면 됩니다.
<input type="checkbox" checked>type=”radio”
여러 옵션 중 한 가지를 선택하게 만드는 동그란 버튼을 만드는 타입니다. radio 는 사용 시 여러 개의 radio 타입 요소를 하나의 그룹으로 묶어서 사용합니다.
같은 name 을 지니면 그룹화 되며 같은 이름을 지닌 요소 중 하나의 버튼만 선택할 수 있게 됩니다.
<input type="radio" id="male" name="gender" value="male"/>
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female"/>
<label for="female">여자</label>
checkbox 와 같이 기본적으로 선택 될 옵션을 checked 속성을 이용해 지정할 수 있습니다.
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label>
그 외에 여러 type
위에 언급한 기본적인 타입 외에도 다양한 input 태그의 타입이 존재 합니다.
- submit: 폼(form) 데이터를 서버로 제출하기 위한 버튼을 생성
- reset: 폼 내의 모든 입력 필드를 초기화하는 버튼을 생성
- button: 클릭할 수 있는 버튼을 생성하지만, submit이나 reset과 같은 기본 동작은 없습니다.
- email: 이메일 주소 입력을 위한 필드를 생성하며, 형식을 검증
- url: URL 입력을 위한 필드를 생성하며, 형식을 검증
- number: 숫자 입력 필드를 생성하며, 최소값(min), 최대값(max), 단계(step) 등을 지정
- range: 슬라이더 형태의 입력 필드를 생성하여 범위 내의 숫자를 선택
- date: 날짜를 선택할 수 있는 입력 필드를 생성
- datetime-local: 날짜와 시간을 선택할 수 있는 입력 필드를 생성
- month: 월과 연도를 선택할 수 있는 입력 필드를 생성
- week: 주와 연도를 선택할 수 있는 입력 필드를 생성
- time: 시간을 선택할 수 있는 입력 필드를 생성
- search: 검색어 입력을 위한 필드를 생성하며, 일부 브라우저에서는 입력 필드를 최적화 합니다.
- color: 색상을 선택할 수 있는 입력 필드를 생성
- file: 파일을 선택할 수 있는 입력 필드를 생성
input 태그 value 속성
input 태그에 값을 설정하는 속성입니다. JavaScript 등에서 읽을 때 해당 속성 내의 값이 읽혀 집니다. text 타입 에 사용하면 입력 상자 내 값이 작성되어 있습니다. checkbox 타입의 경우 체크 시 ‘x’ 의 값이 들어가게 됩니다.
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">남자</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여자</label>input 태그 placeholder 속성
placeholder 속성은 text 타입의 input 태그에 입력 될 내용의 힌트를 작성할 수 있습니다.
<input type="text" placeholder="이 칸엔 이름이 입력 됩니다.">
input 태그 readonly 속성
해당 태그에 입력이 비활성화 됩니다. 활용하면 text 상자에 값이 표시 되지만 수정이 불가능한 출력 용 상자로 만들 수 있습니다.
<input type="text" value="이 필드는 수정 불가능 합니다." readonly>
그 외에 속성
- required: 입력 필드가 필수임을 지정, 이 속성이 설정되면, 사용자는 폼을 제출하기 전에 해당 필드를 반드시 채워야 합니다.
- disabled: 사용자가 입력 필드를 사용할 수 없도록 합니다. 이 속성이 설정되면, 입력 필드는 폼과 함께 제출되지 않습니다.
- maxlength: 사용자가 입력할 수 있는 문자의 최대 개수를 지정합니다.
- min 및 max: type이 number, range, date 등일 때, 입력할 수 있는 최소값과 최대값을 지정합니다.
- step: type이 number, range, date 등인 입력 필드에서 사용자가 설정할 수 있는 값의 증가량을 지정합니다.
- pattern: 입력된 데이터가 일치해야 하는 정규 표현식을 지정한다. 이 속성은 입력 검증에 사용됩니다.
- autocomplete: 사용자가 이전에 입력한 값으로 필드를 자동 완성 되어 사용자가 폼을 더 빨리 작성할 수 있게 도와줍니다.
- autofocus: 페이지 로딩 시 이 입력 필드에 자동으로 포커스를 맞춥니다. 폼에 여러 입력 필드가 있을 때 하나의 필드에만 이 속성을 사용 합니다.
- size: 입력 필드의 가시적인 너비를 문자 단위로 지정합니다. 이는 주로 텍스트 필드의 크기를 조절하는 데 사용 됩니다.
