HTML에서 입력 텍스트 상자의 크기를 어떻게 정의 할 수 있습니까?

90

다음은 HTML 입력 텍스트 상자입니다.

<input type="text" id="text" name="text_name" />

상자의 크기를 정의하는 옵션은 무엇입니까?

이것이 CSS에서 어떻게 구현 될 수 있습니까?

html css input

— osos
소스

HTML 텍스트 상자의 크기

— Tony

어떤 경우에는 설정 max-width만으로 충분합니다

— Christophe Roussy

129

다음을 설정할 수 있습니다 width.

<input type="text" id="text" name="text_name" style="width: 300px;" />

또는 더 나은 클래스 정의 :

<input type="text" id="text" name="text_name" class="mytext" />

별도의 CSS 파일에서 필요한 스타일을 적용합니다.

.mytext {
    width: 300px;
}

사용자가이 텍스트 상자에 입력 할 수있는 문자 수를 제한하려면 다음 maxlength속성을 사용할 수 있습니다 .

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— 다린 디미트로프
소스

11

또한 : "em"( "px"가 아님)으로 너비를 변경할 수 있으며 크기는 텍스트 상자의 글꼴 크기에 비례합니다

— Alexander Bird

45

size속성뿐만 아니라, 작동

<input size="25" type="text">

— 퍼지 분석
소스

이 크기 속성은 일반적으로 어떤 단위로 측정됩니까?

— Thomas Kimber

8

이 시도

<input type="text" style="font-size:18pt;height:420px;width:200px;">

그렇지 않으면

 <input type="text" id="txtbox">

CSS 사용 :

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— 자 나르 타난 라무
소스

3

귀하의 답변은 새로운 것을 추가하지 않으며 css에서 단위 (px, pt, % v 등)를 지정해야합니다

— Jon P

1

글쎄-글꼴 크기 (style = "font-size : 18pt")는 내가 찾고 있던 것이었고 상자의 크기도 커졌습니다. OP에 의해 명시 적으로 요청되지는 않지만 가치도 추가됩니다.

— Wolf5

이것은 효과가 있었다. 따라서 대단히 감사합니다. 그러나 텍스트는 세로로 중앙에있는 것처럼 보입니다. 어떤 식 으로든이를 방지 할 수 있습니까?

— Aaron John Sabu

지연 죄송합니다 @AaronJohnSabu ... .. 폭 크기를 늘려보십시오 당신은 이미 답을 찾을 희망 ..

— Janarthanan Ramu는

3

인라인 스타일을 통해 너비를 픽셀 단위로 설정할 수 있습니다.

<input type="text" name="text" style="width: 195px;">

보이는 문자 길이로 너비를 설정할 수도 있습니다.

<input type="text" name="text" size="35">

— betrice mpalanzi
소스

-2

<input size="45" type="text" name="name">

"크기"는 요소 입력의 문자에서 보이는 너비를 지정합니다.

CSS의 높이와 너비를 사용할 수도 있습니다.

<input type="text" name="name" style="height:100px; width:300px;">

— 다니엘 도스 산토스
소스