[HTML] 6. input의 태그들

1) input 태그

• <input type="checkbox">는 name이 같아도 값을 각각 전송한다.

<select>
	<option> 1 </option>
	<option> 2 </option>
	<option> 3 </option>
</select>

• 위의 코드는 1,2,3을 선택할 수 있게 한다.

• 체크박스, 라디오는 값이 입력 안되면 전송되지 않는다.

• <select multiple>은 다중선택을 할 수 있다.

• name은 form 태그 안의 태그에서만 쓴다.

• value="1"과 같은 식으로 식별자를 부여할 수 있다.

2) input 엘리먼트의 새로운 속성

• 아래의 태그들은 브라우저마다 모양이 다르다.

  1) input="date"

  2) input="range"

  3) input="color"

• 새로 추가된 태그들

<meter min="0" max="100" value="20"> 50%</meter>

<progress max="100" value="50">

50%

<input type="button" value="click"> → 단일태그 스스로가 버튼

<button> click </button> → 버튼 안에 다양한 모양을 포함시킬 수 있음.

click

• 둘은 태생이 다르다.

3) input의 사용자 입력을 도와주는 속성

• input placeholder → 입력 전의 안내문구 쓸 수 있다. ex) 아이디를 입력하세요

• input autofocus → 자동으로 입력란으로 이동한다. (바로 키보드로 입력)

• input autocomplete → 전에 입력했던 내용을 자동으로 완성한다. (on,off로 조정)

• input list →

<datalist>
	<option value="강아지">
	<option value="고양이">
	<option value="거북이">
</datalist>

셋 중 하나를 선택할 수 있게 해준다.

4) HTML5 유효성 검사를 위한 새로운 속성

• input에 required를 입력하면 해당 란이 빈칸일 시 값을 전달하지 않는다.

• 범위 값 유효성 검사

  input pattern="" 안에 정규식을 쓴다.

  ex)

  input pattern="010-[0123456789][0-9]\d[]-[][][][]"

  input pattern="010-\d{4}-\d{4}"