HTML <input> 크기 속성

<시간/>

요소의 크기 속성은 입력의 너비를 설정하는 데 사용됩니다. 너비가 클수록 너비가 더 큰 텍스트 상자가 나타납니다. 텍스트, 검색, 이메일, 비밀번호, 전화 및 URL과 같은 입력 유형에 대해 크기 속성을 설정할 수 있습니다.

다음은 구문입니다 -

<input size="size_num">

위에서 size_num은 숫자로 설정해야 하는 입력의 너비입니다. 기본값은 20입니다.

이제 요소 −

의 크기 속성을 구현하는 예를 살펴보겠습니다.

예시

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

출력

HTML input 크기 속성

위의 예에는 버튼이 있는 일부 필드가 있습니다 -

<form action="" method="get">
   Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br>
   Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br>
   DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
   Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br>
   Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
   <button type="submit" value="Submit">Submit</button>
</form>

이제 더 큰 텍스트 상자, 즉 더 큰 너비를 원한다고 가정해 보겠습니다. 이를 위해 크기 속성을 사용하여 숫자로 너비를 설정했습니다 -

<input type="text" name="id" placeholder="Enter UserId here..." size = "25" required>

HTML 크기 속성

예시

출력