lable 태그와 input 태그 정리

lable 태그와 input 태그 정리

2020. 10. 28. 16:31ㆍHTML & CSS 💙/HTML 연습

lable

사용자 인터페이스 항목의 설명을 나타냅니다.

<label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의 for 속성을 넣어야합니다.

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

input

입력요소로서, 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다.

유형설명기본 예제

유형	설명	예시
button	기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
checkbox	단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
color	색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.
datetime-local	날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.
email	이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.
file	파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.
hidden	보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!
image	src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여줍니다.
month	연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.
number	숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.
password	값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.
radio	같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다. name="" 어떤 값인지 같은 값을 선언해 줘야 한 개만 선택된다.
range	정확한 값은 중요하지 않는 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값들의 범위를 정의합니다.
reset	폼의 내용들을 디폴트값으로 초기화하는 버튼. 권장되지 않습니다.
search	검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.
submit	폼을 전송하는 버튼
tel	전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.
text	디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.
time	시간대가 없는 시간값을 입력하는 콘트롤
url	URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.
week	시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.

연습 예제

<body>
    <a href="http://www.google.com" target="_blank">Google</a>
    <label for=""> 생년월일 </label>
    <input type="date">
    <br>
    <label for=""> 색상 선택 </label>
    <input id="input_name" type="color">
    <br>
    <label for=""> 사진 선택 </label>
    <input id="input_name" type="file">
</body>

예제 확인

저작자표시 비영리 변경금지

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

3일차 레이아웃 구성 태그 div / span , div를 이용한 레이아웃 구성 (0)	2020.10.26
3일차 Form 태그 (0)	2020.10.26
3일차 개인연습 Video 태그 및 html 콘텐츠 모델 (0)	2020.10.26
2일차 img 이미지 태그 / audio 소리 태그 (0)	2020.10.24
2일차 table 태그 (0)	2020.10.24
2일차 리스트 태그 <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" > (0)	2020.10.24

Maryable Day

Maryable Day

태그

최근글

댓글

공지사항

아카이브

lable

input

연습 예제

예제 확인

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

관련글

티스토리툴바