<input> 타입, 속성 총정리

Ellie·2021년 12월 26일
htmlinput
0

TodayILearned

목록 보기
11/24

오늘은 웹사이트 제작시 많이 쓰이는 <input>의 요소들을 더 확실히 공부해보고자 한다. 그리고 그렇게 공부한 것을 바탕으로 '설문조사' 폼을 만들어보도록 하겠다.

1. <input>에 들어가기 앞서 <form>요소 알아보기

<form>요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

Name: Save 
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

2. <input>에 들어가기 앞서 <label>요소 알아보기

<label>요소는 <input>가 무엇에 대한 것인지 알 수 있게 라벨링해주는 요소.

<label>을 쓰면 좋은 점.

  1. 시각적으로도 그렇지만 프로그래밍 언어적인 측면에서도 이 라벨이 어떤 인풋과 연관이 있는지 알려 주기 때문에 스크린리더가 더 쉽게 이해할 수 있다.
  2. <label>을 클릭하면 내장되어 있는 click이벤트가 동작해 <input>이 활성화된다.

<input>과 <label>을 연관짓는 법

방법1.
<label for="name">, <input id="name">
label의 for 속성값과 input의 id값이 같아야한다.

방법2.
<label>안에 <input>을 중첩시킨다.

<label>
	<input type="text" name="name">
 </label>

이 경우 for속성이나 id속성이 필요 없다.

<label>사용시 주의점

<label>안에 <a>나 <button>와 같은 인터랙티브 요소를 배치하지 말 것. 그러면 라벨에 관련된 양식을 작성하기가 어렵다.
<label>내에 제목 요소를 배치하지 말 것.

3.<input>의 유형

1. 버튼 기능

1) 기본 버튼
버튼

<button>버튼</button>

2) 리셋 버튼

User ID:

<input type="reset"> 초기화버튼

  • Reset 버튼을 누르면 값을 초기화해주는 기능.

3) 체크박스

<input type="checkbox">

  • 체크하거나 선택해제할 수 있는 체크박스

4) 라디오 버튼

<input type="radio">

  • group 중 하나 이상을 선택해야 할 때 자주 사용한다.

5) 제출 버튼

Banana
Apple
Kiwi 
<section>
<div>
  <input type="radio" id="banana" name="fruits" value="banana">
  <label for="banana">Banana</label>
</div>

<div>
  <input type="radio" id="apple" name="fruits" value="apple">
  <label for="apple">Apple</label>
</div>

<div>
  <input type="radio" id="kiwi" name="fruits" value="kiwi">
  <label for="kiwi">Kiwi</label>
</div>
</section>
  • 추가 속성
    checked : 그룹 중 어느 하나가 디폴트 값으로 선택된다.
    value : radio타입에서의 value값은 다른 타입보다 좀더 특별한 목적을 갖고 있는데, 이 양식이 제출될 때 체크된 라디오 버튼의 value 만 보고된다

2. 날짜, 시간 관련 <input>창

1)

<input type="date">

2)

<input type="datetime-local">

3)

<input type="time">

4)
<input type="week">

5)

<input type="month">

3. 유효성 검사가 들어가는 <input>창

1) 이메일

<input type="email">
유효성 검증 매개변수가 존재해 이메일에 적합한 키보드를 보여줌. @이 꼭 들어가야함.

2) 패스워드

<input type="password">

  • 비밀번호 포맷에 맞는 인풋창.
  • maxlength, minlength로 비밀번호 최대 최소 자리를 설정 가능.

3) 숫자

<input type="number">
숫자타입만 입력가능, 입력창에 증가와 감소 화살표가 들어가 있다.

  • 입력창에 디폴트값을 설정할 수 있다.
    <input id="number" type="number" value="42">
  • 추가 속성 :
    max, min : 입력창 내 최대값과 최소값 설정
    list
    Choose a flavor:
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" 
       id="ice-cream-choice" 
       name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

4) 전화번호
Enter your phone number:
Format: 123-456-7890

  • pattern에 정규식 표현으로 패턴값을 적어준다.
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required> 
<small>Format: 123-456-7890</small>

5) url 주소 입력창
Enter an https:// URL:

  • pattern에 정규식 표현으로 패턴값을 적어준다.
<label for="url">Enter an https:// URL:</label>
<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>

4. 기타

1)

<input type="file">

  • 파일을 지정할 수 있는 컨트롤
  • 추가 속성 : accept/올려야 할 파일 형식에 대한 힌트를 알려줌

2) (사용자에겐 데이터가 보이지 않음)

<input type="hidden">

  • 데이터가 존재하고 전송되지만 사용자에게는 보이지 않는 상태 
// 포스트아이디 넘버 데이터를 같이 전송
<input type="hidden" id="postId" name="postId" value="34657">

3)

<input type="image">

  • 텍스트보다는 그래픽(사진)으로 submit 버튼을 만들 때 주로 사용한다. (위는 사진파일이 없어서 엑박으로 나오는 것!)
  • 추가 속성 : alt, src
  • 여기에다가 width와 height 속성을 적용할 수 있다.

4) Cowbell

<input type="range">

  • 추가 속성 : min, max, value value는 초기값으로 설정된다.
    list는 
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50" label="50%"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100" label="100%"></option>
</datalist>

5) Search the site: Search

  • type="text"과 동일하지만 user agent(브라우저)에 의해 스타일이 달라질 수 있다.
  • 추가 속성 : list, maxlength, minlength readonly, spellcheck

6)

<input type="color">

공통 속성

form | 폼 요소를 컨트롤
type | 폼 컨트롤의 타입
value | 컨트롤의 초기값
name | 폼 컨트롤의 이름
autocomplete | 자동완성, 불린값 아님.
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete
autofocus | 자동 포커스, 그러나 하나밖에 적용 안됨.
required(almost all) | 필수 입력
disabled | 입력 불가능
readonly(almost all) | 입력 불가능

  • disabled와 readonly의 차이
    둘다 읽기만 가능하고 변경은 불가능하지만 disabled은 form으로 값이 전송되지 않는 반면 readonly는 값이 전송된다.

list(almost all) | <datalist>
max, min, step(numeric types)

placeholder | password, search, tel, tex, url
size | email, password, tel, text, url | 사이즈 크기 조절
pattern | password, text, tel | 유효성이 매치되어야함

출처 :
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
요기서 공부했당. 뭔가 한번은 전체적으로 공부하고 정리하고 싶었다. 원래는 공부한 것을 바탕으로 설문조사 페이지도 같이 올리려고 했는데 너무 길어져서 이건 다음 포스트에...

profile
Ellie
정말로 아는 것인지 항상 의심하기
이전 포스트

JavaScript: input에 작성한 글을 다른 박스에 나타내기

다음 포스트

TIL # TypeScript [22.07.08]

0개의 댓글