| ▶ HTML Forms |
| HTML Forms |
| HTML Form_Attributes |
| HTML Form Elements |
| HTML Input Types |
| HTML Input Attributes |
| HTML Input Form Attributes |
HTML Input Attributes
1. HTML Input Attributes란?
HTML Input Attributes는 입력 요소에 대한 추가적인 정보를 제공하고, 입력 필드의 동작 방식을 제어하는 데 사용되는 속성입니다.
2. 주요 HTML Input Attributes
HTML5에서는 다양한 입력 유형에 사용할 수 있는 여러 속성을 제공합니다. 아래는 주요 HTML 입력 속성과 그 기능에 대한 설명입니다.
| 속성 | 설명 | 예시 |
|---|---|---|
type |
입력 필드의 유형을 정의. (text, password, email 등) | <input type="text" name="username"> |
name |
서버에 전송될 데이터의 이름. | <input type="text" name="username"> |
value |
입력 필드의 초기 값을 설정. | <input type="text" value="홍길동"> |
placeholder |
입력 필드의 안내 문구를 설정. | <input type="text" placeholder="이름을 입력하세요"> |
required |
필수 입력 필드를 지정. | <input type="text" required> |
min |
입력할 수 있는 최소값을 설정 (주로 숫자 필드에서 사용). | <input type="number" min="1"> |
max |
입력할 수 있는 최대값을 설정 (주로 숫자 필드에서 사용). | <input type="number" max="120"> |
maxlength |
입력할 수 있는 최대 문자 수를 설정. | <input type="text" maxlength="10"> |
pattern |
정규 표현식에 따른 입력 형식을 지정. | <input type="text" pattern="[A-Za-z]{3}"> |
autocomplete |
자동 완성을 사용할지 여부를 설정. | <input type="text" autocomplete="on"> |
disabled |
입력 필드를 비활성화하여 사용자가 입력할 수 없도록 설정. | <input type="text" disabled> |
readonly |
입력 필드를 읽기 전용으로 설정하여 사용자가 수정할 수 없도록 함. | <input type="text" readonly> |
id |
입력 필드의 고유 식별자를 설정. | <input type="text" id="username"> |
class |
입력 필드에 CSS 클래스를 추가하여 스타일링을 가능하게 함. | <input type="text" class="input-class"> |
3. HTML Input Attributes의 사용법
입력 요소에 속성을 추가함으로써 입력 필드의 기능을 향상시킬 수 있습니다.
<form action="/submit" method="POST">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required placeholder="이름을 입력하세요" maxlength="20">
<label for="age">나이:</label>
<input type="number" id="age" name="age" min="1" max="120 required">
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="제출">
</form>
위 예시에서는 여러 가지 입력 필드에 다양한 속성을 사용하여 폼을 구성하고 있습니다.
4. 폼 유효성 검사
HTML5에서는 기본적인 폼 유효성 검사를 제공하여, 사용자가 잘못된 데이터를 입력할 경우 경고 메시지를 표시합니다. required, minlength, pattern 등의 속성을 사용하여 유효성 검사를 수행할 수 있습니다.
예시:
<form action="/submit" method="POST">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required minlength="8" placeholder="최소 8자 이상">
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="제출">
</form>
위 코드에서 비밀번호 필드는 최소 8자 이상이어야 하며, 이메일 필드는 필수 입력 필드입니다.