HTML Input 속성들(Attributes)
value 속성
value 속성은 입력필드에 대한 초기값을 지정한다.:
Example
<form action="">
First name:<br>
<input
type="text"
name="firstname"
value="John">
<br>
Last name:<br>
<input
type="text"
name="lastname">
</form>
Try it Yourself » readonly 속성
readonly 속성은 입력필드가 읽기전용(read only)임을 지정한다 (수정할 수 없음을):
Example
<form action="">
First name:<br>
<input
type="text"
name="firstname"
value="John"
readonly>
<br>
Last name:<br>
<input
type="text"
name="lastname">
</form>
Try it Yourself » readonly 속성은 값이 필요 없으며, readonly="readonly" 라고 쓰는 것과 동일하다.
disabled 속성
disabled 속성은 입력필드가 사용불가임을 지정한다.
disabled 요소는 사용할 수 없고(un-usable), 클릭할 수 없다(un-clickable).
Disabled 요소는 제출되지 않는다.
Example
<form action="">
First name:<br>
<input
type="text"
name="firstname"
value="John"
disabled>
<br>
Last name:<br>
<input
type="text"
name="lastname">
</form>
Try it Yourself » disabled 요소는 값이 필요 없으며, disabled="disabled" 라고 쓰는 것과 동일하다.
size 속성
size 속성은 입력 필드의 크기(문자들)를 지정한다. :
Example
<form action="">
First name:<br>
<input
type="text"
name="firstname"
value="John"
size="40">
<br>
Last name:<br>
<input
type="text"
name="lastname">
</form>
Try it Yourself » maxlength 속성
maxlength 속성은 입력필드에 대한 최대 허용 길이를 지정한다.:
Example
<form action="">
First name:<br>
<input
type="text"
name="firstname"
maxlength="10">
<br>
Last name:<br>
<input
type="text"
name="lastname">
</form>
Try it Yourself » maxlength 속성으로, 허용된 문자 길이보다 큰 입력을 허용하지 않는 제어를 한다.
이 속성은 피드백을 제공하지 않으므로, 사용자에게 경고하려면 JavaScript 코드를 작성해야 한다.
 |
입력제한(Input restrictions) 만으로는 부족하고,
JavaScript는 불법입력을 추가할 많은 방법을 제공한다. 입력을 안전하게 제한 하려면, 제한이 수신 받는 서버에서도 확인되어야 한다. |
|---|
autocomplete 속성
autocomplete 속성은 폼이나 입력필드가 자동완성(autocomplete) 기능을 지원할 지 여부를 지정합니다.
autocomplete 를 켜면, 브라우져는 사용자가 이전에 입력한 값들에 기초하여 자동으로 완성합니다.
Tip: 폼(form)에는 autocomplete 가 "on"이면서, 특정 입력필드는 "off" 로 하는 것이 가능하며, 그 반대의 경우도 마찬가지이다.
autocomplete 속성은 <form> 과 다음의 <input> 타입에서 작동합니다. : text, search, url, tel, email, password, datepickers, range, and color.
Example
An HTML form with autocomplete on (and off for one input field):
<form action="action_page.php" autocomplete="on">
First name:<input
type="text"
name="fname"><br>
Last name: <input
type="text"
name="lname"><br>
E-mail: <input
type="email"
name="email"
autocomplete="off"><br>
<input
type="submit">
</form>
Try
it Yourself » Tip: 일부 브라우져에서는 이것이 작동되게 하려면, autocomplete 기능을 활성화 해야합니다.
novalidate 속성
novalidate 속성은 <form> 속성이다.
novalidate 는 제출 시에 데이터의 유효성 검사를 하지 않도록 지정한다.
Example
Indicates that the form is not to be validated on submit:
<form action="action_page.php" novalidate>
E-mail: <input
type="email"
name="user_email">
<input
type="submit">
</form>
Try it Yourself »
autofocus Attribute
autofocus 속성은 boolean 속성이다.
이는 페이지가 로드 될 때 자동적으로 해당 <input> 요소가 초점(get focus)을 받도록 한다.
Example
Let the "First name" input field automatically get focus when the page loads:
First name:<input type="text" name="fname" autofocus>
Try
it Yourself »
form 속성
form 속성은 <input> 요소가 속한 폼이 하나 이상 임을 명시한다.
Tip: 하나 이상의 폼을 참조할 때, 공백으로 구분한 폼 id 목록을 사용한다.
Example
An input field located outside the HTML form (but still a part of the form):
<form action="action_page.php" id="form1">
First name: <input
type="text"
name="fname"><br>
<input
type="submit"
value="Submit">
</form>
Last name: <input
type="text"
name="lname"
form="form1">
Try
it Yourself »
formaction 속성
formaction 속성은 폼이 제출될 때 입력 콘트롤을 처리할 파일의 URL 을 지정합니다.
formaction 속성은 <form> 요소의 action 속성을 오버라이드(override)하여 새롭게 지정합니다.
formaction 속성은 type="submit" 과 type="image"와 함께 사용됩니다.
Example
An HTML form with two submit buttons, with different actions:
<form action="action_page.php">
First name: <input
type="text"
name="fname"><br>
Last name: <input
type="text"
name="lname"><br>
<input
type="submit"
value="Submit"><br>
<input
type="submit"
formaction="demo_admin.asp"
value="Submit as admin">
</form>
Try it Yourself »
formenctype 속성
formenctype 속성은 서버로 제출시에 폼-데이타가 엔코드(encod)되어야 함을 지정한다. (method="post" 인 폼에 한해서)
formenctype 속성은 <form> 요소의 enctype 속성을 덮어 씨운다. .
formenctype 속성은 type="submit" 과 type="image"과 함께 사용될 수 있다.
Example
Send form-data that is default encoded (the first submit button), and encoded as "multipart/form-data" (the second submit button):
<form action="demo_post_enctype.asp" method="post">
First name: <input
type="text"
name="fname"><br>
<input
type="submit"
value="Submit">
<input
type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
Try
it Yourself »
formmethod 속성
formmethod 속성은 action URL로 폼-데이타를 제출할 때 사용할 HTTP method를 정의함 .
formmethod 속성은 <form> 요소의 method 속성을 덮어 쓴다. .
formmethod 속성은 type="submit" 과 type="image"과 함께 사용될 수 있다.
Example
The second submit button overrides the HTTP method of the form:
<form action="action_page.php" method="get">
First name: <input
type="text"
name="fname"><br>
Last name: <input
type="text"
name="lname"><br>
<input
type="submit"
value="Submit">
<input
type="submit"
formmethod="post"
formaction="demo_post.asp"
value="Submit using POST">
</form>
Try
it Yourself »
formnovalidate 속성
novalidate 속성은 부울(boolean) 속성이다.
이는 제출 시에 <input> 요소가 유효성 검사되지 않아야 함을 지정한다.
formnovalidate 속성은 <form> 요소의 novalidate 속성을 덮어 쓴다. .
formnovalidate 속성은 type="submit"과 함께 사용될 수 있다.
Example
A form with two submit buttons (with and without validation):
<form action="action_page.php">
E-mail: <input
type="email"
name="userid"><br>
<input
type="submit"
value="Submit"><br>
<input
type="submit"
formnovalidate value="Submit
without validation">
</form>
Try
it Yourself »
formtarget 속성
formtarget 속성은 제출된 후 응답된 답변을 표시할 곳의 이름을 지정한다.
formtarget 속성은 <form> 요소의 target 속성에 덮어 쓴다.
formtarget 속성은 type="submit" 과 type="image"과 함께 사용될 수 있다.
Example
A form with two submit buttons, with different target windows:
<form action="action_page.php">
First name: <input
type="text"
name="fname"><br>
Last name: <input
type="text"
name="lname"><br>
<input
type="submit"
value="Submit
as normal">
<input
type="submit"
formtarget="_blank"
value="Submit to a new
window">
</form>
Try
it Yourself »
height 과 width 속성
height 과 width 속성은 <input> 요소의 높이와 너비를 지정한다.
height 과 width 속성은 <input type="image"> 요소만과 동작한다.
| |
Always specify the size of images. If the browser does not know the size, the page will flicker while images load. |
|---|
Example
Define an image as the submit button, with height and width attributes:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Try
it Yourself »
list 속성
list 속성은 <input> 요소를 위해서 미리 지정된 옵션들을 담은 <datalist> 요소를 가리킨다.
Example
An <input> element with pre-defined values in a <datalist>:
<input list="browsers">
<datalist
id="browsers">
<option
value="Internet
Explorer">
<option
value="Firefox">
<option
value="Chrome">
<option
value="Opera">
<option
value="Safari">
</datalist>
Try
it Yourself »
min and max 속성
min 과 max 속성은<input> 요소의 최소와 최대 값을 지정한다.
min 과 max 속성은 다음과 같은 입력 타입에 적용된다. : number, range, date, datetime, datetime-local, month, time and week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input
type="date"
name="bday"
max="1979-12-31">
Enter a date after 2000-01-01:
<input
type="date"
name="bday"
min="2000-01-02">
Quantity (between 1 and 5):
<input
type="number"
name="quantity"
min="1"
max="5">
Try
it Yourself »
multiple Attribute
multiple 속성은 부울(boolean) 속성이다.
존재하는 경우, 사용자가 <input> 요소에 하나 이상의 값을 입력할 수 있음을 지정한다. .
multiple 속성은 다음과 같은 입력 타입과 작동한다. : email, and file.
Example
A file upload field that accepts multiple values:
Select images: <input type="file" name="img" multiple>
Try
it Yourself »
pattern 속성
pattern 속성은 <input> 요소의 값을 확인 해야할 정규표현식(regular expression)을 지정한다.
pattern 속성은 다음과 같은 입력 타입에 적용된다.: text, search, url, tel, email, and password.
Tip: Use the global title attribute to describe the pattern to help the user.
Tip: Learn more about regular expressions in our JavaScript tutorial.
Example
An input field that can contain only three letters (no numbers or special characters):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
Try
it Yourself »
placeholder 속성
placeholder 속성은 입력필드에 기대되는 값을 설명해주는 힌트(샘플 값이나, 포맷에 대한 간단한 설명) 를 지정한다.
사용자가 값을 입력하기 전에, 힌트(hint)가 입력필드에 표시된다.
placeholder 속성은 다음의 입력 필드 타입에서 작동한다: text, search, url, tel, email, and password.
Example
An input field with a placeholder text:
<input type="text" name="fname" placeholder="First name">
Try
it Yourself »
required 속성
required 속성은 부울(boolean) 속성이다.
존재하는 경우, 폼을 제출 하기 전에 입력필드가 작성되어야만 함을 지정한다.
required 속성은 다음의 입력 필드 타입에서 작동한다. : text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Example
A required input field:
Username: <input type="text" name="usrname" required>
Try
it Yourself »
step 속성
step 속성은 <input> 요소에서 유효한 숫자 단계을 지정한다.
Example: step="3" 이면, 유효한 숫자는 -3, 0, 3, 6, etc.
Tip: step 속성은 유효한 값의 범위를 생성할 때 max 와 min 속성과 함께 사용될 수 있다.
step 속성은 다음과 같은 입력 필드와 함께 작동 됩니다. : number, range, date, datetime, datetime-local, month, time and week.
Example
An input field with a specified legal number intervals:
<input type="number" name="points" step="3">
Try
it Yourself »
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »