[HTML - 10] 입력 받기

input 태그

• 단일 태그

<input type='데이터 유형'>
데이터 유형 미입력시 Text

• 데이터 유형
  • text, email, password, search, date, file 등 목적에 따라 데이터 유형을 다르게 한다.
  • 수치를 입력받는 타입 : color(팔레트), number(스피너), range
  • checkbox
• placeholder속성으로 입력부 안쪽에 글씨를 표시할 수 있음

Label 태그

입력요소에 라벨을 붙이는 역할을 한다. 이를 이용하면 사용자에게 좀 더 직관적인 입력 요소를 제공할 수 있으며 코드의 가독성 및 명확성이 향상된다.

• 라벨 안에 input 태그를 위치시켜 붙임 수 있음
• input 태그의 아이디 부여수 for속성으로 연결시킬 수 있음

input 외의 다른 입력 태그

<select>

• 다수의 옵션을 포함할 수 있는 선택 메뉴를 만듦(드롭 다운 메뉴)
• 내부의 선택지는 <option> 태그를 통해서 생성할 수 있음
• value 속성으로 값 구별이 가능
• multiple 옵션을 추가해서 여러 개 선택을 하게 할 수 있음
• <option>에 selected 속성 추가로 가장 먼저 오는 값을 지정할 수 있음
• size 옵션으로 몇 개를 표시할지 지정할 수 있음

<textarea>

• 여러 줄의 텍스트를 입력받을 수 있는 태그

• 텍스트 영역의 크기는 글자 수를 기반으로 결정이 가능

• cols, rows 속성으로 가로 세로 글자 수를 지정할 수 있음

• 리사이징 특성이 있음(마우스로 크기를 변경할 수 있다, 웹에서)

<progress>

• 작업이 어느 정도 진행 되었는지 나타낼떄 사용
• max 속성은 작업 완료에 필요한 작업량을 지정
• value 속성은 화면에 표시할 진척도를 지정하는 속성

<button>

• 클릭을 입력으로 받는 요소
• 태그 사이의 콘텐츠는 버튼에 표시될 텍스트의 역할을 함
• <input>에 type 속성에 button을 지정하면 외형적으로 동일하게 만들 수 있음

 

TIP : <fieldset>으로 원하는 부분을 묶을 수 있고 해당 부분에 <legend>로 어떤 부분인지 표시할 수 있다.