HTML 입력 양식 - Input 요소의 속성

HTML의 <input> 요소는 사용자 입력을 받는 데 필수적인 역할을 합니다. 다양한 속성을 사용하면 입력 필드의 동작을 세부적으로 제어하고 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 주요 속성과 HTML5에서 새롭게 추가된 속성들을 정리해보겠습니다.

1. value 속성: 초기값 설정

value 속성은 입력 필드에 기본으로 표시될 값을 설정합니다. 사용자가 페이지를 열었을 때 나타나는 값으로, 기본 데이터를 표시하거나 특정 값으로 시작하도록 할 수 있습니다.

예제

<form>
    이름: <br><input type="text" name="student_name"><br>
    학번: <br><input type="text" name="student_id"><br>
    학과: <br><input type="text" name="department" value="컴퓨터공학과"><br>
</form>

 

2. readonly 속성: 읽기 전용 필드

readonly 속성은 입력 필드를 읽기 전용으로 설정합니다. 사용자는 필드의 값을 수정할 수 없지만, 해당 값은 폼이 제출될 때 서버로 전송됩니다.

예제

<form>
    이름: <br><input type="text" name="student_name"><br>
    학번: <br><input type="text" name="student_id"><br>
    학과: <br><input type="text" name="department" value="컴퓨터공학과" readonly><br>
</form>

 

3. disabled 속성: 비활성화 필드

disabled 속성은 입력 필드를 완전히 비활성화합니다. 사용자는 필드에 접근할 수 없으며, 해당 필드의 값은 폼이 제출될 때 전송되지 않습니다.

예제

<form>
    이름: <br><input type="text" name="student_name"><br>
    학번: <br><input type="text" name="student_id"><br>
    학과: <br><input type="text" name="department" value="컴퓨터공학과" disabled><br>
</form>

 

 

4. maxlength 속성: 입력 길이 제한

maxlength 속성은 사용자가 입력할 수 있는 최대 문자 길이를 제한합니다. 특정 길이 이상의 입력을 방지하고 싶을 때 유용합니다.
예제

<form>
    이름: <br><input type="text" name="student_name" value="홍길동" maxlength="10"><br>
    학번: <br><input type="text" name="student_id"><br>
</form>

 

5. size 속성: 입력 필드의 크기 설정

size 속성은 입력 필드의 가로 크기를 설정합니다. 필드에 표시되는 문자의 수를 기준으로 크기를 조정하며, 입력 가능한 문자 수와는 무관합니다.
예제

<form>
    이름: <br><input type="text" name="student_name" value="홍길동" size="30"><br>
    학번: <br><input type="text" name="student_id"><br>
</form>

 

6. HTML5에서 추가된 속성

HTML5는 입력 필드의 기능을 확장하는 여러 유용한 속성을 추가했습니다.

Form 관련 속성

• autocomplete: 입력 자동 완성 기능을 활성화 또는 비활성화합니다.
• novalidate: 폼 제출 시 HTML 기본 검증을 생략합니다.

Input 관련 속성

• autofocus: 페이지가 로드되었을 때 자동으로 입력 필드에 포커스를 설정합니다.
• form: 특정 <form> 요소와 입력 필드를 연결합니다.
• formaction: 폼 데이터를 제출할 URL을 설정합니다.
• formenctype: 데이터 제출 시 사용할 인코딩 방식을 정의합니다.
• formmethod: 데이터를 제출할 HTTP 메서드(GET, POST 등)를 지정합니다.
• formnovalidate: 특정 입력 필드에만 검증을 생략하도록 설정합니다.
• formtarget: 데이터를 제출할 창이나 프레임을 지정합니다.
• height 및 width: <input type="image"> 요소의 높이와 너비를 설정합니다.
• list: 입력 필드와 <datalist>를 연결해 사용자 입력을 도와줍니다.
• min 및 max: 숫자, 날짜 등 값의 최소 및 최대 허용 범위를 설정합니다.
• multiple: 여러 값을 선택할 수 있도록 허용합니다.
• pattern: 정규 표현식을 사용해 입력 형식을 검증합니다.
• placeholder: 입력 필드에 힌트를 표시합니다.
• required: 필수 입력 필드를 지정합니다.
• step: 값의 증가 간격을 설정합니다.

HTML <input> 요소의 다양한 속성을 활용하면 입력 필드를 정교하게 제어할 수 있습니다. readonly와 disabled의 차이, maxlength와 size의 역할 등을 이해하면 사용자 경험을 최적화하는 데 큰 도움이 됩니다. 특히, HTML5에서 추가된 속성들은 더욱 직관적이고 유연한 입력 필드 설정을 가능하게 합니다.

더 나은 폼 설계를 위해 이 속성들을 적극 활용해보세요!