简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 본문

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

PHPz
풀어 주다： 2023-04-13 11:13:50
원래의
3353명이 탐색했습니다.

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

  1. 태그 사용

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

<input type="text" name="username">
로그인 후 복사

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

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

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

<input type="text" name="username" size="30">
로그인 후 복사

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

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

<input type="text" name="username" maxlength="20">
로그인 후 복사

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

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

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

<input type="text" name="username" value="请输入用户名">
로그인 후 복사

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

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

<input type="text" name="username" placeholder="请输入用户名">
로그인 후 복사

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