source

입력 크기 대 폭

nicesource 2023. 8. 7. 22:36
반응형

입력 크기 대 폭

<input name="txtId" type="text" size="20" />

또는

<input name="txtId" type="text" style="width: 150px;" />

최적의 크로스 브라우저 코드는 무엇입니까?

물론 조건에 따라 다르겠지만, 사람들이 어떻게 어떤 기준으로 결정하는지 궁금합니다.

둘 다 사용할 수 있습니다.CSS 스타일은 다음을 재정의합니다.sizeCSS를 지원하고 필드를 정확한 너비로 만드는 브라우저의 속성이며, 그렇지 않은 브라우저의 경우 지정된 문자 수로 다시 떨어집니다.

편집: 제가 언급했어야 했습니다.size속성은 정확한 크기 조정 방법이 아닙니다. HTML 사양에 따르면 입력이 한 번에 표시할 수 있는 현재 글꼴의 문자 수를 나타냅니다.

그러나 지정한 글꼴이 고정 너비/단일 공간 글꼴이 아닌 경우 지정한 문자 수가 실제로 표시된다는 보장은 없습니다. 대부분의 글꼴에서 서로 다른 문자는 서로 다른 너비가 됩니다.이 질문에는 이 문제와 관련된 몇 가지 좋은 답변이 있습니다.

아래의 스니펫은 두 가지 접근 방식을 모두 보여줍니다.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

제가 제안하는 가장 좋은 방법은 스타일의 너비를 em 단위로 설정하는 것입니다 :) 그래서 20자의 입력 크기는 방금 설정되었습니다.style='width:20em':)

size여러 브라우저와 가능한 글꼴 설정 간에 일관성이 없습니다.

그widthpx에 설정된 스타일은 최소한 일관된 모듈로 상자에 표시되는 문제입니다.글꼴을 기준으로 크기를 지정하려면 스타일을 '그들'로 설정할 수도 있습니다(그러나 입력 값을 설정하지 않으면 일관성이 없습니다).font패밀리 및 크기 명시), 또는 액체 상태의 폼을 만드는 경우 '%'입니다.어느 쪽이든 스타일시트가 인라인보다 선호될 수 있습니다.style기여하다.

여전히 필요합니다.size위해서<select multiple>옵션에 맞게 높이를 조정할 수 있습니다.하지만 저는 그것을 사용하지 않을 것입니다.<input>.

저는 이것이 "통념"에 어긋난다고 말하고 싶지만, 저는 일반적으로 크기를 사용하는 것을 선호합니다.그 이유는 많은 사람들이 하지 말라고 말하는 정확한 이유입니다. 필드의 너비는 글꼴 크기에 따라 브라우저마다 다릅니다.특히 브라우저 설정에 관계없이 항상 지정된 문자 수를 표시할 수 있을 정도로 충분히 큽니다.

예를 들어, 날짜 필드가 있는 경우 일반적으로 필드가 8자 또는 10자(2자리 월 및 일 및 2자리 또는 4자리 연도, 구분 기호 포함)를 표시할 수 있을 정도로 넓으면 합니다.크기 속성을 설정하면 공간 낭비를 최소화하면서 전체 날짜를 볼 수 있습니다.대부분의 숫자에 대해서도 마찬가지로 - 예상되는 값의 범위를 알고 있으므로 크기 속성을 적절한 자릿수와 소수점(해당되는 경우)으로 설정합니다.

제가 아는 한, 어떤 CSS 속성도 이것을 하지 않습니다.예를 들어, em에서 너비를 설정하는 것은 너비가 아니라 높이를 기준으로 하기 때문에 알려진 수의 문자를 표시하려는 경우에는 정확하지 않습니다.

물론 이 논리가 항상 적용되는 것은 아닙니다. 예를 들어, 이름 입력 필드에는 문자가 여러 개 포함될 수 있습니다.이 경우 CSS 너비 속성(일반적으로 px)으로 돌아갑니다.그러나 제가 만드는 대부분의 필드에는 알려진 내용이 있으며 크기 속성을 지정하면 대부분의 내용이 클리핑 없이 표시됩니다.

다 둘다size 및 입니다.width은 CSS의 합니다.<input>너비를 각 문자의 너비에 더 가까운 값으로 설정하려면**ch**단위:

input {
    width: 10ch;
}

어떤 요소를 더 작게 만들려고 해도 더 작게 만들 수 없는 테이블과의 싸움을 이제 막 끝냈습니다.파이어버그로 검색했는데 폭을 이렇게 높게 설정하는 요소를 찾을 수 없었습니다.

마지막으로 입력 텍스트 요소의 크기 속성을 변경하려고 시도했고 이를 수정했습니다.어떤 이유에서인지 size 특성이 css 너비를 오버로드했습니다.jQuery를 사용하여 테이블에 동적으로 행을 추가하고 있었는데, 이 행에 입력이 포함되어 있었습니다.따라서 appendTo() 함수를 사용하여 입력을 동적으로 추가할 때는 너비와 함께 크기 속성을 설정하는 것이 더 나을 수 있습니다.

너비(두 번째 예)를 사용하면 더 일관성을 얻을 수 있습니다.

스타일과 너비를 사용하여 텍스트 상자의 크기를 조정할 수 있습니다.여기 그것에 대한 코드가 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

정렬을 사용하여 텍스트 상자의 가운데를 맞춥니다.

HTML은 요소의 의미적 의미를 제어합니다.CSS는 페이지의 레이아웃/스타일을 제어합니다.레이아웃을 제어할 때는 CSS를 사용합니다.

요컨대, 절대 사이즈를 사용하지 마세요="

그것이 이치에 맞는 한 가지 예.

쓰라고나 할까요?size 함께 있는 max-width스타일: 공간이 충분할 때는 최적에 가까운 너비를 제공하지만 필요할 때는 입력 길이를 제한합니다.

<input type="text" size="48" style="max-width:100%;">

이 코드펜을 보세요.

언급URL : https://stackoverflow.com/questions/1480588/input-size-vs-width

반응형

'source' 카테고리의 다른 글

사용자를 데이터베이스에 매핑하는 TSQL  (0) 2023.08.07
Git 태그의 시간 및 날짜 가져오기  (0) 2023.08.07
Java Spring Boot Project의 저장 프로시저가 null을 출력으로 반환합니다.  (0) 2023.08.07
Spring-Boot 시작을 중단하려면 어떻게 해야 합니까?  (0) 2023.08.02
Oracle TO_DATE NOT throw 오류  (0) 2023.08.02

'source'의 다른글

  • 현재글입력 크기 대 폭

관련글

댓글

티스토리툴바