HTML에서 텍스트 상자 스타일을 지정하는 방법

웹 디자인에서 텍스트 상자는 사용자가 페이지에 정보를 입력하는 데 사용할 수 있는 일반적으로 사용되는 요소입니다. 이 기사에서는 HTML에서 텍스트 상자를 설정하는 방법을 소개합니다.

1. <input> 태그 사용

텍스트 상자를 만들려면 <input> 태그를 사용하고 유형을 "text"로 설정하세요. 다음은 기본 예입니다.

<input>

이 예에서는 텍스트 상자를 만들고 이름을 "username"으로 지정합니다.

2. 텍스트 상자 크기 및 최대 길이 설정

"size" 속성을 사용하여 텍스트 상자의 크기를 설정할 수 있습니다. 예:

<input>

이 예에서는 텍스트 상자의 크기를 30으로 설정합니다. 문자가 넓습니다.

또한 "maxlength" 속성을 사용하여 텍스트 상자의 최대 길이를 설정할 수도 있습니다. 예:

<input>

이 예에서는 텍스트 상자의 최대 길이를 20자로 설정합니다.

3. 기본값 및 자리 표시자 설정

"value" 속성을 사용하여 텍스트 상자의 기본값을 설정할 수 있습니다. 예:

<input>

이 예에서는 텍스트 상자의 기본값을 " 사용자 이름을 입력하세요."

또한 "placeholder" 속성을 사용하여 텍스트 상자의 자리 표시자를 설정할 수도 있습니다. 예:

<input>

이 예에서는 텍스트 상자의 자리 표시자를 "사용자 이름을 입력하십시오"로 설정합니다. 사용자가 텍스트 상자에 들어가면 자리 표시자가 자동으로 사라집니다.

4. 태그 사용

<input> 태그 외에도 태그를 사용하여 여러 줄의 텍스트 상자를 만들 수도 있습니다. 예는 다음과 같습니다.

<textarea></textarea>

이 예에서는 여러 줄로 구성된 텍스트 상자를 만들고 이름을 "content"로 지정합니다. 또한 텍스트 상자의 행 수를 5로 설정하고 열 수를 30으로 설정했습니다.

5. 요약

HTML에서 텍스트 상자를 설정하는 것은 매우 간단합니다. <input> 또는 태그를 사용하고 해당 속성을 설정하면 됩니다. 이러한 속성을 통해 텍스트 상자의 크기, 최대 길이, 기본값, 자리 표시자 등을 제어하여 더 나은 사용자 경험을 얻을 수 있습니다.

위 내용은 HTML에서 텍스트 상자 스타일을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!