HTML에서 텍스트 상자 스타일을 지정하는 방법
웹 디자인에서 텍스트 상자는 사용자가 페이지에 정보를 입력하는 데 사용할 수 있는 일반적으로 사용되는 요소입니다. 이 기사에서는 HTML에서 텍스트 상자를 설정하는 방법을 소개합니다.
- 태그 사용
텍스트 상자를 만들려면 태그를 사용하고 유형을 "text"로 설정하세요. 다음은 기본 예입니다.
<input type="text" name="username">
로그인 후 복사
이 예에서는 텍스트 상자를 만들고 이름을 "username"으로 지정합니다.
- 텍스트 상자 크기 및 최대 길이 설정
"size" 속성을 사용하여 텍스트 상자의 크기를 설정할 수 있습니다. 예:
<input type="text" name="username" size="30">
로그인 후 복사
이 예에서는 텍스트 상자의 크기를 30으로 설정합니다. 문자가 넓습니다.
또한 "maxlength" 속성을 사용하여 텍스트 상자의 최대 길이를 설정할 수도 있습니다. 예:
<input type="text" name="username" maxlength="20">
로그인 후 복사
이 예에서는 텍스트 상자의 최대 길이를 20자로 설정합니다.
- 기본값 및 자리 표시자 설정
"value" 속성을 사용하여 텍스트 상자의 기본값을 설정할 수 있습니다. 예:
<input type="text" name="username" value="请输入用户名">
로그인 후 복사
이 예에서는 텍스트 상자의 기본값을 " 사용자 이름을 입력하세요."
또한 "placeholder" 속성을 사용하여 텍스트 상자의 자리 표시자를 설정할 수도 있습니다. 예:
<input type="text" name="username" placeholder="请输入用户名">
로그인 후 복사
이 예에서는 텍스트 상자의 자리 표시자를 "사용자 이름을 입력하십시오"로 설정합니다. 사용자가 텍스트 상자에 들어가면 자리 표시자가 자동으로 사라집니다.