ขนาดอินพุตกับความกว้าง

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

หรือ

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

สิ่งที่เป็นรหัสข้ามเบราว์เซอร์ที่ดีที่สุด?

แน่นอนมันขึ้นอยู่กับข้อกำหนด แต่ฉันอยากรู้ว่าผู้คนตัดสินใจอย่างไรและพื้นฐานอะไร

คุณสามารถใช้ทั้งสอง สไตล์ css จะแทนที่sizeแอตทริบิวต์ในเบราว์เซอร์ที่สนับสนุน CSS และทำให้ฟิลด์มีความกว้างที่ถูกต้องและสำหรับที่ไม่เป็นเช่นนั้นก็จะถอยกลับไปตามจำนวนอักขระที่ระบุ

แก้ไข:ฉันควรจะได้กล่าวถึงว่าsizeแอตทริบิวต์ไม่ได้เป็นวิธีที่แม่นยำของการปรับขนาด: ตามข้อกำหนด HTMLก็ควรจะหมายถึงจำนวนตัวอักษรของตัวอักษรในปัจจุบันการป้อนข้อมูลที่จะสามารถที่จะแสดงในครั้งเดียว

อย่างไรก็ตามเว้นแต่แบบอักษรที่ระบุเป็นแบบอักษรที่มีความกว้างคงที่ / monospace นี่ไม่ใช่การรับประกันว่าจำนวนตัวอักษรที่ระบุจะปรากฏให้เห็นจริง ในฟอนต์ส่วนใหญ่อักขระที่แตกต่างจะมีความกว้างต่างกัน คำถามนี้มีคำตอบที่ดีเกี่ยวกับปัญหานี้

ตัวอย่างด้านล่างแสดงให้เห็นถึงทั้งสองวิธี

@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 ไม่สอดคล้องกันในเบราว์เซอร์ที่แตกต่างกันและการตั้งค่าแบบอักษรที่เป็นไปได้

widthชุดในรูปแบบพิกเซลอย่างน้อยจะให้สอดคล้อง modulo ปัญหากล่องขนาด คุณอาจต้องการกำหนดรูปแบบใน 'em' หากคุณต้องการกำหนดขนาดให้สัมพันธ์กับแบบอักษร (แม้ว่าอีกครั้งสิ่งนี้จะไม่สอดคล้องกันเว้นแต่คุณจะตั้งค่าfontตระกูลและขนาดอินพุตของคุณอย่างชัดเจน) หรือ '%' หากคุณสร้าง แบบฟอร์มเลย์เอาต์ของเหลว ไม่ว่าจะด้วยวิธีใดสไตล์ชีตอาจเป็นที่นิยมในstyleแอตทริบิวต์inline

คุณยังคงต้องsizeสำหรับการ<select multiple>ที่จะได้รับความสูงที่สอดรับกับตัวเลือกที่ถูกต้อง <input>แต่ฉันได้ใช้มันใน

ฉันอยากจะบอกว่านี่ขัดกับ "ภูมิปัญญาดั้งเดิม" แต่โดยทั่วไปฉันชอบที่จะใช้ขนาด เหตุผลนี้เป็นเหตุผลที่หลายคนบอกว่าไม่: ความกว้างของฟิลด์จะแตกต่างกันไปในแต่ละเบราว์เซอร์ขึ้นอยู่กับขนาดตัวอักษร โดยเฉพาะจะมีขนาดใหญ่พอที่จะแสดงจำนวนอักขระที่ระบุโดยไม่คำนึงถึงการตั้งค่าเบราว์เซอร์

ตัวอย่างเช่นถ้าฉันมีฟิลด์วันที่ฉันมักจะต้องการฟิลด์ที่กว้างพอที่จะแสดงอักขระ 8 หรือ 10 ตัว (สองหลักเดือนและวันและทั้งปีสองหรือสี่หลักพร้อมตัวคั่น) การตั้งค่าคุณลักษณะขนาดรับประกันได้ว่าฉันจะเห็นวันที่ทั้งวันได้โดยไม่ต้องเปลืองเนื้อที่ ในทำนองเดียวกันสำหรับตัวเลขส่วนใหญ่ - ฉันทราบช่วงของค่าที่คาดหวังดังนั้นฉันจะตั้งค่าคุณลักษณะขนาดเป็นจำนวนหลักที่เหมาะสมรวมถึงจุดทศนิยมถ้ามี

เท่าที่ฉันสามารถบอกได้ว่าไม่มีคุณลักษณะ CSS ทำเช่นนี้ ตัวอย่างเช่นการตั้งค่าความกว้างเป็น em จะขึ้นอยู่กับความสูงไม่ใช่ความกว้างและดังนั้นจึงไม่แม่นยำมากหากคุณต้องการแสดงจำนวนอักขระที่ทราบ

แน่นอนว่าตรรกะนี้ไม่ได้นำไปใช้เสมอ - ตัวอย่างเช่นฟิลด์ป้อนชื่ออาจมีอักขระจำนวนเท่าใดก็ได้ ในกรณีเหล่านั้นฉันจะย้อนกลับไปยังคุณสมบัติความกว้าง CSS โดยทั่วไปจะเป็น px แต่ผมจะบอกว่าส่วนใหญ่ของฟิลด์ฉันจะทำให้มีการจัดเรียงเนื้อหาที่รู้จักกันบางส่วนและแอตทริบิวต์โดยระบุขนาดที่ผมสามารถตรวจสอบว่าส่วนใหญ่ของเนื้อหาในที่สุดกรณีจะปรากฏโดยไม่ต้องตัด

ฉันเพิ่งผ่านการต่อสู้กับตารางที่ไม่สามารถทำให้เล็กลงได้ไม่ว่าองค์ประกอบใดที่ฉันพยายามทำให้ความกว้างของตารางเล็กลงเหมือนเดิม ฉันค้นหาโดยใช้ firebug แต่ไม่พบองค์ประกอบที่ตั้งค่าความกว้างสูงมาก

ในที่สุดฉันก็ลองเปลี่ยนขนาดคุณลักษณะขององค์ประกอบข้อความเข้าและแก้ไขมัน ด้วยเหตุผลบางประการคุณลักษณะขนาดจึงข้ามความกว้าง 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>

ใช้จัดตำแหน่งเพื่อจัดกึ่งกลางกล่องข้อความ

ทั้งsizeแอตทริบิวต์ใน HTML และwidthคุณสมบัติใน CSS <input>จะกำหนดความกว้างของนั้น หากคุณต้องการตั้งค่าความกว้างเป็นสิ่งที่ใกล้เคียงกับความกว้างของอักขระแต่ละตัวให้ใช้**ch**หน่วยใน

input {
    width: 10ch;
}

HTML ควบคุมความหมายเชิงความหมายขององค์ประกอบต่างๆ CSS ควบคุมเลย์เอาต์ / สไตล์ของหน้า ใช้ CSS เมื่อคุณควบคุมเค้าโครงของคุณ

กล่าวโดยย่ออย่าใช้ size = ""