input
input태그는 사용자로 부터 입력값을 받기위해 사용한다.- 자동으로 닫는 태그 : o
- 반드시
form태그에 속해있고, name속성값을 가지고 있어야 올바르게 서버노 전송된다.
- 속성
accept : type속성값이 file일때 입력 받을 수 있는 파일을 제한한다. 이는 콤마(,)로 구분된 .확장자 형식 혹은 MINE 타입이어야한다.
- 모든 확장자를 허용할 때 :
*(기본값)
jpg 및 jpeg 확장자만 허용할 때 : .jpg, .jpeg - 모든 이미지 타입을 허용할 때 :
images/*
zip 파일 및 모든 이미지 파일을 허용할 때 : .zip, image/*
autofocus : 페이지가 로드되었을때 해당 속성을 가진 input태그에 자동으로 포커스가 주어진다.(속성 값 없음)checked : type이 checkbox 이거나 radio인 상태에서 해당 input이 선택(체크)된 상태가 된다.(속성 값 없음)disabled : 해당하는 input태그를 비활성화한다.(속성 값 없음)readonly : 해당하는 input 태그가 가진 값을 수정하지 못하도록 한다.(속성 값 없음)multiful : type속성값이 file일때 여러 개의 파일을 선택할 수 있게 한다.maxlength : 문자열의 값을 받을 때 최대 길이를 지정한다. minlength : 문자열의 값을 받을 때 최소 길이를 지정한다.max : type이 number일때 최대값min : type이 number일때 최소값required : 해당 input태그의 값이 비어있을 수 없음을 의미한다.name : 해당 input태그가 가진 값을 서버로 전송할때 사용할 식별자. 특별한 경우가 아니라면 동일한 form내에서 고유해야한다.pattern : 해당 input 태그가 가지는 값에 대해 검사할 정규식이다.type : 해당 input태그의 입력유형을 지정한다. 아래와 같이 사용할 수 있다.
button : 아무런 역할을 하지않는 일반 버튼, value속성 값을 함께 지정하여 표시될 텍스트를 설정할 수 있다.cheakbox : 어떠한 선택지에 대한 여/부(true/false)값.date : 날짜를 선택할 수 있다.email : 이메일. 브라우저 내부 기능으로 어느 정도의 정규화 및 모바일접근성 강화가 이루어진다.file : 파일을 첨부하고자 할 대 사용한다. 단, input태그의 type속성이 file인 경우 이를 포함하는 form태그의 entype속성값이 반드시 mutipart/form-data로 지정되어야 한다.hidden : 숨겨진 필드로 활용할 때 사용한다.number : 숫자를 입력받는다. 스피너(Spinner)가 포시되고, 모바일 접근성을 강화한다.password : 암호를 입력받는다. 입력값을 별표(*)처리 하고, 브라우저 내장 기능인 계정 자동완성 기능에서 비밀번호 필드를 담당한다.radio : name속성 값이 동일한 radio인 input들 사이에서 하나만 선택할 수 있게 한다.reset : 동일한 form태그안에 있는 모든 input등의 입력값을 초기화한다.submit : 동일한 form태그안에 있는 모든 input등의 값을 서버로 전송하는 버튼이다.tel : 전화번호를 입력받는다. 모바일 접근성을 강화한다.text : 일반 문자열을 입력받는다.time : 시간을 입력받는다.
value : 해당 input태그가 가지는 값을 지정한다. 단, type속성값이 button이거나 submit, reset 등 버튼 형식일때 value속성값은 표기할 텍스트가 된다.
예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>input, select, textarea, label 태그</title>
</head>
<body>
<div>
<span>button</span>
<input type="button", value="버튼">
</div>
<div>
<span>checkbox</span>
<input type="checkbox">
<span>약관을 읽어보았고 이해하였으며 동의합니다.</span>
</div>
<div>
<span>date</span>
<input type="date">
<span>생년월일을 입력하세요.</span>
</div>
<div>
<span>email</span>
<input type="email">
<span>이메일을 입력하세요.</span>
</div>
<div>
<span>file</span>
<input multiple type="file">
<span>프로필 이미지를 선택해주세요.</span>
</div>
<div>
<span>hidden</span>
<input type="hidden">
</div>
<div>
<span>number</span>
<input value="20" type="number">
<span>나이를 입력해주세요.</span>
</div>
<div>
<span>password</span>
<input type="password">
<span>비밀번호를 입력해주세요.</span>
</div>
<div>
<span>radio</span>
<input name="tc" type="radio">
<span>KT</span>
<input name="tc" type="radio">
<span>LG U+</span>
<input name="tc" type="radio">
<span>SKT</span>
</div>
<div>
<span>reset</span>
<input type="reset" value="다시입력">
</div>
<div>
<span>submit</span>
<input type="submit" value="전송">
</div>
<div>
<span>tel</span>
<input type="tel">
<span>연락처를 입력 해주세요.</span>
</div>
<div>
<span>text</span>
<input type="text">
<span>아이디를 입력 해주세요.</span>
</div>
<div>
<span>time</span>
<input type="time">
<span>입실시간을 입력하세요.</span>
</div>
<form>
<input type="number" min="14" max="24">
<input name="id" autofocus maxlength="10" minlength="5" required type="text"><br>
<input name="pw" type="password">
<input type="submit" value="로그인">
</form>
</body>
</html>