HTML5 / input 태그 / input type 종류

<Today's Goals>

• input 태그
• input type의 종류

 

<What i learned>

• < xmp >코드 < / xmp >를 이용하면 코드를 텍스트로 보이게 할 수 있다.
• checkbox와 radio button의 차이점 : 복수선택이 가능한지 여부. checkbox만 복수 선택 가능.

 

<Questions>

• Q: range 모양 변형하는 방법

A: 브라우저별로 기본 스타일이 있어서 다르게 보인다.
기본에 설정되어있는 브라우저 스타일 속성을 없애고 css에서 수정한다.

 

 input[type=range] {
-webkit-appearance: none;
margin: 18px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
이런식으로 세부적인 부분들을 수정할 수 있으나 브라우저마다 다르기 때문에 각각 만들거나 통합된 코드를 입력해야한다. https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ (참고한 사이트)

 

• Q: 박스 안의 텍스트 크기에 맞게 자동으로 크기가 조절되는 박스 만드는 방법

A:  이 질문 했을 때 생각해보면 텍스트 밑에 배경 컬러를(박스처럼) 깔고 싶다는 것 같은데 css에서 backgroundcolor로 간단하게 설정이 가능하다. 그리고 padding 값은 줘서 여백을 만들어주고 box-sizing:border-box로 사이즈가 커지지않게 하면 된다.

 

---

 

input 태그

사용자의 입력을 받기 위해 사용하는 태그

여러번 사용된 폼 요소를 구분하기 위해 id 속성을 사용

유형설명

hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. 사용자에게는 굳이 보여줄 필요가 없지만 관리자가 알아야 하는 것을 입력.
text	한줄 짜리 텍스트를 입력할 수 있는 텍스트 상자
search	검색 상자
tel	전화번호 입력 필드
url	url주소 입력 필드 'http://'로 시작하는 사이트 주소를 입력. 공백이 없고 영문자와 마침표,슬래시/로만 이루어진다는 점을 기준으로 구분.
email	email 주소 입력 필드. 메일 주소 형식이 맞는지 자동으로 체크.
password	비밀번호 입력 필드
datetime	국제 표준시(UTC)로 설정된 날짜와 시간
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간
number	사용자가 입력한 내용을 숫자로 인식. 브라우저에 따라 숫자를 조절 할 수 있는 스핀 박스가 생성되기도 함. min,max로 최소값과 최대값 설정.
range	숫자를 조절 할 수 있는 슬라이드 바가 생성됨. min 최소값 0 ~max 최대값 100까지. step 속성을 이용해 특정 숫자로 제한하여 숫자 간격을 지정할 수 있다. 기본값은 1이며 생략할 수 있다.(number,range 모두)
color	색상 표. 색상 값은 16진수로 표시.
checkbox	주어진 항목에서 2개 이상 선택 가능한 체크박스
radio	주어진 항목에서 1개만 선택 가능한 라디오 버튼
submit	서버 전송 버튼
file	파일을 첨부할 수 있는 버튼
reset	리셋 버튼
button	버튼

 

• type="number", type="range"

등록 정보

• 참여인원(최대10명)
• 지원물품(1인당 5개)
• 희망 단계(상,중,하)

 

 

• type="date", type="month", type="week"

type="date"로 지정했을 경우, "yyyy-mm-dd"형식

type="month"로 지정했을 경우, "yyyy-mm"형식

type="week"로 지정했을 경우, "yyyy-w"형식

value 속성을 이용해서 입력할 수 있는 시간값을 제한.

 

• type="button"

onclick을 추가해 새 창을 여는 함수를 연결 window.open()

 

• autofocus 속성

페이지를 불러옴과 동시에 폼의 요소 중 원하는 요소에 마우스 커서를 표시.

이름

 

• placeholder 속성

사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 내용을 표시, 그 필드를 클릭하면 내용이 사라지도록해서 편리성을 높임.

회원번호

 

• readonly 속성

입력란에 텍스트를 표시하고 사용자가 입력하지 못하고 읽을 수만 있도록 설정.
"true","false" 값 중 하나만 사용(boolean value). 간단하게 readonly 또는 readonly="readonly"라고 써도 readonly="true"로 인식.

영어회화(초급)

 

• required 속성

필수적으로 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있음.
required 속성은 boolean value이기 때문에 required="required" 또는 그냥 required라고만 입력.

이름