목차
2. <input>의 유형들
( text, button, checkbox, color, date, datetime-local, month, email, file, imge, number,
password, radio, range, search, submit, tel, url )
3. <input>의 속성들
<input>
<input>은 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재하는데, 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다.
<input>의 유형들
<input> 요소의 동작 방식은 type 특성에 따라 현격히 달라진다. 특성을 지정하지 않은 경우, 기본값은 text이다.
<text>
디폴트 값. 한줄의 텍스트 필드이다. 새줄 문자는 입력값으로부터 자동으로 제거된다.
<label for="name">이름을 입력하세요!</label>
<input type="text" id="name" name="name" required
minlength="2" maxlength="5" size="10">
<button>
button 유형의 <input> 요소는 단순한 푸시 버튼으로 렌더링된다. 이벤트(주로 click 이벤트)를 넣으면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있다. value는 버튼에 적히는 문구이다. value를 지정하지 않으면 빈버튼이 생성된다.
value를 지정하지 않을 경우 → 빈 버튼 생성됨
<input type="button">
value를 지정할 경우 → value 값이 적힌 버튼이 생성됨
<input type="button" value="클릭하세요">
<input type="button">은 <input type="submit">(양식제출)과 <input type="reset">(초기화)과 달리 아무런 기본 기능을 가지지 않기에 버튼이 뭐라도 하게 만들려면 JS코드를 작성해야한다.
<checkbox>
<input type="checkbox">유형에서의 value 특성은 특별한 용도로 사용된다. 폼이 제출될 때 현재 활성화되어 있는 체크박스만이 서버 측에 전달된다. 즉, value 특성에 지정된 값이 바로 전달되는 값이 된다.
만약 value 특성의 값이 지정되어 있지 않다면, 서버 측에는 기본 값으로 on이 전달된다. (제출된 데이터는 subscribe=on이 된다.)
아래의 예제에서는 name 특성은 subscribe로, value 특성은 newsletter으로 지정된다. 따라서 폼이 제출되면 전달될 name/value 쌍의 데이터는 subscribe=newsletter와 같이 표현된다.
<fieldset>
<legend>구독 할 항목을 선택하세요!</legend>
<div>
<input
type="checkbox"
id="subscribeNews"
name="subscribe"
value="newsletter" />
<label for="subscribeNews">뉴스레터</label>
</div>
<div>
<input
type="checkbox"
id="subscribeInstagram"
name="subscribe"
value="Instagram" />
<label for="subscribeInstagram">인스타그램</label>
</div>
<div>
<input
type="checkbox"
id="subscribeFacebook"
name="subscribe"
value="Facebook" />
<label for="subscribeFacebook">페이스북</label>
</div>
<div>
<button type="submit ">구독하기</button>
</div>
</fieldset>
<color>
색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어준다.
<p>가장 좋아하는 색을 골라보세요!</p>
<div>
<input type="color" id="color" name="color"
value="#f6c4ff">
<label for="color">Color</label>
</div>
가장 좋아하는 색을 골라보세요!
<date>
날짜(연월일, 시간 없음)를 지정할 수 있다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어준다.
<label for="start">2023년 당신의 생일은 언제인가요?</label>
<input type="date" id="bday" name="bday"
value="2023-01-01"
min="2023-01-01" max="2023-12-31">
<datetime-local>
날짜와 시간을 지정할 수 있다. 시간대는 지정할 수 없다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어준다.
<label for="meeting-time">약속시간 언제로 할까?</label>
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2023-04-15T19:30"
min="2023-04-15T00:00" max="2023-04-16T00:00">
<month>
연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다.
<label for="start">몇 월 달에 시작하나요?</label>
<input type="month" id="start" name="start"
min="2023-01" value="2023-12">
<email>
이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여준다.
<label for="email">globex.com email을 입력하세요!</label>
<input type="email" id="email"
pattern=".+@globex\.com" size="30" required>
<file>
파일을 지정할 수 있는 컨트롤. 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있고, accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있다.
<label for="avatar">프로필 사진을 골라보세요!</label>
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
<image>
src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여준다.
<p>로그인 하세요!</p>
<div>
<label for="userId">아이디</label>
<input type="text" id="userId" name="userId">
</div>
<input type="image" id="image" alt="Login"
src="">
로그인 하세요!
<number>
숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가한다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시한다.
<label for="tentacles">생일 초의 개수를 몇개로 할까요?</label>
<input type="number" id="candles" name="candles"
min="1" max="100">
<password>
값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고한다.
<div>
<label for="username">아이디:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="pass">비밀번호 (8자 이상):</label>
<input type="password" id="pass" name="password"
minlength="8" required>
</div>
<input type="submit" value="로그인">
<radio>
같은 name값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼이다.
<fieldset><legend>당신의 혈액형은 무엇입니까?</legend>
<div><input id="A형" name="blood-type" type="radio" value="A형" checked /><label for="A형">A형</label></div>
<div><input id="B형" name="blood-type" type="radio" value="B형" /> <label for="B형">B형</label></div>
<div><input id="AB형" name="blood-type" type="radio" value="AB형" /> <label for="AB형">AB형</label></div>
<div><input id="O형" name="blood-type" type="radio" value="O형" /> <label for="O형">O형</label></div>
</fieldset>
<range>
값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시한다. 접속사 min와 max사이에 사용되며 수용가능한 값의 범위를 정의한다.
<p>오디오 볼륨 조절</p>
<div>
<label for="volume">볼륨을 조절해보세요!</label>
<input type="range" id="volume" name="volume"
min="0" max="11">
</div>
오디오 볼륨 조절
<search>
검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거된다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함된다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시한다.
<label for="site-search">사이트 검색하기</label>
<input type="search" id="site-search" name="q">
<button>검색</button>
<submit>
양식을 전송하는 버튼
<input type="submit" value="제출하기">
<tel>
전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다
<label for="phone">핸드폰 번호를 입력하세요!</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
required placeholder="010-1234-5678" >
<url>
URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있다.
<label for="url">주소를 입력하세요!</label>
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*" size="30"
required>
<input>의 속성들
- accept: 파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시 (image)
- alt: 이미지 유형에 대한 대체 속성. 접근성 측면에서 필요 (image)
- autocomplete: 양식 자동생성 기능 (form autofill) 암시 (all)
- autofocus: 페이지가 로딩될때 양식 제어에 오토포커스 (all)
- capture: 파일 업로드 제어에서 input 방식에서 미디어 capture (file)
- checked: 커맨드나 컨트롤이 체크 되었는지의 여부 (radio, checkbox)
- dirname: 양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name (text, search)
- disabled: 양식 컨트롤이 비활성화되었는지의 여부 (all)
- form: 컨트롤을 양식 요소와 연결 (all)
- formaction: 양식 전송시 URL 사용하기 (image, submit)
- formenctype: 양식의 데이터 인코딩 유형이 양식 전송시 사용될 것 (image, submit)
- formmethod: 양식 전송시 HTTP 방식을 사용 (image, submit)
- formnovalidate: 양식 전송시 양식 컨트롤 확인을 무시하기 (image, submit)
- formtarget: 양식 전송시 브라우징 맥락 (image, submit)
- height: 이미지 높이에서 height 속성과 같음 (image)
- list: datalist 자동입력 옵션의 id 속성값 (almost all)
- max: 최댓값 (numeric types)
- maxlength: value의 최대 길이 (문자수) (password, search, tel, text, url)
- min: 최솟값 (numeric types)
- minlength: value의 최소 길이 (문자수) (password, search, tel, text, url)
- multiple: 불리언값. 여러 값을 허용할지의 여부 (email, file)
- name: input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다 (all)
- pattern: value 가 유효하기 위해 일치해야 하는 패턴 (password, text, tel)
- placeholder: 양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용 (password, search, tel, text, url)
- readonly: 불리언값. 이 값은 수정이 불가능함 (almost all)
- required: 불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값 (almost all)
- size: 컨트롤의 크기 (email, password, tel, text)
- src: 이미지 출처의 주소에서 src 와 같은 속성 (image)
- step: 유효한 증분적인 (Incremental)값 (numeric types)
- type: input 양식 컨트롤의 유형 (all)
- value: 양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다 (all)
- width: 이미지의 width 속성과 같다 (image)
'Languages > HTML5' 카테고리의 다른 글
| [HTML] Tag element 총정리 (태그 종류 및 설명) (1) | 2023.04.27 |
|---|
