Kích thước đầu vào so với chiều rộng

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

hoặc là

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

Cái nào là mã trình duyệt chéo tối ưu?

Tất nhiên nó phụ thuộc vào yêu cầu, nhưng tôi tò mò muốn biết mọi người quyết định như thế nào và dựa trên cơ sở nào.

Bạn có thể sử dụng cả hai. Kiểu css sẽ ghi đè sizethuộc tính trong các trình duyệt hỗ trợ CSS và làm cho trường có độ rộng chính xác và đối với những trường hợp không có, nó sẽ trở về số lượng ký tự được chỉ định.

Chỉnh sửa: Tôi nên đã đề cập rằng sizethuộc tính không phải là một phương pháp định cỡ chính xác: theo đặc tả HTML , nó nên tham chiếu số lượng ký tự của phông chữ hiện tại mà đầu vào sẽ có thể hiển thị cùng một lúc.

Tuy nhiên, trừ khi phông chữ được chỉ định là phông chữ có chiều rộng / không gian cố định, điều này không đảm bảo rằng số lượng ký tự được chỉ định sẽ thực sự hiển thị; trong hầu hết các phông chữ, các ký tự khác nhau sẽ có chiều rộng khác nhau. Câu hỏi này có một số câu trả lời tốt liên quan đến vấn đề này.

Đoạn trích dưới đây thể hiện cả hai cách tiếp cận.

@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>

Tôi đề nghị, có lẽ cách tốt nhất là đặt độ rộng của kiểu theo đơn vị em :) Vì vậy, đối với kích thước đầu vào là 20 ký tự, hãy đặt style='width:20em':)

size không nhất quán trên các trình duyệt khác nhau và cài đặt phông chữ có thể có của chúng.

Các widthphong cách thiết lập trong px sẽ ít nhất phải nhất quán, modulo vấn đề ô-sizing . Bạn cũng có thể muốn đặt kiểu trong 'em' nếu bạn muốn đặt kích thước của nó tương ứng với phông chữ (mặc dù vậy, điều này sẽ không nhất quán trừ khi bạn đặt fontgia đình và kích thước của đầu vào một cách rõ ràng) hoặc '%' nếu bạn đang tạo hình thức bố trí chất lỏng. Dù bằng cách nào, một bản định kiểu có lẽ thích hợp hơn với stylethuộc tính nội tuyến .

Bạn vẫn cần phải sizecho <select multiple>để có được chiều cao xếp hàng với các tùy chọn đúng. Nhưng tôi không sử dụng nó trên <input>.

Tôi muốn nói điều này đi ngược lại với "sự khôn ngoan thông thường", nhưng tôi thường thích sử dụng kích thước. Lý do cho điều này chính xác là lý do mà nhiều người nói không phải: độ rộng của trường sẽ thay đổi tùy theo trình duyệt, tùy thuộc vào kích thước phông chữ. Cụ thể, nó sẽ luôn đủ lớn để hiển thị số lượng ký tự được chỉ định, bất kể cài đặt trình duyệt.

Ví dụ: nếu tôi có trường ngày, tôi thường muốn trường đủ rộng để hiển thị 8 hoặc 10 ký tự (hai chữ số tháng và ngày và hai hoặc bốn chữ số năm, có dấu phân cách). Đặt thuộc tính kích thước về cơ bản đảm bảo với tôi rằng toàn bộ ngày sẽ hiển thị, với không gian lãng phí tối thiểu. Tương tự cho hầu hết các số - Tôi biết phạm vi giá trị dự kiến, vì vậy tôi sẽ đặt thuộc tính kích thước thành số chữ số thích hợp, cộng với dấu thập phân nếu có.

Theo như tôi có thể nói, không có thuộc tính CSS nào làm điều này. Chẳng hạn, đặt chiều rộng cho em dựa trên chiều cao chứ không phải chiều rộng và do đó không chính xác lắm nếu bạn muốn hiển thị một số ký tự đã biết.

Tất nhiên, logic này không phải lúc nào cũng được áp dụng - ví dụ, trường nhập tên có thể chứa bất kỳ số lượng ký tự nào. Trong những trường hợp đó, tôi sẽ quay trở lại các thuộc tính chiều rộng CSS, điển hình là px. Tuy nhiên, tôi sẽ nói rằng phần lớn các trường tôi tạo có một số loại nội dung đã biết và bằng cách chỉ định thuộc tính kích thước, tôi có thể đảm bảo rằng hầu hết nội dung, trong hầu hết các trường hợp, được hiển thị mà không bị cắt.

Tôi vừa mới chiến đấu với một cái bàn mà tôi không thể làm cho nhỏ hơn bất kể yếu tố nào tôi cố làm cho nhỏ hơn chiều rộng của bàn vẫn giữ nguyên. Tôi đã tìm kiếm bằng cách sử dụng fireorms nhưng không thể tìm thấy phần tử nào đặt chiều rộng quá cao.

Cuối cùng tôi đã thử thay đổi thuộc tính kích thước của các thành phần văn bản đầu vào và nó đã sửa nó. Vì một số lý do, thuộc tính kích thước vượt quá độ rộng css. Tôi đã sử dụng jQuery để tự động thêm các hàng vào một bảng và chính các hàng này chứa các đầu vào. Vì vậy, có lẽ khi nói đến việc thêm động các đầu vào bằng cách sử dụng hàm appendTo (), có lẽ tốt hơn là đặt thuộc tính kích thước cùng với chiều rộng.

Bạn sẽ có được sự nhất quán hơn nếu bạn sử dụng chiều rộng (ví dụ thứ hai của bạn).

Bạn có thể thay đổi kích thước bằng cách sử dụng kiểu và chiều rộng để thay đổi kích thước hộp văn bản. Đây là mã cho nó.

<!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>

Sử dụng căn chỉnh để căn giữa hộp văn bản.

Cả sizethuộc tính trong HTML và thuộc widthtính trong CSS sẽ đặt chiều rộng của một <input>. Nếu bạn muốn đặt chiều rộng thành thứ gì đó gần với chiều rộng của mỗi ký tự, hãy sử dụng **ch**đơn vị như trong:

input {
    width: 10ch;
}

HTML kiểm soát ý nghĩa ngữ nghĩa của các yếu tố. CSS kiểm soát bố cục / phong cách của trang. Sử dụng CSS khi bạn đang kiểm soát bố cục của mình.

Nói tóm lại, không bao giờ sử dụng size = ""