name 속성은 요소의 이름을 지정합니다.
서버로 전송될 이름입니다.
<input type="text" name="myname" >
value 속성은 입력필드에 대한 초기값을 지정합니다.
type 속성 값이 button, reset, submit 인경우 value 값이 표시됩니다.
<input type="text" name="myname" value="초기값">
<input type="button" value="버튼표시 텍스트">
autofocus 속성 페이지가 로드될때 자동으로 포커스를 취득합니다.
<input type="text" name="myname" autofocus >
readonly 속성은 읽기 전용으로 지정합니다.
readonly 속성은 값없이 사용합니다.
<input type="text" name="myname" value="초기값" readonly>
disabled 속성은 비활성화 시키고 제출할때 값을 전송하지 않습니다.
disabled 속성은 값없이 사용합니다.
<input type="text" name="myname" disabled>
checked 속성은 항목이 선택됩니다.
type 속성이 checkbox, radio에서 작동합니다.
<input type="checkbox" checked>
<input type="radio" checked>
placeholder 속성은 입력필드에 샘플값이나 간단한 설명을 지정합니다.
type 속성이 text, search, url, tel, email, password에서 동작합니다.
<input type="text" name="myname" placeholder="이름">
required 속성은 폼 제출시 값이 필수로 있어야 합니다..
type 속성이 text, search, url, tel, email, password, date pickers, number, checkbox, radio, file에서 동작합니다.
<input type="text" name="myname" required>
size 속성은 숫자값을 지정하여 입력필드의 크기를 지정합니다.
기본값은 20입니다.
<input type="text" name="myname" size="40">
입력가능한 최소문자의 개수와 최대문자의 개수를 지정합니다.
자동으로 유효성 검사를 진행할때 입력데이터에 대해 유효성을 확인합니다.
maxlength 속성을 지정하면 입력필드가 허용되는 문자수를 초과하지 않습니다.
<input type="text" name="myname" minlength="3" maxlength="10" >
autocomplete 속성은 폼 또는 입력필드에서 자동완성 기능을 사용할지 여부를 지정합니다.
자동완성 기능이 켜지면 브라우저는 사용자가 이전에 입력한 값을 기반으로 입력 값을 자동완성 합니다.
<input type="text" name="myname" autocomplete="on" >
novalidate 속성 <form> 속성입니다.
novalidate 속성이 있으면 폼을 제출할때 데이터 유효성 검증을 하지 않습니다.
<form action="action.php" novalidate>
<input type="email" name="myemail">
</form>
form 속성은 input 요소가 폼요소 밖에서 사용되는 경우 form 요소의 id를 지정합니다.
<form id="form1">
<input type="email" name="myemail">
</form>
<input type="text" name="myname" form="form1">
폼 제출시 <form> 요소의 속성을 대체하여 전송합니다.
type 속성 값이 submit, image 버튼에서 사용합니다.
<form id="form1" method="get">
<input type="email" name="myemail">
<input type="submit" value="post 제출" formmethod="post">
</form>
type 속성이 image 일때 사용됩니다.
<img> 태그의 사용법과 동일합니다.
<input type="image" src="/study/html/img/button.png" width="32" height="32" alt="버튼">
list 속성은 <datalist> 요소를 지정합니다.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
min, max, 속성은 최소 및 최대값을 지정합니다.
step 속성은 유효한 번호 간격을 지정합니다.
type 속성이 number, range, date, datetime-local, month, time, week에서 동작합니다.
2000년 1월 15일 이후 선택<br>
<input type="date" name="bday" min="2000-01-15"><br>
1 ~ 16 까지 3의 간격<br>
<input type="number" name="quantity" min="1" max="16" step="3">
2000년 1월 15일 이후 선택
multiple 속성은 하나 이상의 값을 입력 할수 있음을 지정합니다.
type 속성이 email, file에서 동작합니다.
email에 여러값 입력시 ,(쉼표)로 구분하여 입력합니다.
file을 여러개 선택하려면 Ctrl, Shift 키를 조합하여 선택합니다.
email 요소에 mail@exam.com, mail2@exam.com, mail3@exam.com 와 같이 쉼표로 구분함<br>
<input type = "email" multiple><br>
file 선택을 여러개 할수 있음<br>
<input type="file" multiple>
email 요소에 mail@exam.com, mail2@exam.com, mail3@exam.com 와 같이 쉼표로 구분함
pattern 속성은 입력값에 대한 유효성 검사를 위한 정규표현식을 지정합니다.
title 속성을 사용하여 사용자를 돕기위한 패턴 설명을 기술하십시오.
type 속성이 text password tel search url email date에서 동작합니다.
<input type="text" pattern="^[a-zA-Z]{4,10}$" title="영문 4~10자">
accept 속성은 서버로 업로드할 파일의 유형을 지정합니다.
type 속성 file에서 사용합니다.
값 | 설명 |
---|---|
파일 확장자 | 파일의 확장자를 지정합니다 예: .gif, .jpg, .png |
audio/* | 모든 오디오 파일을 지정합니다. |
video/* | 모든 비디오 파일을 지정합니다. |
image/* | 모든 이미지 파일을 지정합니다. |
media_type | 미디어 유형을 지정합니다. IANA Media Types에서 모든 유형의 미디어 타입을 확인하세요. |
<input type="file" accept="image/*">