HTML input 태그 width 속성 – 이미지 버튼 너비 설정 방법

HTML <input> 태그의 width 속성이란?

HTML의 <input> 요소에서 width 속성은 오직 type="image"와 함께 사용할 수 있으며, 이미지로 표시되는 제출 버튼의 가로 크기를 픽셀 단위로 지정하는 역할을 합니다.

이 속성은 HTML5에서 새롭게 도입되었으며, type="image" 입력 필드는 일반 제출 버튼(submit button)처럼 동작합니다. 즉, 사용자가 해당 이미지를 클릭하면 폼이 전송됩니다.

기본 문법

<input type="image" width="pixels">

여기서 width 값은 이미지의 가로 너비를 의미하며, 단위는 픽셀(px)입니다.

width 속성 사용 예제

다음은 회원가입 폼에서 type="image" 입력 필드에 width 속성을 적용한 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
    Id - <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
    Password - <input type="password" name="pwd" placeholder="Enter password here..."><br>
    DOB - <input type="date" name="dob"><br>
    Telephone - <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
    Email - <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
    <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
</form>
</body>
</html>

출력 결과

HTML input 태그 width 속성 – 이미지 버튼 너비 설정 방법

코드 상세 설명

위 예제는 text, password, date, tel, email 등 다양한 입력 유형으로 구성된 폼입니다. 여기에 클릭 시 폼을 전송하는 이미지 버튼을 추가했습니다.

<form action="" method="get">
    Id - <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
    Password - <input type="password" name="pwd" placeholder="Enter password here..."><br>
    DOB - <input type="date" name="dob"><br>
    Telephone - <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
    Email - <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
    <input type="image" src="go.jpg" alt="Submit" width="120" height="60">
</form>

버튼에 사용된 이미지는 폼 컨트롤인 type="image" 입력 필드를 통해 추가됩니다.

<input type="image" src="go.jpg" alt="Submit" width="120" height="60">

src: 버튼으로 표시할 이미지 파일의 경로
alt: 이미지가 로드되지 않을 때 표시되는 대체 텍스트
width: 이미지 버튼의 가로 너비 (예: 120px)
height: 이미지 버튼의 세로 높이 (예: 60px)

이처럼 <input> 요소의 width 속성을 활용하면 이미지 제출 버튼의 크기를 원하는 대로 조절할 수 있습니다.

참고 사항

width 속성은 반드시 type="image"일 때만 유효하며, 다른 입력 유형에는 적용되지 않습니다. CSS를 통해서도 동일하게 크기를 조절할 수 있지만, HTML5 표준 속성인 width를 사용하면 별도의 스타일 정의 없이 간단하게 인라인으로 지정할 수 있다는 장점이 있습니다.